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 ['发送电子邮件'] ..以访问传递的值。

如果我还想使用$ _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，因为您只是以前一种方式提交表单。

ajax提交表单信息

3 个答案: