Question

所以我试图用jQuery学习Ajax，以检索一些信息。目前，我有问题获取信息。我的代码目前非常简单，只是因为我想了解它是如何工作的。这是我的HTML代码。

<h2>Hello world</h2>
<p id="response"></p>

我的jQuery代码：

$(function(){
 $('h2').on('click', function() {
   $.ajax({
    url: "ajax.php",
    type: "get",
    datatype: "json",
    success: function(data){
     $.each(data, function(i, key){
      $("#response").html(key['name']) 
     });
    },
    error: function(data){
     console.log("tjohejsan");
   }
   })
 });
});

所以当我点击h2时，它应该检索数据。我想要的是从我的数据库拨打电话以获取有关用户的信息所以我的PHP代码看起来像这样：

$sql = "SELECT * FROM moment2";
$result = mysqli_query($db,$sql) or die("Fel vid SQL-fråga");

$array = array();
while($row = $result->fetch_assoc())
{
    $array[] = $row;
}
echo json_encode($array);

此时，这就是它失败的地方。我真的不知道问题出在哪里。因为我想要一个关联数组如果你能帮助我，我将不胜感激，因为正如我所提到的，我真的不知道如何从这里解决它。

提前致谢！

编辑：我意识到写这篇文章的时候我写错了。将数据['name']更改为key ['name']

Answer 1

你在jquery中有每个函数都有问题。将成功功能替换为

success: function(data){
     $.each(data, function(i, key){
      $("#response").html(key['name']) 
     });
    },

这是因为jquery每个函数都有键和值作为参数，所以只需在此行中用“key”替换“data”：$("#response").html(data['name'])

Answer 2

在你的js中，在成功回调中，你使用了错误的数据，而没有将检索到的数据附加到html标签

这是一个essai

success: function(data){
    if(typeof data != "object"){
        data = JSON.parse(data);
    }  
    $.each(data, function(i, key){
        $("#response").append(key['name']) 
    });
}

Answer 3

有几个地方你会遇到麻烦。这是一个JSFiddle供您参考我的提示：

https://jsfiddle.net/MrProvolone/zgw9ymv3/2/

有几件事要考虑......

1）。您需要使用parseJSON（）转换您返回的数据，这是一个内置的jQuery函数。这会将您的JSON字符串转换为JavaScript对象。

2）。循环浏览对象时，需要包含要尝试访问的数字（i）

3）。因为我们正在创建一个新的对象变量，所以我们不需要$ .each（）函数调用中的“key”指示符... 所以它变成 $ .each（data，function（i））{}）; 代替 $ .each（data，function（i，key）{}）;

3）。当你试图写出你的html时，你必须抓住容器中已有的东西，然后将新的html添加到它，最后把它全部写回容器。

以下是一步一步：

而不是：

success: function(data){
 $.each(data, function(i, key){
  $("#response").html(key['name']) 
 });
}

我们需要添加解析（并按照上面的＃3删除“key”变量），这样它就变成了：

 success: function(data){
    var parsed = jQuery.parseJSON(data);
    $.each(data, function(i){
       $("#response").html(key['name']);
    });
 }

现在我们有了一个新的变量来解析（解析）所以我们需要更改$ .each行和.html（）行以确保它使用该新变量....

所以这个：

$.each(data, function(i, key){
  $("#response").html(key['name']); 
});

成为这个：

$.each(parsed, function(i){
  $("#response").html(parsed['name']); 
 });

但那仍然行不通。我们循环遍历对象，所以当我们尝试访问一个值时，我们必须指定我们试图访问的对象中的哪个元素。所以你的循环中的任何地方都是这样的：

parsed['keyname']

成为这个：

parsed[i]['keyname']

现在我们有：

$.each(parsed, function(i){
  $("#response").html(parsed[i]['name']); 
 });

此时你应该在容器中获得一些html。但是，您会注意到您只获得数据最后一行的值。那是因为你在每个循环中覆盖容器中的所有html，而不是添加到已经存在的内容中。我们需要创建一个新变量来解决这个问题。所以这个：

$.each(parsed, function(i){
  $("#response").html(parsed[i]['name']);
 });

成为这个：

$.each(parsed, function(i){
  var oldhtml = $("#response").html();
  $("#response").html(oldhtml + '<br>' + parsed[i]['name']);
 });

现在，您将看到每个结果，每个结果之间都有一个html换行符。

希望这有帮助！

如何使用Ajax从MySQL获取信息？

3 个答案: