Jquery 中 JSON 的使用（转）

最新推荐文章于 2024-09-13 17:32:25 发布

linfengqi123

最新推荐文章于 2024-09-13 17:32:25 发布

阅读量785

点赞数

分类专栏： JavaScript 文章标签： json jquery function callback mysql button

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Jquery 中 JSON 的使用

Jquery里面提供了几个函数，可以方便地进行ajax的操作，json就是其中一种数据传输格式，关于json的相关知识就不多说了，主要研究Jquery里的几个函数使用。相关函数：$.get()，$.post()，$.ajax()，$.getJSON()。

一，$.get(url,[data],[callback])

说明：url为请求地址，data为请求数据的列表，callback为请求成功后的回调函数，该函数接受两个参数，第一个为服务器返回的数据，第二个参数为服务器的状态，是可选参数。

而其中，服务器返回数据的格式其实是字符串形势，并不是我们想要的json数据格式，在此引用只是为了对比说明

二，$.post(url,[data],[callback], [type])

说明：这个函数跟$.get()参数差不多，多了一个type参数，type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式一样，都是字符串的

三，$.ajax(opiton)

说明：$.ajax()这个函数功能强大，可以对ajax进行许多精确的控制，需要详细说明的请参照相关资料

四，$.getJSON(url,[data],[callback])

说明：参数说明跟以上的相同，不过它返回的数据格式已经是json格式，所以方便我们直接使用。

下面举个简单的例子来实现JSON的获取与使用

html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> jQuery简化Ajax步骤 </title>
<script language= "javascript" src= "jquery.min.js" ></script>
<script language= "javascript" >
function doRequestUsingGET (){
$ . get ("data.php" , $ ("#firstName.val()" ), function (data ){
$ ("#getResponse" ). html (data );    } //返回的data是字符串类型
);
}
function doRequestUsingPOST (){
$ . post ("data.php" , $ ("#firstName.val()" ), function (data ){
$ ("#postResponse" ). html (data . name );
} , "json" //设置了获取数据的类型，所以得到的数据格式为json类型的
);
}
function doRequestUsingAJAX (){
$ . ajax ({
type : "POST" ,
url : "data.php" ,
data : "#firstName.val()" ,
success : function (data ){
$ ("#ajaxResponse" ). html (data . length );} ,
datatype : "json" //同样，设置了获取的数据类型为json
});
}
function doRequestUsingJSON (){
$ . getJSON ("data.php" , $ ("#firstName.val()" ), function (jsonData ){
$ ("#getJSONResponse" ). html (jsonData . id );} //无需设置，直接获取的数据类型为 json，所以调用时需要使用jsonData.id方式
);}
</script>
</head>
<body><br><br>
<div id= "target" ></div>
<form>
name: <input type= "text" id= "firstName" /><br>
birthday: <input type= "text" id= "birthday" />
</form>
<form>
<input type= "button" value= "GET" onClick= "doRequestUsingGET()" >

<input type= "button" value= "POST" οnclick= "doRequestUsingPOST();" />
<input type= "button" value= "AJAX" οnclick= "doRequestUsingAJAX();" />
<input type= "button" value= "JSON" οnclick= "doRequestUsingJSON();" /></form>
<div id= "getResponse" ></div>
<div id= "postResponse" ></div>
<div id= "ajaxResponse" ></div>
<div id= "getJSONResponse" ></div>
</body>
</html>

php代码：

获取的数据从数据库中读出，因此需要先建立相关的数据库信息

<?php
$sql = "SELECT * FROM `test`" ;
$con = mysql_connect ("localhost" , "root" , "123456" ) or die ("无法连接到数据库" . mysql_error ());
mysql_select_db ("test" , $con ) or die ("无法选择数据库:" . mysql_error ());
$result = mysql_query ($sql );
$obj = mysql_fetch_object ($result );//得到一行数据
$encoded = json_encode ($obj );//将这行数据采用json_encode()转化为json格式
mysql_close ();
echo $encoded ;//返回给调用页面
?>

通过上述的示例调用，可以看到各个方法的使用与区别，同时，也看到了json数据该如何使用，在这里的用法只是做个抛砖引玉的作用，同时，当获取的json数据格式是数组时，例如html页面获取数据库的代码为：

while($obj = mysql_fetch_object($result))
{
$encodable[] = $obj;
}
$encoded = json_encode($encodable);
mysql_close();
echo $encoded;

那么返回的json数据应该为：

[{"id":"19","name":"123","content":"123"},{"id":"20","name":"1231","content":"123123123"},{"id":"21","name":"123123","content":"123123123"},{"id":"26","name":"24","content":"123123"},{"id":"25","name":"321123","content":"321123"},{"id":"24","name":"age","content":"age"},{"id":"23","name":"123123","content":"123123"},{"id":"22","name":"213","content":"123"},{"id":"27","name":"qianglc","content":"dfadsfsadf"},{"id":"28","name":"","content":""}]

这是一个json数据的数组，所以用$.getJSON()调用的时候应该为：

function doRequestUsingJSON(){
   $.getJSON("data.php",$("#firstName.val()"),function(jsonData){
        $("#getJSONResponse").html(jsonData[0].id);}
);
}

jsonData[i].id，先引用那个数组，然后在使用那个字段。