使用 jQuery 获取 JSON 数据并验证它答案

【问题标题】：fetch JSON data using jQuery and validate it使用 jQuery 获取 JSON 数据并验证它
【发布时间】：2011-06-22 15:35:12
【问题描述】：

我最近一直在使用 jQuery，但从未使用过 JSON。

现在，我正在服务器端使用 PHP 准备 JSON。我需要使用 javascript 获取 JSON 数据（使用 jQuery 的首选方式）

我可以通过访问下面提到的类似 URL 来获取 JSON 数据

http://www.example.com/getjson.php?catid=1        
                    OR
http://www.example.com/getjson.php?catid=15

我的服务器上有一个文件名“getjson.php”，它将接受一个'get'参数作为catid（代表类别id），从类别表中获取数据，并以JSON格式输出数据。

现在我需要 JS 代码（如果代码在 jQuery 中，它会增加优势，因为我非常需要 jQuery 中的代码）可以从上述 URL 获取数据并解析它（我相信这是解码JSON，对吗？）。

还有一件事，在获取数据后，我需要验证我收到的数据是否为 JSON 格式（这很重要）

类别表有以下字段，我以 JSON 格式输出。

ID, Name, Description, ImageURL, Active, Deleted

请帮帮我。谢谢。

【问题讨论】：

查看 jQuery 的 $.getJSON();方法。

标签： javascript jquery validation json

【解决方案1】：

$.ajax({
    dataType: 'json',
    type: 'GET',
    url: 'http://www.example.com/getjson.php?catid=15',
    success: function(data) {
        // data be a javascript object that contains your already decoded json data
    }
});

【讨论】：

【解决方案2】：

使用 $.getJSON(url, data, callback);

它从给定的 url 获取数据并检查它是否是 JSON 有效的。

$.getJSON(
    'http://www.example.com/getjson.php?catid=' + $('#valueContainer').val(),
     function (data) {
         // do stuff here
     });

【讨论】：

【解决方案3】：

您可以使用 JQuery get 函数来请求您的服务器页面并传递相关参数。

然后，您可以使用JSON.parse() 解析您的响应，如果它返回/抛出错误，则说明您没有有效的 JSON。

注意一旦您的响应通过 JSON.parse 运行，它将不再是 json 字符串，而是 JavaScript 对象。

【讨论】：

【解决方案4】：

您可以使用以下方法检索 JSON：

$.getJSON('http://www.example.com/getjson.php?catid=1', function(data) { // success statement here });

然后，您可以使用jQuery.parseJSON() 来验证结果。详情请见http://api.jquery.com/jQuery.parseJSON/。

【讨论】：

【解决方案5】：

$.getJSON 应该可以解决问题。

$.getJSON("http://www.example.com/getjson.php", {catid:1}, function(data){
    console.log( data ); // display the JSON data in the web console
});

因为$.getJSON 返回一个jqXHR object，您可以按如下方式附加错误回调：

$.getJSON("http://www.example.com/getjson.php", {catid:1}, function(data){
    console.log( data ); // display the JSON *data* in the web console
    // you can then access the params via dot syntax like this:
    var id = data.ID,
        name = data.Name,
        description = data.Description,
        imageURL = data.ImageURL,
        active = data.Active,
        deleted = data.Deleted;
}).error(function(){
     alert("Error!");
});

有趣的事实：每当您将 jQuery 用于 AJAX 时，它都会在请求中添加一个值为“XMLHttpRequest”的 X-Requested-With 标头。您可以使用服务器端 PHP 代码检查此标头，并决定是否应该显示 HTML 页面或发回适合 AJAX 的数据。

当您绑定到链接上的点击事件时，这很有用。但是，当有人直接导航到 href 时，您希望链接仍然有效。

<a href="http://www.example.com/getjson.php?catid=1">Category 1</a>

JS：

$("a").click(function(e){
    // Keep the browser from navigating to the link's href.
    e.preventDefault();

    // Because we are using one of jQuery's AJAX methods we can get data back from 
    // our server that is different than the data we would get if we navigated to
    // the link directly.
    $.getJSON(this.href, /* optional data param */ function(data){
        console.log( data ); // display the JSON data in the web console
    });
});

【讨论】：