jQuery - 获取 ajax POST 的表单值答案

【问题标题】：jQuery - Getting form values for ajax POSTjQuery - 获取 ajax POST 的表单值
【发布时间】：2011-09-15 05:03:37
【问题描述】：

我正在尝试通过 AJAX 将表单值发布到 php 文件。如何收集表单值以在“数据”参数中发送？

$.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);
        }
    });

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>

【问题讨论】：

你应该以json格式发送{"key":value, "key":value}。我的建议是以您的参数作为其属性创建一个 javascript 对象，并使用 JSON.stringify(object) 将对象转换为 json 格式。
@SangSuantak，当您不需要使用普通的名称/值对集时，为什么还要为 JSON 转换而烦恼？！

标签： jquery ajax

【解决方案1】：

使用序列化方法：

$.ajax({
    ...
    data: $("#registerSubmit").serialize(),
    ...
})

文档：serialize()

【讨论】：

如何获取表单数据和额外的手动设置变量？喜欢数据： $("#registerSubmit").serialize() + '&myvar=123' ？这似乎不像我拥有的那样工作
我看不出有什么行不通的。如果要追加的数据比较复杂，可以使用$.param。 $("form").serialize() + "&" + $.param({ myvar: 123 }).
还有另一种方法：使用serializeArray。 data = $("form").serializeArray(); data.push({ name: "myvar", value: 123 }); $.param(data);
是的，这也是我昨晚发现的票。我必须在每个票之间手动添加 + '&' +。谢谢！

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

jQuery("#myInput1").val();

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

【讨论】：

是的，但您不必为每个字段手动执行此操作。这就是序列化的用途。如果添加一个字段呢？你不想改变你的js。

【解决方案4】：

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

和

$.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);
        }
    });

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

【讨论】：

【解决方案5】：

var username = $('#username').val();
var email= $('#email').val();
var password= $('#password').val();

【讨论】：

【解决方案6】：

试试这个代码。

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

        success: function(html)
        {   
            //alert(html);
            $('#userError').html(html);
            $("#userError").html(userChar);
            $("#userError").html(userTaken);
        }
    });

我认为这肯定会奏效..

你也可以使用.serialize()函数通过jquery Ajax发送数据..

i.e: data : $("#registerSubmit").serialize()

谢谢。

【讨论】：