jQuery - 获取表单值以进行 ajax POST请求

Question

我试图通过 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>

- user547794

---

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

@SangSuantak，为什么你要费心进行JSON转换，而在正常的名称/值对集合中根本不需要它们呢？！ - Alexis Wilke

Answer 1

使用serialize方法：

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

文档：serialize()

- Robin

---

你如何获取表单数据和一个额外手动设置的变量？例如 data: $("#registerSubmit").serialize() + '&myvar=123'？但是它似乎不能按照我想要的方式工作。 - Dss

我看不出为什么这样不会奏效。如果您想要添加的数据更加复杂，您可以使用$.param。$("form").serialize() + "&" + $.param({ myvar: 123 })。 - Robin

还有另一种方法：使用serializeArray。data = $("form").serializeArray(); data.push({ name: "myvar", value: 123 }); $.param(data); - Robin

是的，这就是我昨晚也想到的方法。我不得不在每个之间手动添加 + '&' +。谢谢！ - Dss

Answer 2

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

- Ritchie

Answer 3

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

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

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

- Headshota

---

是的，但你不应该为每个字段都手动做这件事。这就是序列化的作用。如果你添加一个字段怎么办？你不想改变你的js代码。 - Robin

Answer 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将处理序列化等操作。此外，您可以在数据JSON对象中附加提交查询字符串参数submit=1。

- Baz1nga

Answer 5

尝试使用这段代码。

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

谢谢。

- Chandresh M

Answer 6

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

- Kanishka Panamaldeniya