javascript - Ajax、JSON 对象与 php 交互

Question

我是 JSON 和 ajax 新手。基本上我试图从 mysql 数据库获取事件列表并将它们作为 JSON 编码文件发送回 .ajax() 并从该函数显示这些事件列表。我尝试了不同的方法，但我认为我没有走在正确的道路上。作为 Ajax 和 JSON 的新手，使用 ajax 发送和接收数据有点令人困惑，但很有趣

JSON 对象和数组让我感到困惑，我在不知道如何访问内部元素的情况下感到震惊

$.ajax({ 
...
...
...
})
.done(function(result)
{
})

结果是对象、数组还是字符串？我应该在这里使用 JSON.parse() 方法还是应该直接使用 result 来处理和显示数据？

这是我的后端 php 文件的输入格式，

{"data": 
    {
        "dept": "CSE"
    }
}

此输入来自下拉列表，

$("#dept_drop_down").on("change", function() {
...
...
})

我的 php 文件的输出格式是，

{
  "data": {
    "status": "success",
    "response_code": "202",
    "events": {
      "1": {
        "name": "Help Dexter",
        "desc": "Help Dexter to Solve the Puzzle",
        "coordinate": "1307",
        "dept": "CSE"
      },
      "2": {
        "name": "Code Hunt",
        "desc": "Lets hunt the CODE ..!!",
        "coordinate": "2145",
        "dept": "CSE"
      }
    }
  }
}

请帮助我编写 JavaScript 代码，用于发送输入格式 JSON 和接收输出格式 JSON，并使用 AJAX(上面给出的输入和输出格式)显示它们。

等待您的帮助。提前致谢...

这是我的代码...

$(document).ready(function(){ 
    $("#dept_drop_down").on("change", function(){ 
        var dat = $(document.getElementById("dept")).serializeJSON();
        var postdata = JSON.stringify(dat); 
        $.ajax({ 
            url: "elist.php", 
            type: "POST", 
            data: postdata, 
            datatype: 'application/json', 
            error: function(xhr,a,b){alert("This is "+xhr.status)}, 
            beforeSend: function(){alert("Sending.......")}, 
            success:function(result){ 
                var obj=result; 
                d=$.parseJSON(result); 
                if(obj.data.resopnse_code==202)
                { 
                    //object processing .. Here is the place i need help
                }
                else if(obj.data.response_code==200)
                { 
                    //object processing .. Here is the place i need help
                } 
                else if(obj.data.response_code==201)
                { 
                    //object processing .. Here is the place i need help
                } 
                else if(obj.data.response_code==400)
                { 
                    //object processing .. Here is the place i need help
                } 
            }    
        });     
    }); 
});

Answer 1

结果是一个字符串。您可以使用 jQuery.parseJSON 从中创建一个 JSON 对象。

var jsonObj = jQuery.parseJSON( result );

您可以使用您创建的变量(在我的示例 jsonObj 中)和元素名称来访问内部元素。

假设您想要 JSON 中第二个事件的坐标，可以使用以下命令访问它

jsonObj.events.data[1].coordinate

那就是:

• jsonObj:访问主 JSON 对象
• data:访问jsonObj中的数据元素
• 事件:访问数据中的事件
• 1 :访问events元素
中的1元素
• 坐标:访问第二个事件元素中的坐标

这将返回字符串“1307”

总的来说，当您掌握 Ajax 并且似乎已经很好地掌握它时，它并不是那么困难。

这里有一个 Playground :http://codepen.io/anon/pen/WrZQrj