如何通过Ajax发送多个数据字段?[关闭]


136

我被困住了:我试图使用AJAX提交表单,但是我找不到通过我的AJAX调用发送多个数据字段的方法。

$(document).ready(function() {
  $("#btnSubmit").click(function()  {
    var status = $("#activitymessage").val();
    var name = "Ronny";
    $.ajax({
      type: "POST",
      url: "ajax/activity_save.php",
      **data: "status="+status+"name="+name"**,
      success: function(msg) {...

我尝试了各种方法:

data: {status: status, name: name},

甚至只是出于测试目的的东西:

data: "status=testing&name=ronny",

但是无论我怎样尝试,activity_save.php我的SQL都一无所获。

那么,将更多行数据放入AJAX调用中的正确语法是什么?


处理输入数据的两种辅助形式均有效。您如何在PHP方面访问它?您可能会考虑使用HTTP嗅探器(在PC上是Fiddler,在Mac上是HTTPScoop之类的东西),它将向您确切显示线路上正在发生什么。
约翰·格林

我建议使用firebug / chrome调试您的帖子数据。确保您收到的是HTTP Code 200,并且表单数据已按照您认为的方式发布。如果发布数据看起来一切正确,我将开始尝试调试您的PHP服务器端代码。
凯尔·罗杰斯

使用Firebug确实有帮助,完全忘记了用它检查我的页面。:/
Deadconversations

在数据参数的前面和结尾使用**有什么用?
heinkasner 2014年

1
@heinkasner,我想这里是**,向读者展示作者想强调的内容。准备将代码保存到文件时,必须删除**!
2014年

Answers:


256

正确的语法是:

data: {status: status, name: name},

如此处指定:http : //api.jquery.com/jQuery.ajax/

因此,如果这不起作用,我将提醒这些变量以确保它们具有值。


4
他在问题中特别指出:“我已经尝试过各种方法: data: {status: status, name: name},
Ry-

20
我只是在指出正确的语法,然后说问题必须是语法以外的其他问题
Avitus

3
似乎我的语法正确,我相信我犯了一个非常愚蠢的SQL错误。
死亡对话,

2
关于:语法,请注意,键名是“-”,例如data: { site-name: "StackOverflow" }将不起作用。
moey 2011年

来自文档 “ data选项可以包含形式的查询字符串key1=value1&key2=value2或形式的对象{key1: 'value1', key2: 'value2'}。如果使用后者形式,则在发送数据之前,使用jQuery.param()将数据转换为查询字符串。 ”
杰·布兰查德

32

您可以通过JSON或通过常规POST发送数据,这是JSON的示例。

 var value1 = 1;
 var value2 = 2;
 var value3 = 3;   
 $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "yoururlhere",
      data: { data1: value1, data2: value2, data3: value3 },
      success: function (result) {
           // do something here
      }
 });

如果您想通过普通帖子使用它,请尝试此

 $.ajax({
      type: "POST",
      url: $('form').attr("action"),   
      data: $('#form0').serialize(),
      success: function (result) {
         // do something here
      }
 });

.serialize()没有定义!
Amirhossein Mehrvarzi 2014年


6
var countries = new Array();
countries[0] = 'ga';
countries[1] = 'cd';

之后,您可以像:

var new_countries = countries.join(',')

后:

$.ajax({
    type: "POST",
    url: "Concessions.aspx/GetConcessions",
    data: new_countries,
    ...

这个东西作为JSON字符串格式工作。


当尝试通过ajax传递数组时,此解决方案对我有用。解决方案是将其连接成字符串。谢谢!
布赖恩·鲍威尔


3

这对我有用。

这是我的PHP:

<div id="pageContent">
  <?php
    while($row = mysqli_fetch_assoc($stmt)) {
  ?>
  <br/>
  <input id="vendorName_" name="vendorName_<?php echo $row["id"]; ?>" value='<?php echo $row["vendorName"]; ?>'>
  <input id="owner_" name="owner_<?php echo $row["id"]; ?>" value='<?php echo $row["owner"]; ?>'>
  <input id="city_" name="city_<?php echo $row["id"]; ?>" value='<?php echo $row["city"]; ?>'>
  <button id="btn_update_<?php echo $row["id"]; ?>">Update</button>
  <button id="btn_delete_<?php echo $row["id"]; ?>">Delete</button>
  <?php
    }
  ?>
  </br></br>
  <input id = "vendorName_new" value="">
  <input id = "owner_new" value="">
  <input id = "city_new" value="">
  <button id = "addNewVendor" type="submit">+ New Vendor</button>
</div>

这是我的使用AJAX的jQuery:

$("#addNewVendor").click(function() {
  alert();
  $.ajax({
    type: "POST",
    url: "create.php",
    data: {vendorName: $("#vendorName_new").val(), owner: $("#owner_new").val(), city: $("#city_new").val()},
    success: function(){
      $(this).hide();
      $('div.success').fadeIn();
      showUsers()
    }
  });
});

2

我是ajax的初学者,但我认为要使用此“数据:{状态:状态,名称:名称}”方法,数据类型必须设置为JSON,即

$.ajax({
type: "POST",
dataType: "json",
url: "ajax/activity_save.php",
data: {status: status, name: name},

3
欢迎堆栈溢出。dataType是您希望从服务器获得的内容类型响应,而不是发送的内容。您发送的数据将始终转换为foo=bar&bar=foo
h2ooooooo 2013年


1

试试这个:

$(document).ready(function() {
  $("#btnSubmit").click(function() {
    var status = $("#activitymessage").val();
    var name = "Ronny";
    $.ajax({
      type: "POST",
      url: "ajax/activity_save.php",
      data: {'status': status, 'name': name},
        success: function(msg) {...

1

我是AJAX的新手,我已经尝试过了,效果很好。

function q1mrks(country,m) {
  // alert("hellow");
  if (country.length==0) {
    //alert("hellow");
    document.getElementById("q1mrks").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("q1mrks").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","../location/cal_marks.php?q1mrks="+country+"&marks="+m,true);
  //mygetrequest.open("GET", "basicform.php?name="+namevalue+"&age="+agevalue, true)
  xmlhttp.send();
}

1

尝试使用:

$.ajax({
    type: "GET",
    url: "something.php",
    data: { "b": data1, "c": data2 },   
    dataType: "html",
    beforeSend: function() {},
    error: function() {
        alert("Error");
    },
    success: function(data) {                                                    
        $("#result").empty();
        $("#result").append(data);
    }
});

1
也许有一些解释?
cs95

0

经过两天的抓挠,这对我有用:为什么我无法获得AJaX的“数据”设置来发送两个键/值(包括一个包含原始图像数据的变量)的原因是一个谜,但这似乎就是jQuery.param()函数的原因编写的目的;

用变量创建一个params数组,不带引号:

var params = { key_name1: var_1, key_name2: var_2  }; // etc.

var ser_data = jQuery.param( params );   // arbitrary variable name

使用变量ser_data作为数据值;

      $.ajax({
       type: 'POST',
       url: '../php_handler_url.php',
       data: ser_data,
    }).success(function(response) {
       alert(response);
    });

文档在这里: https //api.jquery.com/jQuery.param/

希望有帮助!

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.