Jquery getJSON方法详细分析
字体：[ ] 类型：转载 时间：
本篇文章主要是对Jquery getJSON方法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
准备工作·Customer类 代码如下:public class Customer{&&& public int Unid { }&&& public string CustomerName { }&&& public string Memo { }&&& public string Other { }}·服务端处理（Json_1.ashx） 代码如下:Customer customer = new Customer &&&&& { Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);
context.Response.Write(strJson);（一）Jquery. getJSON
方法定义：jQuery.getJSON( url, data, callback )
通过get请求得到json数据·url用于提供json数据的地址页·data(Optional)用于传送到服务器的键值对·callback(Optional)回调函数，json数据请求成功后的处理函数 代码如下:function(data, textStatus) {&&&&&&& // data是一个json对象&&&&&&& // textStatus will be "success"&&&&&& // the options for this ajax request}（1）一个对象 代码如下:$.getJSON(&&& "webdata/Json_1.ashx",&&& function(data) {&&&&&& $("#divmessage").text(data.CustomerName);&&& });向Json_1.ashx地址请求json数据，接收到数据后，在function中处理data数据。 这里的data的数据是一条记录，对应于一个customer实例，其中的数据以k/v形式存在。即以[object,object]数组形式存在。{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"}
所以在访问时，以data.Property来访问，下面以k/v循环来打印这条宋江的记录： 代码如下:$.getJSON(&&& "webdata/Json_1.ashx",&&& function(data) {&&&&&&& var tt="";&&&&&&& $.each(data, function(k, v) {&&&&&&&&&&& tt += k + "：" + v + "&br/&";&&&&&&& })&&&&&&& $("#divmessage").html(tt);});结果：Unid：1CustomerName：宋江Memo：天魁星Other：黑三郎
（2）对象数组Ashx文件（Json_1.ashx）修改： 代码如下:List&Customer& _list = new List&Customer&(); Customer customer = new Customer &&&&&& { Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};Customer customer2 = new Customer &&&&&& { Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" };
_list.Add(customer);_list.Add(customer2);string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list); 它生成的json对象的字符串是：
[{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"},{"Unid":2,"CustomerName":"吴用","Memo":"天机星","Other":"智多星"}]
这里可以看到做为集合的json对象不是再一条记录，而是2条记录，是一个[[object,object]]数组：[object,object][object,object]，而每个[object,object]表示一条记录，对应一个Customer，其实也是k/v的形式，而这个v就是一个Customer对象，而这个k是从0开始的索引。 代码如下:$.getJSON(&&& "webdata/Json_1.ashx",&&& function(data) {&&&&&&& $.each(data, function(k, v) {&&&&&&&&&&& alert(k);&&&&&&& });});这时，k值为0,1……
列表json对象的方法： 代码如下:$.getJSON(&&& "webdata/Json_1.ashx",&&& function(data) {&&&&&&& var tt = "";&&&&&&& $.each(data, function(k, v) {&&&&&&&&&&& $.each(v,function(kk, vv) {&&&&&&&&&&&&&&& tt += kk + "：" + vv + "&br/&";&&&&&&&&&&& });&&&&&&& });&&&&&&& $("#divmessage").html(tt);});结果：Unid：1CustomerName：宋江Memo：天魁星Other：黑三郎Unid：2CustomerName：吴用Memo：天机星Other：智多星&
这里用了嵌套循环，第一个循环用于从List中遍历Customer对象，第二个循环用于从Customer对象中遍历Customer对象的属性，也就是k/v对。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具所有回答(6)
创建一个脚本元素，加载index.js脚本，这样就会执行$.scope.rows=[]语句，可以获取到该对象。
你直接在你需要的页面引入这个index.js文件，那么你这个$scope.rows不就是一个全局的变量了吗？然后怎么读取，其实也就是你如何解析Json了&&
园豆：1055
将index.js引入，再引入一个jquery包，使用each方法，加上eval方法循环就可以取得数据了
这是我的js脚本，你看是要把bb换成什么
换成rows未定义错误，换成appMian.rows,遍历出来的全是 undefined
楼主请先把index.js的$scope.rows改成var rows,然后直接黏贴我的代码就可以运行了
&script type="text/javascript" src="index.js" &&/script&
&script type="text/javascript"&
function test(){&alert(rows[2].appName + "--" + rows[2].appType);
function test2(){&&for(var i = 0; i & rows. i++){&&&alert(rows[i].appName + "--" + rows[i].appType);&&}}
&body&&input type="button" value="test" onclick="test()"/&&input type="button" value="test2" onclick="test2()"/&&/body&
//宣告App Main
var appMain = angular.module('appMain', []);
appMain.controller('appPortalController', ["$scope", "$http", "$window", function ($scope, $http, $window) {
// appType選單
$scope.appTypeOption = [
{ name: "Web", value: 1 },
{ name: "WPF", value: 2 },
{ name: "App", value: 3 }
//輸入時必須做資料驗證
// appId 在Server端產生新增時不用輸入
// appName 欄位大小 varchar 100
// appType 必選
// description 欄位大小 varchar 200
//$scope.rows = [
////var rows = [
{ appId: 1, appName: "會計系統1" , appType: 1, description: "應用系統說明!" },
{ appId: 2, appName: "會計系統2", appType: 2, description: "應用系統說明!" },
{ appId: 3, appName: "會計系統3", appType: 3, description: "應用系統說明!" },
{ appId: 4, appName: "會計系統4", appType: 3, description: "應用系統說明!" },
{ appId: 5, appName: "會計系統5", appType: 2, description: "應用系統說明!" },
{ appId: 6, appName: "會計系統6", appType: 1, description: "應用系統說明!" },
{ appId: 7, appName: "會計系統7", appType: 2, description: "應用系統說明!" },
{ appId: 8, appName: "會計系統8", appType: 1, description: "應用系統說明!" }
var rows = [
{ appId: 1, appName: "會計系統1", appType: 1, description: "應用系統說明!" },
{ appId: 2, appName: "會計系統2", appType: 2, description: "應用系統說明!" },
{ appId: 3, appName: "會計系統3", appType: 3, description: "應用系統說明!" },
{ appId: 4, appName: "會計系統4", appType: 3, description: "應用系統說明!" },
{ appId: 5, appName: "會計系統5", appType: 2, description: "應用系統說明!" },
{ appId: 6, appName: "會計系統6", appType: 1, description: "應用系統說明!" },
{ appId: 7, appName: "會計系統7", appType: 2, description: "應用系統說明!" },
{ appId: 8, appName: "會計系統8", appType: 1, description: "應用系統說明!" }
for(var i = 0; i & $scope.rows. i++){
alert($scope.rows[i].appName);
其他类推。
园豆：13283
园豆：13283
//宣告App Mainvar appMain = angular.module('appMain', []);appMain.controller('appPortalController', ["$scope", "$http", "$window", function ($scope, $http, $window) {&&& // appType選單&&& $scope.appTypeOption = [&&&&&&& { name: "Web", value: 1 },&&&&&&& { name: "WPF", value: 2 },&&&&&&& { name: "App", value: 3 }&&& ];
这个鸟毛东西有啥用，如果没用的话，你把那个变量直接复制到页面上用就行了，管他奶奶的
&&&您需要以后才能回答，未注册用户请先。其他回答(5)
查查路由配置吧
园豆：10414
园豆：10414
园豆：10414
你是如何判断Url指定的Action没有执行的，如果是function(data){}没有执行，那么必然是有错误的。有错误就会有错误信息。
如果你用的是Google浏览器，那么F12打开控制台，开打Console选项卡里面会有详细的错误信息。贴出来大家才能帮你想办法。
园豆：3686
园豆：3686
你url这个变量怎么定义的。
园豆：1005
园豆：1005
代码贴出来看看
园豆：2429
园豆：2429
加上一个type="get"，试试！
园豆：2278
园豆：2278
&&&您需要以后才能回答，未注册用户请先。jQuery ajax - getJSON() 方法
jQuery ajax - getJSON() 方法
使用 AJAX 请求来获得 JSON 数据，并输出结果：
$(&button&).click(function(){
$.getJSON(&demo_ajax_json.js&,function(result){
$.each(result, function(i, field){
$(&div&).append(field + & &);
定义和用法
通过 HTTP GET 请求载入 JSON 数据。
在 jQuery 1.2 中，您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 注意：此行以后的代码将在这个回调函数执行前执行。
jQuery.getJSON(url,data,success(data,status,xhr))
必需。规定将请求发送的哪个 URL。
可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)
可选。规定当请求成功时运行的函数。
额外的参数：
response - 包含来自请求的结果数据
status - 包含请求的状态
xhr - 包含 XMLHttpRequest 对象
该函数是简写的 Ajax 函数，等价于：
data: data,
success: callback,
dataType: json
发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。
传递给 callback 的返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组，并使用 $.parseJSON() 方法进行解析。
从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据：
$.getJSON(&test.js&, function(json){
alert(&JSON Data: & + json.users[3].name);
从 Flickr JSONP API 载入 4 张最新的关于猫的图片：
HTML 代码：
&div id=&images&&&/div&
jQuery 代码：
$.getJSON(&/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?&, function(data){
$.each(data.items, function(i,item){
$(&&img/&&).attr(&src&, item.media.m).appendTo(&#images&);
if ( i == 3 )
从 test.js 载入 JSON 数据，附加参数，显示 JSON 数据中一个 name 字段数据：
$.getJSON(&test.js&, { name: &John&, time: &2pm& }, function(json){
alert(&JSON Data: & + json.users[3].name);$.getJSON()，新手求助-ajax-电脑编程网$.getJSON()，新手求助作者：gouxiongyaya　和相关&&HTML code
&script type=&text/script& src=&http://.//libs//1.4.2/.min.js&&&/script&
&script type=&text/script& src=&../js/highcharts.js&&&/script&
&script type=&text/javascript& src=&../js/exporting.js&&&/script&
&script type=&text/javascript&&
$(function(){
$(&#button&).click(function(){
alert(&Hello world&);
$.getJSON(&http://localhost:8080/JsonTest/test.&,function(data){
alert(&ok&);
});
&/script&
test.Java code
&%
List list=new ArrayList();
Person p1=new Person();
p1.setId(1);
p1.setUsername(&xiaolong&);
p1.setValue(&chenggong&);
list.add(p1);
Person p2=new Person();
p2.setId(2);
p2.setUsername(&yaya&);
p2.setValue(&shibai&);
list.add(p2);
JSONArray json=JSONArray.fromObject(list);
response.setCharacterEncoding(&utf-8&);
response.getWriter().print(json);
System.out.println(json);
%&
我只是想简单的做个测试，了解一下json的用法不过页面上提示不了ok，能提示Hello world而且每次访问html页面，控制台也能打印出json，打印如下[{&id&:1,&username&:&xiaolong&,&value&:&chenggong&},{&id&:2,&username&:&yaya&,&value&:&shibai&}]------回答---------------其他回答（20分）---------你试试改成请求一个静态文件data.txt[{&id&:1,&username&:&xiaolong&,&value&:&chenggong&},{&id&:2,&username&:&yaya&,&value&:&shibai&}]试试，我这里测试没问题，而且去掉绝对路径，使用相对路径试试HTML code
&script type=&text/javascript& src=&js/jq.js&&&/script&
&input type=&button& id=&button& value=&button& /&
&script type=&text/javascript&&
$(function(){
$(&#button&).click(function(){
alert(&Hello world&);
$.getJSON(&JsonTest/data.txt&,function(data){//======
alert(&ok&);
});
&/script&
------其他回答（10分）---------引用楼主 gouxiongyaya 的回复:HTML code&script type=&text/javascript& src=&/ajax/libs/jquery/1.4.2/jquery.min.js&&&/script&&script type=&text/javascript& src=&../js/highcharts.js&&&/script&&script typ……CSS code
有时候在后台返回正确格式的情况下，很有可能数据中含有非法字符如换行、空格等
这个时候getJSON方法获得的data中非法字符，这个异步请求的回调就不执行
解决方法
$(function(){
$(&#button&).click(function(){
alert(&Hello world&);
$.get(&http://localhost:8080/JsonTest/test.jsp&,function(data){
var o = eval(data);//or eval(&(& + data + &)&);
alert(&ok&);
});//这个我测试过，有时候数据是正确的，getJSON回调没有反应。用get、post就好了
//不必纠结在这个上面。
------其他回答（10分）---------JQueryJson.jspHTML code
&%@ page contentType=&text/charset=UTF-8& pageEncoding=&UTF-8&%&
&html&
&head&
&title&联动的下拉菜单&/title&
&script type=&text/javascript& src=&jquery.js&&&/script&
&script type=&text/javascript&&
$(function(){
$(&#wc&).change(function(){
//getJSON(url路径,参数{},数值回调)
$.getJSON(&GetJsonByJquery.action&,{index: $(this).val(),index2:$(&#j1&).val()},function(myJSON){
var myOptions = '';
var myTests = '';
var records = myJSON.
for(var i=0;i&records.i++){
var rc = records[i];
//alert(rc.title);
myOptions += '&option value=&' + records[i].title + '&&' + records[i].title + '&/option&';
myTests +=records[i].Author+',';
for (var i = 0; i & myJSON. i++) {
myOptions += '&option value=&' + myJSON[i].optionValue: + '&&' + myJSON[i].optionValue: + '&/option&';
$(&#gx&).html(myOptions);
$('#j1').val(myTests);
$(&#wc&).change();
})
$(function(){
$(&#b1&).click(function(){
// alert(&adfadsf&);
//获取j1值
//alert( $(&#j1&).val());
//将J1值赋予J2
$(&#j2&).val($(&#j1&).val()) ;
);
})
&/script&
&/head&
&body&
&select name=&wc& id=&wc&&
&option&一&/option&
&option&二&/option&
&option&三&/option&
&select name=&gx& id=&gx&&
&input id =&j1& name=&j1& type=&text& value=&你好22222&/&
&input id=&j2& name=&j2& type=&text&/&
&input type=&button& value=&获取& id=&b1& name=&b1&/&
&/body&
&/html&
GetJsonByJquery.javaJava code
package sunon.
import java.io.PrintW
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import org..struts2.ServletActionC
import com.opensymphony.xwork2.ActionS
import org.json.JSONO
import tools.TestJ
public class GetJsonByJquery extends ActionSupport{
public String execute() throws Exception {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter out =
response.setContentType(&text/charset=UTF-8&);
response.setHeader(&Cao ache-Control&, &no-cache&);
out = response.getWriter();
StringBuffer sb = new StringBuffer();
* 接收参数
String indexPam = java.net.URLDecoder.decode(request.getParameter(&index&), &UTF-8&);
String index2Pam = java.net.URLDecoder.decode(request.getParameter(&index2&), &UTF-8&);
System.out.println(&indexPam值：&+indexPam);
System.out.println(&index2Pam值：&+index2Pam);
TestJson tj = new TestJson();
JSONObject signL
signLog = tj.GetAllMess();
* Xml标签返回
sb.append(&&ListType&&);
sb.append(&&JsonMessage&&);
sb.append(signLog);
sb.append(&&/JsonMessage&&);
sb.append(&&/ListType&&);
//System.out.println(sb.toString());
//out.println(sb.toString());
System.out.println(&测试JSON：&+signLog);
out.println(signLog);
out.close();
return &success&;
实现类GetAllMess.javaJava code
public JSONObject GetAllMess() {
con = db.getConnection();
String sql =&Select * From Shop_News limit 0,5&;
ps = con.prepareStatement(sql);
rs = ps.executeQuery();
JSONArray signs = new JSONArray();
while(rs.next()){
JSONObject sign = new JSONObject();
String title = rs.getString(&title&);
String Author = rs.getString(&Author&);
String NewsID = rs.getString(&NewsID&);
//sign.put(&title&, title).put(&Author&, Author).put(&NewsID&,NewsID);
sign.put(&title&, title);
sign.put(&Author&, Author);
sign.put(&NewsID&,NewsID);
//sign.put(&title1&, title).put(&Author&, Author).put(&NewsID&,NewsID);
signs.put(sign);
} catch (JSONException ex) {
Logger.getLogger(TestJson.class.getName()).log(Level.SEVERE, null, ex);
JSONObject json = new JSONObject();
json.put(&records&, signs);
} catch (JSONException ex) {
Logger.getLogger(TestJson.class.getName()).log(Level.SEVERE, null, ex);
} catch (SQLException ex) {
ex.printStackTrace();
this.close();
}
------回答---------------其他回答（20分）---------
你试试改成请求一个静态文件data.txt[{&id&:1,&username&:&xiaolong&,&value&:&chenggong&},{&id&:2,&username&:&yaya&,&value&:&shibai&}]试试，我这里测试没问题，而且去掉绝对路径，使用相对路径试试HTML code
&script type=&text/javascript& src=&js/jq.js&&&/script&
&input type=&button& id=&button& value=&button& /&
&script type=&text/javascript&&
$(function(){
$(&#button&).click(function(){
alert(&Hello world&);
$.getJSON(&JsonTest/data.txt&,function(data){//======
alert(&ok&);
});
&/script&
------其他回答（10分）---------引用楼主 gouxiongyaya 的回复:HTML code&script type=&text/javascript& src=&/ajax/libs/jquery/1.4.2/jquery.min.js&&&/script&&script type=&text/javascript& src=&../js/highcharts.js&&&/script&&script typ……CSS code
有时候在后台返回正确格式的情况下，很有可能数据中含有非法字符如换行、空格等
这个时候getJSON方法获得的data中非法字符，这个异步请求的回调就不执行
解决方法
$(function(){
$(&#button&).click(function(){
alert(&Hello world&);
$.get(&http://localhost:8080/JsonTest/test.jsp&,function(data){
var o = eval(data);//or eval(&(& + data + &)&);
alert(&ok&);
});//这个我测试过，有时候数据是正确的，getJSON回调没有反应。用get、post就好了
//不必纠结在这个上面。
------其他回答（10分）---------JQueryJson.jspHTML code
&%@ page contentType=&text/charset=UTF-8& pageEncoding=&UTF-8&%&
&html&
&head&
&title&联动的下拉菜单&/title&
&script type=&text/javascript& src=&jquery.js&&&/script&
&script type=&text/javascript&&
$(function(){
$(&#wc&).change(function(){
//getJSON(url路径,参数{},数值回调)
$.getJSON(&GetJsonByJquery.action&,{index: $(this).val(),index2:$(&#j1&).val()},function(myJSON){
var myOptions = '';
var myTests = '';
var records = myJSON.
for(var i=0;i&records.i++){
var rc = records[i];
//alert(rc.title);
myOptions += '&option value=&' + records[i].title + '&&' + records[i].title + '&/option&';
myTests +=records[i].Author+',';
for (var i = 0; i & myJSON. i++) {
myOptions += '&option value=&' + myJSON[i].optionValue: + '&&' + myJSON[i].optionValue: + '&/option&';
$(&#gx&).html(myOptions);
$('#j1').val(myTests);
$(&#wc&).change();
})
$(function(){
$(&#b1&).click(function(){
// alert(&adfadsf&);
//获取j1值
//alert( $(&#j1&).val());
//将J1值赋予J2
$(&#j2&).val($(&#j1&).val()) ;
);
})
&/script&
&/head&
&body&
&select name=&wc& id=&wc&&
&option&一&/option&
&option&二&/option&
&option&三&/option&
&select name=&gx& id=&gx&&
&input id =&j1& name=&j1& type=&text& value=&你好22222&/&
&input id=&j2& name=&j2& type=&text&/&
&input type=&button& value=&获取& id=&b1& name=&b1&/&
&/body&
&/html&
GetJsonByJquery.javaJava code
package sunon.
import java.io.PrintW
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import org..struts2.ServletActionC
import com.opensymphony.xwork2.ActionS
import org.json.JSONO
import tools.TestJ
public class GetJsonByJquery extends ActionSupport{
public String execute() throws Exception {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter out =
response.setContentType(&text/charset=UTF-8&);
response.setHeader(&Cao ache-Control&, &no-cache&);
out = response.getWriter();
StringBuffer sb = new StringBuffer();
* 接收参数
String indexPam = java.net.URLDecoder.decode(request.getParameter(&index&), &UTF-8&);
String index2Pam = java.net.URLDecoder.decode(request.getParameter(&index2&), &UTF-8&);
System.out.println(&indexPam值：&+indexPam);
System.out.println(&index2Pam值：&+index2Pam);
TestJson tj = new TestJson();
JSONObject signL
signLog = tj.GetAllMess();
* Xml标签返回
sb.append(&&ListType&&);
sb.append(&&JsonMessage&&);
sb.append(signLog);
sb.append(&&/JsonMessage&&);
sb.append(&&/ListType&&);
//System.out.println(sb.toString());
//out.println(sb.toString());
System.out.println(&测试JSON：&+signLog);
out.println(signLog);
out.close();
return &success&;
实现类GetAllMess.javaJava code
public JSONObject GetAllMess() {
con = db.getConnection();
String sql =&Select * From Shop_News limit 0,5&;
ps = con.prepareStatement(sql);
rs = ps.executeQuery();
JSONArray signs = new JSONArray();
while(rs.next()){
JSONObject sign = new JSONObject();
String title = rs.getString(&title&);
String Author = rs.getString(&Author&);
String NewsID = rs.getString(&NewsID&);
//sign.put(&title&, title).put(&Author&, Author).put(&NewsID&,NewsID);
sign.put(&title&, title);
sign.put(&Author&, Author);
sign.put(&NewsID&,NewsID);
//sign.put(&title1&, title).put(&Author&, Author).put(&NewsID&,NewsID);
signs.put(sign);
} catch (JSONException ex) {
Logger.getLogger(TestJson.class.getName()).log(Level.SEVERE, null, ex);
JSONObject json = new JSONObject();
json.put(&records&, signs);
} catch (JSONException ex) {
Logger.getLogger(TestJson.class.getName()).log(Level.SEVERE, null, ex);
} catch (SQLException ex) {
ex.printStackTrace();
this.close();
}
相关资料：｜｜｜｜｜｜｜$.getJSON()，新手求助来源网络，如有侵权请告知，即处理！编程Tags：　　　　　　　　　　　　　　　　&