Question

我可以通过定位表单类<form class="my_form_class">来处理我的表单值：

jQuery.ajax({
        type:"GET",
        url: "/wp-admin/admin-ajax.php",
        data: my_form_class,
        context: this,
        success:function(data){

            // do stuff
        }
});

这很有效。

但我想添加更多数据，所以我尝试了：

data: { my_form_class, security : 'foo' },

它不起作用。我在这做错了什么？我试过了：

data: { my_form_class : my_form_class, security : 'foo' },

它显然也没有用。

Answer 1

表单的数据可以序列化，数据可以作为字符串发送:) 我没有测试过这个，但它应该可以工作:)

jQuery.ajax({
        type:"GET",
        url: "/wp-admin/admin-ajax.php",
        data: $('.my_form_class').serialize() + "&security=foo",
        context: this,
        success:function(data){

            // do stuff
        }
});

Answer 2

根据jQuery ajax

的定义

数据

键入：PlainObject或String或Array   要发送到服务器的数据。如果不是字符串，它将转换为查询字符串。它附加到GET请求的URL。请参阅processData选项以防止此自动处理。对象必须是键/值对。如果value是一个数组，jQuery会根据传统设置的值使用相同的键序列化多个值（如下所述）。

您可以使用jquery param和jQuery serialize：

$('.my_form_class').serialize()  + '&' + $.param({security : 'foo'});

我的片段：

＆＃13;

$(function () {
  $('#btn').on('click', function(e) {
    console.log($('.my_form_class').serialize()  + '&' + $.param({security : 'foo'}));
    $.ajax({
      type:"GET",
      url: "/wp-admin/admin-ajax.php",
      data: $('.my_form_class').serialize()  + '&' + $.param({security : 'foo'}),
      context: this,
      success:function(data){
        // do stuff
      }
    }).fail(function(jqXHR, textStatus, errorThrown) {
      console.log('ajax error: ' + textStatus)
    });
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<form class="my_form_class">
    First name:<br>
    <input type="text" name="firstname" value="name"><br>
    Last name:<br>
    <input type="text" name="lastname" value="surname">
</form>
<button id="btn">Submit Form with Ajax</button>

＆＃13;

Answer 3

使用FormData并循环遍历数据对象并将其附加为

var fd = new FormData();
fd.append('key', value);

$(function(){
  $('#btn').on('click',function(){
    var value = 'abc';
    var fd = new FormData();
    var my_form_data = {
      fname: $('#firstname').val(),
      lname: $('#lastname').val()
    };
    for (var key in my_form_data) {
      if (my_form_data.hasOwnProperty(key)) {
        fd.append(key, my_form_data[key]);
      }
    }
    fd.append('value', value);
    console.log(fd);
    jQuery.ajax({
            type:"GET",
            url: "/wp-admin/admin-ajax.php",
            data: fd,
            context: this,
            success:function(data){

                // do stuff
            }
    });
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form_data">
  First name:<br>
  <input type="text" id="firstname"><br>
  Last name:<br>
  <input type="text" id="lastname">
</form>
<button id="btn">Submit</button>

另一种方法包括使用.serialize()。当您希望查询字符串中的数据为

时，可以使用它

var data = $('.my_form_data').serialize();
data += '&security=foo';

<强> AJAX

jQuery.ajax({
        type:"GET",
        url: "/wp-admin/admin-ajax.php",
        data: data,
        context: this,
        success:function(data){

            // do stuff
        }
});

使用jQuery ajax添加多个数据

3 个答案: