jQuery-获取Ajax POST的表单值


73

我正在尝试通过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);
        }
    });

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>

1
您应该以json格式发送它{"key":value, "key":value}。我建议使用您的参数作为属性创建一个JavaScript对象,并使用JSON.stringify(object)该对象将其转换为json格式。
Sang Suantak 2011年

@SangSuantak,当您不需要使用正常的名称/值对集时,为什么还要打扰JSON转换呢?
Alexis Wilke

Answers:


138

使用序列化方法:

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

文件:serialize()


如何获取表格数据和一个额外的手动设置变量?像数据:$(“#registerSubmit”)。serialize()+'&myvar = 123'吗?似乎无法按照我的方式工作
-Dss

3
我看不到那是行不通的。如果要附加的数据比较复杂,可以使用$.param$("form").serialize() + "&" + $.param({ myvar: 123 })
罗宾(Robin)

8
还有另一种方法:use serializeArraydata = $("form").serializeArray(); data.push({ name: "myvar", value: 123 }); $.param(data);
罗宾2014年

是的,这也是我昨晚弄清楚的票。谢谢!
Dss 2014年

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

6

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

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

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


5
是的,但是您不必手动对每个字段进行操作。这就是序列化的目的。如果添加字段怎么办?您不想更改您的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对象中。



0

尝试作为此代码。

$.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()

谢谢。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.