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

时间:2011-06-22 15:35:13

标签: javascript jquery validation json

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

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

我可以通过转到下面提到的类似网址来获取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

请帮帮我。感谢。

5 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

$.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 :(得分:0)

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

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

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

答案 3 :(得分:0)

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

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

然后,您可以使用jQuery.parseJSON()来验证结果。有关详细信息,请参阅http://api.jquery.com/jQuery.parseJSON/

答案 4 :(得分:0)

$.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 for AJAX时,它会向请求添加一个带有值“XMLHttpRequest”的X-Requested-With标头。您可以使用服务器端PHP代码检查此标头,并决定是否应显示HTML页面或发送回适当的AJAX数据。

当您绑定到链接上的click事件时,这非常有用。但是,当有人直接导航到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
    });
});