[英]fetch JSON data using jQuery and validate it
I have been using jQuery lately, but never used JSON with it. 我最近一直在使用jQuery,但从未将JSON与它一起使用。
Now, I am preparing JSON using PHP on server-side. 现在,我正在服务器端使用PHP准备JSON。 I need to fetch that JSON data using javascript (preferred way using jQuery)
我需要使用javascript来获取JSON数据(使用jQuery的首选方式)
I can get JSON data by going to similar URL mentioned below 我可以通过转到下面提到的类似URL来获取JSON数据
http://www.example.com/getjson.php?catid=1
OR
http://www.example.com/getjson.php?catid=15
There is a file name "getjson.php" on my server, which will accept a 'get' argument as catid (stands for category id), fetches data from category table, and output data in JSON format. 我的服务器上有一个文件名“ getjson.php”,它将接受“ get”参数作为catid(代表类别ID),从类别表中获取数据,并以JSON格式输出数据。
Now I need JS code (If code would be in jQuery, it would be added advantage as I badly need code in jQuery) which can fetch data from above mentioned URL, and parse it (which I believe is decoding JSON, right?). 现在,我需要JS代码(如果代码在jQuery中,那么将增加我的优势,因为我非常需要jQuery中的代码)可以从上述URL中获取数据并进行解析(我相信这是对JSON解码,对吗?)。
One more thing, after fetching data, I need to validate whether data that I have received is in JSON format or not (It's really important) 还有一件事,在获取数据之后,我需要验证接收到的数据是否为JSON格式(这很重要)
Category Table have following fields, which I am outputing in JSON format. 类别表具有以下字段,我以JSON格式输出。
ID, Name, Description, ImageURL, Active, Deleted
Please help me out. 请帮帮我。 Thanks.
谢谢。
You can use a JQuery get function to request your server page and pass the relevant parameters. 您可以使用JQuery get函数来请求服务器页面并传递相关参数。
Then to parse your response you can use JSON.parse()
, if it returns/throws an error you don't have valid JSON. 然后,可以使用
JSON.parse()
来解析响应,如果它返回/抛出错误,则说明您没有有效的JSON。
NOTE once your response has been run through JSON.parse it wont be json string any more it will be a JavaScript object. 注意一旦您的响应通过JSON.parse运行,它将不再是json字符串,而是JavaScript对象。
$.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
}
});
Use $.getJSON(url, data, callback); 使用$ .getJSON(url,data,callback);
It get data from the given url and check if it is JSON valid. 它从给定的URL获取数据,并检查其是否为JSON有效。
$.getJSON(
'http://www.example.com/getjson.php?catid=' + $('#valueContainer').val(),
function (data) {
// do stuff here
});
You can use the following to retrieve the JSON: 您可以使用以下内容检索JSON:
$.getJSON('http://www.example.com/getjson.php?catid=1', function(data) { // success statement here });
Then, you can use jQuery.parseJSON()
to verify the result. 然后,您可以使用
jQuery.parseJSON()
验证结果。 See http://api.jquery.com/jQuery.parseJSON/ for more details. 有关更多详细信息,请参见http://api.jquery.com/jQuery.parseJSON/ 。
$.getJSON
should do the trick. $.getJSON
应该可以解决问题。
$.getJSON("http://www.example.com/getjson.php", {catid:1}, function(data){
console.log( data ); // display the JSON data in the web console
});
Because $.getJSON
returns a jqXHR object you can attach an error callback as follows: 因为
$.getJSON
返回一个jqXHR对象 ,所以可以附加一个错误回调,如下所示:
$.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!");
});
Fun fact: Whenever you use jQuery for AJAX it adds an X-Requested-With header with the value "XMLHttpRequest" to the request. 有趣的事实:每当您将jQuery用于AJAX时,它都会向请求添加一个X-Requested-With标头,其值为“ XMLHttpRequest”。 You can check for this header with your server-side PHP code and decide if you should display an HTML page or send back AJAX-appropriate data instead.
您可以使用服务器端PHP代码检查此标头,然后决定是显示HTML页面还是发送回适合AJAX的数据。
This is useful when you bind to the click event on a link. 当您绑定到链接上的click事件时,这很有用。 But you want the link to still work when someone navigates directly to the href.
但是,当某人直接导航到href时,您希望链接仍然有效。
<a href="http://www.example.com/getjson.php?catid=1">Category 1</a>
JS: 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
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.