通过 Ajax 传递表单值答案

【问题标题】：Passing form values via Ajax通过 Ajax 传递表单值
【发布时间】：2014-01-28 15:25:41
【问题描述】：

我想通过 ajax 传递一个输入值。

这是 Html 代码。

 <form action="GET">
 <div id="username" data-role="fieldcontain">     
        <input type="text" name="username" placeholder="User Name" />
          </div>

        <div id="password" data-role="fieldcontain">   
           <input type="password" name="password" id="txtId" placeholder="Password"/>
         </div>


      <a data-role="button" id="log"  data-theme="b" href="#page2" data-transition="slide">Login</a>

  </form>

这是我的脚本。

<script>

 $.ajax({
        url: "http://1xx.1xx.0.1xx:8081/script.login",
            type: "GET",
            data: { 'page':'create_user', 'access':'user','username': +username.val(), 'password': +password.val()},
            dataType: "text",
            success: function (html) {

            }

    });


</script>

在脚本和数据：行中，我使用 username.val() 和 password.val() 从 div 获取输入，而不是硬编码用户名和密码。

请原谅我的网络开发知识，因为我对此很陌生。它不工作。我做错了什么？

【问题讨论】：

你能解释更多关于不工作的细节吗？你得到的错误信息是什么？
通过 GET 参数传递密码不是一个好主意。
Uncaught TypeError: Object # has no method 'val' 这是 chrome 控制台中的错误。
因为 username 不是 jquery 对象。因此，将 id 分配给文本字段，例如 id="username" 并放入以下脚本 $('#username').val()

标签： javascript jquery html ajax

【解决方案1】：

首先<form action="GET"> 是错误的。一定是<form method="GET">

为我自己分配 id 到每个文本字段并获取 jquery Selector 输入的值。所以，

您的 Html 代码应如下所示..

 <form method="GET">
 <div id="username" data-role="fieldcontain">     
        <input type="text" id="username" name="username" placeholder="User Name" />
          </div>

        <div id="password" data-role="fieldcontain">   
           <input type="password" name="password" id="password" placeholder="Password"/>
         </div>


      <a data-role="button" id="log"  data-theme="b" href="#page2" data-transition="slide">Login</a>

  </form>

并且脚本应该如下所示..

<script>

 $.ajax({
        url: "http://1xx.1xx.0.1xx:8081/script.login",
            type: "GET",
            data: { 'page':'create_user', 'access':'user','username': +$('#username').val(), 'password': +$('#password').val()},
            dataType: "text",
            success: function (html) {

            }

    });


</script>

【讨论】：

感谢 hasib 我尝试了上述解决方案并且它有效，但是表单方法和表单操作之间有什么区别，因为两者似乎都对我有用。
ok，action 表示提交表单时请求的目的地，method 表示请求方法，GET 或 POST 或 PUT 或 DELETE。

【解决方案2】：

使用$("input[name='username']").val() 和password 代替username.val()。

【讨论】：