php - ajax提交表单信息

Question

<form action="" method="post">
<input type="text" name="name" />
<input type="text" name="email" />
<input type="text" name=qty" />
<textarea name="message"></textarea>
<input type="submit" class="submit" onclick="formSubmit(event)" />
</form>

现在，我使用 ajax 将信息提交到http://example.com/test.php. 如何访问 test.php 中的inputname,email​​ , phone,message值，我知道，如果不使用 ajax，我可以使用 $_POST['email'].. 来访问传递的值。

如果我也想使用 $_POST['email']。我该怎么做？在有人指示后，我做了以下操作，但在 test.php 中。它无法访问 vaule，它有什么问题？

var dataString =  '&name=' + jQuery('input[name=name]').val() +                 
                         '&email=' + jQuery('input[name=email]').val() +
                         '&qty=' + jQuery('input[name=qty]').val() +
                         '&message=' + jQuery('textarea[name=message]').val() +
       jQuery.ajax({
            type: "POST",
            url: "http://www.example.com/test.php",
            data: dataString,

然后在 test.php 我使用。$_POST['email'],$_POST['qty']...它不起作用。

最后一个代码：我添加了 class="ajax-submit" 到

jQuery('form.ajax-submit').submit(function(e) {
    var $this = jQuery(this);
    e.preventDefault();

    if ($this.find('input[name="email"]').val() == '' || $this.find('input[name="qty"]').val() == ''|| $this.find('input[name="message"]').val()=='')) {
    alert("please fill out the required fields");
    return false;
}

    jQuery.ajax({
         type: "POST",
         url: "http://example.com/test.php",
         data: $this.serialize(),
        success: function(response) {
            alert(response);
        },
        error: function() {
                alert('There was an error submitting the form');
            } 
    })
});

Answer 1

不要手动构造查询字符串。你现在所拥有的并没有逃避这些值，这很容易破坏。

相反，只需让 jQuery 为您序列化表单：

$('form.ajax-submit').submit(function(e) {
    var $this = $(this);
    e.preventDefault();

    $.ajax({
        url: $this.attr('action') || window.location,
        type: $this.attr('method') || 'post',
        data: $this.serialize(),
        success: function(response) {
            alert(response);
        }
    })
});

此代码使所有具有该类的表单都ajax-submit通过 AJAX 提交。

要修复您现在拥有的内容，只需更改data密钥的值：

var $form = $('#your_form');

if ($form.find('input[name="email"]').val() == '' || $form.find('input[name="name"]').val() == '') {
    return false;
}

jQuery.ajax({
    type: "POST",
    url: "http://www.example.com/test.php",
    data: $form.serialize(),
    ...

Answer 2

就这样使用它：

jQuery('form').submit(function(e){
   e.preventDefault();
    jQuery.ajax({
        type: "POST",
        url: "http://www.example.com/test.php",
        data: $('form').serialize(),
        success: function(data){
          alert(data);
        },
        error:function(){
          alert('error');
        }
});

Answer 3

有 jQuery 插件可以完成这项工作： http:
//malsup.com/jquery/form/

它只是为您完成所有 AJAX 工作，因为您只是以前一种方式提交表单。