jQueryを使用してJSONデータを取得して検証する

Question

最近jQueryを使用していますが、JSONを使用していません。

ここでは、サーバー側でPHPを使用してJSONを準備しています。私はjavascriptの（jQueryのを使用する好ましい方法）

を使用してJSONデータは、私が私の上のファイル名「getjson.php」がある

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

以下に述べるようなURLに移動して、JSONデータを得ることができることをフェッチする必要がありますサーバーはcatid（カテゴリIDを表す）として 'get'引数を受け取り、カテゴリテーブルからデータを取り出し、JSON形式でデータを出力します。

今私はJSONをデコードしていると信じて述べURL上からデータをフェッチし、それを解析することができるJSコード（コードはjQueryのであろう場合、私はひどくのjQueryのコードを必要とするように、それは利点が追加されるだろう）（必要、 右？）。

もう一つ、データをフェッチした後、私は私が受け取ったデータをJSON形式にするかどうかを検証する必要がある

カテゴリー表は、私がoutputing午前れ、次のフィールドを持っている（それは本当に重要です） JSON形式で

ID, Name, Description, ImageURL, Active, Deleted 

私を助けてください。ありがとう。

Answer 1

$ .getJSON（url、data、callback）;を使用します。

指定されたURLからデータを取得し、JSONが有効かどうかを確認します。あなたはJSONを取得するには、次を使用することができます

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

Answer 2

JQuery get関数を使用して、サーバーページを要求し、関連するパラメーターを渡すことができます。

あなたの応答を解析するには、JSON.parse()を使用できます。有効なJSONを持っていないというエラーが返された場合は/ throwします。

あなたの応答がJSON.parseで実行されると、JSON文字列ではなくなり、JavaScriptオブジェクトになります。

Answer 3

$.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 
    } 
}); 

Answer 4

：

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

その後、あなたは結果を確認するためにjQuery.parseJSON()を使用することができます。詳細はhttp://api.jquery.com/jQuery.parseJSON/を参照してください。

Answer 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!"); 
}); 

---

楽しい事実：あなたはAJAXのためのjQueryを使用するたびに、それがX-要求-付きでヘッダーを追加要求に対する値 "XMLHttpRequest"。サーバー側の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 
    }); 
});