Jquery getJSON方法分析(二)

简介: getJSON与aspx 准备工作 ·Customer类 public class Customer{    public int Unid { get; set; }    public string CustomerName { get; set; }    public str...

getJSONaspx

准备工作

·Customer

public   class  Customer
{
    
public   int  Unid {  get set ; }
    
public   string  CustomerName {  get set ; }
    
public   string  Memo {  get set ; }
    
public   string  Other {  get set ; }
}

 

(一)ashx

Customer customer  =   new  Customer 
       { Unid
= 1 ,CustomerName = " 宋江 " ,Memo = " 天魁星 " ,Other = " 黑三郎 " };

string  strJson  =  Newtonsoft.Json.JsonConvert.SerializeObject(customer);

context.Response.Write(strJson);

 

function  GetCustomer_Ashx() {
    $.getJSON(
    
" webdata/Json_1.ashx " ,
    
function (data) {
        
var  tt  =   "" ;
        $.each(data, 
function (k, v) {
            tt 
+=  k  +   " "   +  v  +   " <br/> " ;
        })

        $(
" #divmessage " ).html(tt);
    });
}

 

·通过getJSONashx请求数据。返回的数据为JSON对象。

(二)ashx文件,但返回的是实体集合

Customer customer  =   new  Customer 
    { Unid
= 1 ,CustomerName = " 宋江 " ,Memo = " 天魁星 " ,Other = " 黑三郎 " };

Customer customer2 
=   new  Customer 
    { Unid 
=   2 , CustomerName  =   " 吴用 " , Memo  =   " 天机星 " , Other  =   " 智多星 "  };        

List
< Customer >  _list  =   new  List < Customer > ();
_list.Add(customer);
_list.Add(customer2);        

string  strJson  =  Newtonsoft.Json.JsonConvert.SerializeObject(_list);
context.Response.Write(strJson);

 

function  GetCustomerList() {
    $.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);
    });
}

 

具体可以参看:http://www.cnblogs.com/jams742003/archive/2009/12/25/1632276.html

(三)请求aspx文件

·cs文件

protected   void  Page_Load( object  sender, EventArgs e)
{
   Customer customer 
=   new  Customer 
     { Unid 
=   1 , CustomerName  =   " 宋江 " , Memo  =   " 天魁星 " , Other  =   " 黑三郎 "  };

  
string  strJson  =  Newtonsoft.Json.JsonConvert.SerializeObject(customer);

  Response.Write(strJson);
}

 

·Aspx文件

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Json_1.aspx.cs "  
  Inherits
= " webdata_Json_1 "   %>

 

前台文件只保留Page声明,其它全部删除。

·js文件

function  GetCustomer_Aspx() {
    $.getJSON(
    
" webdata/Json_1.aspx " ,
    
function (data) {
               
var  tt  =   "" ;
               $.each(data, 
function (k, v) {
                    tt 
+=  k  +   " "   +  v  +   " <br/> " ;
                })
                $(
" #divmessage " ).html(tt);
    });
}

 

这个部分与请求ashx文件时相同。

请求实体集合时,与ashx时相同,这里不做重复。

(四)请求文本文件

文本文件提供json字符串,由$.getJSON得到json对象。

·文本文件

{Unid:1,CustomerName:"宋江",Memo:"天魁星",Other:"黑三郎"}

文本文件提供json串,对于json的组成格式,请参见其它文档。对于这一实体json,会被忽略空行与空格。

 

function  GetCustomer_txt() {
    $.getJSON(
    
" webdata/Json_1.txt " ,
    
function (data) {
        
var  tt  =   "" ;
        $.each(data, 
function (k, v) {
            tt 
+=  k  +   " "   +  v  +   " <br/> " ;
        })
        $(
" #divmessage " ).html(tt);
    });
}

 

解析的方法与其它的相同。

 

对于多行的如下:

文本:

[

{Unid:1,CustomerName:"宋江",Memo:"天魁星",Other:"黑三郎"},

{Unid:2,CustomerName:"吴用",Memo:"天机星",Other:"智多星"}

]

 

解析:

function  GetCustomer_TxtList() {
    $.getJSON(
    
" webdata/Json_1.txt " ,
    
function (data) {
        
var  tt  =   "" ;
        $.each(data, 
function (k, v) {
            $.each(v, 
function (kk, vv) {
                tt 
+=  kk  +   " "   +  vv  +   " <br/> " ;
            });
        });
        $(
" #divmessage " ).html(tt);
    });
}

 

与其它的相同。

(五)带参数ajax请求

ashx为例子,按客户id来请求客户。

·Ashx文件

if (context.Request[ " iUnid " ] == null )
   
return ;

context.Response.ContentType 
=   " text/plain "

Customer customer 
=   new  Customer 
{ Unid 
=   1 , CustomerName  =   " 宋江 " , Memo  =   " 天魁星 " , Other  =   " 黑三郎 "  };

Customer customer2 
=   new  Customer 
{ Unid 
=   2 , CustomerName  =   " 吴用 " , Memo  =   " 天机星 " , Other  =   " 智多星 "  }; 

List
< Customer >  _list  =   new  List < Customer > ();
_list.Add(customer);
_list.Add(customer2);
      

int  iCustomerId  = Convert.ToInt32(context.Request[ " iUnid " ]);
var cus 
=  from q  in  _list
  
where  q.Unid  ==  iCustomerId
  select q;

string  strJson  =  Newtonsoft.Json.JsonConvert.SerializeObject(cus);
context.Response.Write(strJson);

 

·ajax请求

 

function  GetCustomer_AshxWithPara() {
    $.getJSON(
    
" webdata/Json_2.ashx " ,
    { iUnid: 
1  },
    
function (data) {
        
var  tt  =   "" ;
        $.each(data, 
function (k, v) {
            $.each(v, 
function (kk, vv) {
                tt 
+=  kk  +   " "   +  vv  +   " <br/> " ;
            });
        });

        $(
" #divmessage " ).html(tt);
    });
}

 

其中参数也是以k/v对格式发出。请求返回的可以看到:在服务端以Customer列表集合返回。

 

 在jquery库中,getJSON其实是调用的:Query.get(url, data, callback, "json")

这点很重要。

 

博客园大道至简

http://www.cnblogs.com/jams742003/

转载请注明:博客园

目录
相关文章
|
JavaScript 前端开发
jquery中有.post,.get,$.getJSON为什么没postJSON
jquery中有.post,.get,$.getJSON为什么没postJSON
|
1月前
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
43 6
|
2月前
|
JavaScript
jQuery Callback 方法
jQuery Callback 方法
17 3
|
12月前
|
JSON 数据格式
jQuery+ajax解析json数据渲染
jQuery+ajax解析json数据渲染
51 0
|
JavaScript 索引
jQuery.map()方法
jQuery.map()方法
119 0
|
JavaScript 前端开发
jQuery |AJAX load() 方法
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
1146 0
|
JSON JavaScript 数据格式