jQuery - 获取ajax POST的表单值

use*_*794 67 ajax jquery

我试图通过AJAX将表单值发布到php文件.如何收集我的表单值以发送"data"参数?

$.ajax({
        type: "POST",
        data: "submit=1&username="+username+"&email="+email+"&password="+password+"&passconf="+passconf,
        url: "http://rt.ja.com/includes/register.php",
        success: function(data)
        {   
            //alert(data);
            $('#userError').html(data);
            $("#userError").html(userChar);
            $("#userError").html(userTaken);
        }
    });
Run Code Online (Sandbox Code Playgroud)

HTML:

<div id="border">
  <form  action="/" id="registerSubmit">
    <div id="userError"></div>
      Username: <input type="text" name="username" id="username" size="10"/><br>
      <div id="emailError" ></div>
      Email: <input type="text" name="email" size="10" id="email"/><br>
      <div id="passError" ></div>
      Password: <input type="password" name="password" size="10" id="password"/><br>
      <div id="passConfError" ></div>
      Confirm Password: <input type="password" name="passconf" size="10" id="passconf"/><br>
      <input type="submit" name="submit" value="Register" />
  </form>
</div>
Run Code Online (Sandbox Code Playgroud)

Rob*_*bin 131

使用serialize方法:

$.ajax({
    ...
    data: $("#registerSubmit").serialize(),
    ...
})
Run Code Online (Sandbox Code Playgroud)

文档:serialize()

  • 还有另一种方法:使用`serializeArray`.`data = $("form").serializeArray(); data.push({name:"myvar",value:123}); $ .PARAM(数据);` (6认同)
  • 我看不出那些不起作用的东西.如果要追加的数据更复杂,可以使用`$ .param`.`$("form").serialize()+"&"+ $ .param({myvar:123})`. (3认同)

小智 13

$("#registerSubmit").serialize() // returns all the data in your form
$.ajax({
     type: "POST",
     url: 'your url',
     data: $("#registerSubmit").serialize(),
     success: function() {
          //success message mybe...
     }
});
Run Code Online (Sandbox Code Playgroud)


Baz*_*nga 6

var data={
 userName: $('#userName').val(),
 email: $('#email').val(),
 //add other properties similarly
}
Run Code Online (Sandbox Code Playgroud)

$.ajax({
        type: "POST",
        url: "http://rt.ja.com/includes/register.php?submit=1",
        data: data

        success: function(html)
        {   
            //alert(html);
            $('#userError').html(html);
            $("#userError").html(userChar);
            $("#userError").html(userTaken);
        }
    });
Run Code Online (Sandbox Code Playgroud)

您不必担心其他任何事情。jquery将处理序列化等。您也可以将提交查询字符​​串参数submit=1附加到数据json对象中。


Hea*_*ota 5

您可以使用val函数从输入中收集数据:

jQuery("#myInput1").val();
Run Code Online (Sandbox Code Playgroud)

http://api.jquery.com/val/

  • 是的,但你不应该为每个领域手动完成.这就是序列化的用途.如果添加字段怎么办?你不想改变你的js. (5认同)