Jquery:对返回JSON数据的php脚本的Ajax调用

Jquery: Ajax call to a php script returning JSON data

本文关键字：php 脚本 Ajax 调用 数据 返回 JSON Jquery      更新时间：2023-09-26

我是JSON的新手。我有一个带有多维数组的php，它最终以JSON格式编码：

<?php
header('Content-Type: application/json');
$lista = array (
    'Conoscenti'=>array (
        0=>array(
            "Nome"=>"John",
            "Cognome"=>"Doe",
            "Nato"=>array(
                "Giorno"=>16,
                "Mese"=>"Febbraio",
                "Anno"=>1972
            )
        ),
        1=>array(
            "Nome"=>"Elvis",
            "Cognome"=>"Presley",
            "Nato"=>array(
                "Giorno"=>12,
                "Mese"=>"Luglio",
                "Anno"=>1984
            )
        ),
        2=>array(
            "Nome"=>"Mick",
            "Cognome"=>"Jagger",
            "Nato"=>array(
                "Giorno"=>13,
                "Mese"=>"Novembre",
                "Anno"=>1984
            )
        )
     ),
    "Amici"=>array(
        0=>array(
            "Nome"=>"Michael",
            "Cognome"=>"Myers",
            "Nato"=>array(
                "Giorno"=>8,
                "Mese"=>"Dicembre",
                "Anno"=>1986
            )
        ),
        1=>array(
            "Nome"=>"Jim",
            "Cognome"=>"Fear",
            "Nato"=>array(
                "Giorno"=>4,
                "Mese"=>"Febbraio",
                "Anno"=>1985
            )
        )
    )
);
echo json_encode($lista);
?>

我想通过Ajax加载：为此，我编写了一些JQuery代码：

var output ="<ul>";
$.ajax({
    url:"lista.php",
    dataType:"json"
}).done(function(data) {
    $.each(data.Conoscenti, function() {
        output +="<li>"+this.Nome+" "+this.Cognome+" è un mio conoscente. &Egrave; nato il "+this.Nato.Giorno+" "+this.Nato.Mese+" "+this.Nato.Anno+"</li>";
    });
});
output += "</ul>";
$("body").html(output);

但是html页面显示为空白，甚至没有错误。分析源代码时，它只显示ul标记，因为它不在ajax调用中。有人知道我该怎么修吗？非常感谢。

问题是因为promise是在请求完成后执行的。这意味着在对返回的JSON进行循环之前，$('body').html(output)已经运行。

为了解决这个问题，您需要执行所有依赖于done()处理程序中的响应的代码。试试这个：

$.ajax({
    url:"lista.php",
    dataType:"json"
}).done(function(data) {
    var output = "<ul>";
    $.each(data.Conoscenti, function() {
        output += "<li>" + this.Nome + " " + this.Cognome + " è un mio conoscente. &Egrave; nato il " + this.Nato.Giorno + " " + this.Nato.Mese + " " + this.Nato.Anno + "</li>";
    });
    output += "</ul>";
    $("body").html(output);
});

    $.ajax({
        url:"lista.php",
        dataType:"json"
    })
    .done(function(data) {
        var output ="<ul>";
        $.each( data.Conoscenti, function() {
           output +="<li>"+ this.Nome+" "+this.Cognome+" è un mio conoscente. &Egrave; nato il "+ this.Nato.Giorno+" "+ this.Nato.Mese+" "+ this.Nato.Anno+"</li>";
        });
        output += "</ul>";
        $("body").html(output); 
    });

由于变量"out"的打印发生在ajax请求执行之前，因此会出现此问题。您必须将变量的打印放在回调"done"中。

因此，一个好主意是始终有一个分支"完成"和一个分支（也可能是分支"始终"），以便管理请求的成功或失败。

试试这个：

$.ajax({
 url:"lista.php",
 dataType:"json"
})
.done(function(data) {
   var output = "<ul>";
   $.each(data.Conoscenti, function() {
      output += "<li>" + this.Nome + " " + this.Cognome + " è     un mio conoscente. &Egrave; nato il " + this.Nato.Giorno + " " + this.Nato.Mese + " " + this.Nato.Anno + "</li>";
});
output += "</ul>";
$("body").html(output);
})
.fail(function( jqXHR, textStatus, errorThrown ){
   /*manage your error*/
})
.always(function()){
  console.log("completed");
}

Daniele，问题是您在done函数中插入了html，请尝试使用以下代码：

var output ="<ul>";
$.ajax({
    url:"lista.php",
    dataType:"json"
}).done(function(data) {
    $.each(data.Conoscenti, function() {
        output +="<li>"+this.Nome+" "+this.Cognome+" è un mio conoscente. &Egrave; nato il "+this.Nato.Giorno+" "+this.Nato.Mese+" "+this.Nato.Anno+"</li>";
    });
    output += "</ul>";
    $("body").html(output);
});
相关文章：