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

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); 

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

在此先感谢！

编辑：我意识到我写这个时有一个错字。不断变化的数据[“名”]到按键[“名”]

Answer 1

有几个地方你会因此遇到麻烦。这里是一个的jsfiddle您与我下面的技巧参考：

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

，需要考虑几件事情...

1）。您返回的数据需要使用parseJSON（）进行转换，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项“关键”变量），使其成为本：

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

现在我们有了一个新的变量关闭的工作（分析），所以我们需要改变这两个$。每个线和html的（）线，以确保它ü SES新的变量....

所以这个：

$.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换行符。

希望这会有所帮助！

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

你有问题jQuery的各项功能。更换成功的功能

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

这是因为jQuery每个功能都有键和值作为参数，所以只能更换“数据”通过在该行的“钥匙”：$("#response").html(data['name'])