jQuery AJAX未传递“ POST”数据

Question

我有一个简单的带有输入字段的div，可为团队数据插入数据

    <div>
      <label>Register</label>
      <input type="text" name="nt" placeholder="Team Name">
      <label>Team</label>
      <input type="text" name="n1" placeholder="Steam username">
      <input type="text" name="n2" placeholder="Steam username">
      <input type="text" name="n3" placeholder="Steam username">
      <input type="text" name="n4" placeholder="Steam username">
      <input type="submit" id="sbutton"></input>
    </div>

然后，我使用Jquery收集该数据并将其发送到我的php文件。

$('#sbutton').click(function(){
      var sdata=[];
      $(this).parent().children("input[type=text]").each(function(index,value){
          index = $(this).attr("name");
          value = $(this).val();
          sdata[index]=value;
      });
      console.log(sdata);
      $.post('php/team.php',sdata,
          function(returnedData){
              console.log(returnedData);
      });
  });

在我的php文件中，我处理了这些数据，但是问题是，jQuery函数没有传递该数据。我的php：

<?php
session_start();
include_once "functions.php";
print_r($_POST);
if(!isset($_POST["nt"])) die("Usernames not set");?>

我的控制台日志：

[nt: "asdasd", n1: "asdasd", n2: "asdasd", n3: "asdasd", n4: "asdasd"]
jquery-2.1.4.min.js:4 XHR finished loading: POST
"http://localhost/tournament/php/team.php".k.cors.a.crossDomain.send
 @ jquery-2.1.4.min.js:4n.extend.ajax @ jquery-2.1.4.min.js:4n
(anonymousfunction) @ jquery-2.1.4.min.js:4(anonymous function) @ main_page.php:31n.event.dispatch @ jquery-2.1.4.min.js:3r.handle @ jquery-2.1.4.min.js:3
main_page.php:33 Array
(
)
Usernames not set

为什么会这样呢？

Answer 1

更改为对象并使用输入名称设置对象的属性名称，以使用当前使用的相同php方法

$('#sbutton').click(function(){
  var sdata={};
  $(this).parent().children("input[type=text]").each(function(index,value){

      sdata[this.name]=this.value;
  });
  console.log(sdata);
  $.post('php/team.php',sdata,
      function(returnedData){
          console.log(returnedData);
  }).fail(function(){alert('Ooops something wrong')});
});

您可以通过返回整个$_POST轻松地看到接收到的内容，它将显示在成功处理程序的控制台日志中。

echo json_encode($_POST);exit;

Answer 2

您也可以像这样使用FormData对象，即使您似乎没有在HTML中定义<form>

FormData对象使您可以编译一组键/值对，以使用XMLHttpRequest发送。 它主要用于发送表单数据，但可以独立于表单使用以传输键控数据。 如果表单的编码类型设置为multipart / form-data，则传输的数据格式与表单的Submit（）方法将用于发送数据的格式相同。

$('#sbutton').click(function(){
    var formData = new FormData();

    $(this).parent().children("input[type=text]").each(function(index,value){
        formDate.append( $(this).attr("name"), $(this).val() );
    });
    $.post('php/team.php',formData,
          function(returnedData){
              console.log(returnedData);
          })
          .fail(function(){alert('Ooops something wrong')});
});

Answer 3

只需更换

// dictionary, i.e. sdata["nt"] would not work
var sdata=[];

通过

// dictionary, i.e. sdata["nt"] would work
var sdata={};

jQuery对传递的数据使用JSON.stringify方法

如果您有疑问，请尝试使用

console.log(JSON.stringify(sdata))