使用JQuery/Ajax从php文件获取数据_Jquery_Html_Ajax

使用JQuery/Ajax从php文件获取数据

jquery html ajax

使用JQuery/Ajax从php文件获取数据,jquery,html,ajax,Jquery,Html,Ajax,我有一个空表，该表包含3个不同的标题我需要使用jquery.get方法从PHP脚本中获取单个数据，并将每一行插入表中很不确定怎么做。当我点击按钮时，它只是返回整个数据集 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script

我有一个空表，该表包含3个不同的标题

我需要使用jquery.get方法从PHP脚本中获取单个数据，并将每一行插入表中

很不确定怎么做。当我点击按钮时，它只是返回整个数据集

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $.get("file.php",
      {name: "name",
       address: "address",
      type: "type"
},
      function(data){
        $("#name").append(data);
      });
    });
  });

  </script>
</head>

<body>
  <h3> Table for Stadiums </h3>
  <table>
    <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Type</th>
  </tr>
  <tr>
    <td id='name'></td>
    <td></td>
    <td></td>
  </tr>

  </table>

  <button> Click </button>

</body>
</html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.get（“file.php”，
{name:“name”，
地址：“地址”，
类型：“类型”
},
功能（数据）{
$（“#名称”）。追加（数据）；
});
});
});
体育场表
名称
地址
类型
点击

您必须迭代

数据

以形成一个表，请从下面的代码中引用相同的内容，因为您可以使用相同的

可渲染

方法，只需将数据对象传递给它即可：

$（文档）.ready（函数（）{
此参数。数据={
“学生”：[{
“id”：“1”，
“家乡”：“伦敦”，
“性别”：“男性”，
“GPA”：“8”，
“姓名”：“李”，
},
{
“id”：“2”，
“家乡”：“纽约”，
“性别”：“男性”，
“GPA”：“9”，
“姓名”：“沙尔顿”，
}, {
“id”：“3”，
“故乡”：“巴黎”，
“性别”：“女性”，
“GPA”：“7”，
“姓名”：“朱莉”，
}
]
};
this.renderable=函数（学生）{
var tbody=document.getElementById（'tbody'）；
tbody.innerHTML=“”；
for（var i=0；i”；
tbody.innerHTML+=tr；
}
}
this.renderable（this.data.Students）；
console.log（this.data.Students）；
});

说得对：我们不知道从服务器返回了什么数据！
假设file.php返回一个体育场数组，则回调函数应如下所示：
function(data){
    for (var i = 0; i < stadiums.length; i++) {
        var tr = "<tr>";
        tr += "<td class='name'>" + stadiums[i].name + "</td>";
        tr += "<td class='address'>" + stadiums[i].address + "</td>";
        tr += "<td class='type'>" + stadiums[i].type + "</td>";
        tr += "</tr>";
        $("table").append(tr);    
    }
});

功能（数据）{
对于（变量i=0；i
最有可能的情况是，数据作为对象而不仅仅是文本返回。因此，仅仅附加数据并不能像预期的那样起作用。您应该使用Web工具中的控制台或网络选项卡来检查结果。寄回的是什么？您需要的数据示例是什么？每行应显示名称、地址、类型等。对于Statium，我们仍然需要返回给GET调用的数据示例。听起来可能是更复杂的JSON数据。请用返回数据的示例更新您的帖子。要点是使用jquery提供的.get（）函数