现在的位置: 首页 > 综合 > 正文

JQuery ajax post使用

2013年10月22日 ⁄ 综合 ⁄ 共 6319字 ⁄ 字号 评论关闭

准备工作

·Customer类

复制代码
public class Customer
{
    
public int Unid { getset; }
    
public string CustomerName { getset; }
    
public string Memo { getset; }
    
public string Other { getset; }
}

复制代码

 

jQuery.post( url, [data], [callback], [type] )

 

·url:加载页的地址

·data(optional):k/v对或序列化的字符串(.serialize()),参数

·callbakc(optional):数据成功加载后的执行函数

·type(optional):请求返回的数据格式,串型

 

(一)ashx文件

(1)请求单实体数据

·Ashx文件,这里不对返回的数据做显式的序列化。 

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

context.Response.Write(customer);

 

·ajax post

复制代码
function GetCustomer_Ashx() {
    $.post(
    
"webdata/post_1.ashx",
    
function(data) {
        
var sx = $.JsonToObject(data);
        
var tt = "";
        $.each(sx, 
function(k, v) {
            tt 
+= k + "" + v + "<br/>";
        })
        $(
"#divmessage").html(tt);
    },
    
"json"
);}

复制代码

 

(2)请求实体集合

·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);

复制代码

 

·ajax post

复制代码
function GetCustomer_AshxList() {
    $.post(
    
"webdata/post_1.ashx",
    
function(data) {
        
var jsonObjects = $.jsonToObject(data);
        
var tt = "";
        $.each(jsonObjects, 
function(k, v) {
            $.each(v, 
function(kk, vv) {
                tt 
+= kk + "" + vv + "<br/>";
            });
        });

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

复制代码

 

(3)带参数的请求

·ashx文件

在前者基础上添加了对请求参数的获取语句,并添加了linq查询

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);

 

·ajax post

复制代码
function GetCustomer_AshxWithPara() {
    $.post(
    
"webdata/post_1.ashx",
    { iUnid: 
1 },
    
function(data) {
        
var tt = "";
        $.each(data, 
function(k, v) {
            $.each(v, 
function(kk, vv) {
                tt 
+= kk + "" + vv + "<br/>";
            });
        });
        $(
"#divmessage").html(tt);
    },
    
"json"
);}
复制代码

 

注意,这里返回的直接是json对象[object,object],可以直接解析。

这种参数传递的方法是以k/v对格式传递,post还有一种方式,那就是.serialize()之后的字串。

(二)Web Service

(1)Hello

·ws

[WebMethod]
public string HelloWorld()
{
    
return "Hello World";
}

 

·ajax post

复制代码
function WebService_Hello() {
    $.post(
    
"post_1.asmx/HelloWorld",
    
function(data) {
        alert(data.text);
        $(
"#divmessage").html(data);
    },
    
"json"
);}
复制代码

 

这个web方法返回一个单独的字串。这是一个纯正的字串,对于客户端来说,这是一个object对象,但也可以理解为一个[object,object]对象,而它完整的数据格式可以理解为:{text: "Hello World"}

所以这里对它进行访问,可以如下:

·data.text 这种方式对应于Object.Property

·data["text"] 这种方式对应于Object["key"]

(2)json串

·ws

复制代码
[WebMethod]
public string HelloWorld_Json()
{
    
string strJson=
      
@"{Unid:1,CustomerName:""宋江"",Memo:""天魁星"",Other:""黑三郎""}";
    
return strJson;
}
复制代码

 

·ajax post

复制代码
function WebService_HelloJsonString() {
    $.post(
    
"post_1.asmx/HelloWorld_Json",
    
function(data) {
        
var jsonString = data.text;
        
var jsonObject = $.jsonToObject(jsonString);
        
var tt = "";
        $.each(jsonObject, 
function(k, v) {
            tt 
+= k + "" + v + "<br/>";
        })

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

复制代码

 

虽然服务方法返回的是string类型的数据:

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

但客户端得到的数据却是object类型,可以理解为[object,object],也就是

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

客户端请求到的数据取到json字串,然后转换为json对象,后进行解析。

所以,在请求web服务方法时,如果方法返回字串类型,先要通过data.text得到做为唯一k/v对的v值,也就是json字串,然后再进行下一步操作。

(3)通过串行化返回json字串的web方法

·ws

复制代码
[WebMethod]
public string GetCustomer_Json()
{
    Customer customer 
= new Customer
      { Unid 
= 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

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

复制代码

 

·ajax post

复制代码
function WebService_CustomerJsonString() {
    $.post(
    
"post_1.asmx/GetCustomer_Json",
    
function(data) {
        
var jsonString = data.text;
        
var jsonObject = $.jsonToObject(jsonString);
        
var tt = "";
        $.each(jsonObject, 
function(k, v) {
            tt 
+= k + "" + v + "<br/>";
        })
        $(
"#divmessage").html(tt);
    },
    
"json"
);}
复制代码

 

这个方法与(2)相同道理。

(4)客户集

·ws

复制代码
[WebMethod]
public string GetCustomerList_Json()
{
    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);
        
return strJson;
}

复制代码

 

·ajax post

复制代码
function WebService_CustomerListJsonString() {
    $.post(
    
"post_1.asmx/GetCustomerList_Json",
    
function(data) {
        
var jsonString = data.text;
        
var jsonObject = $.jsonToObject(jsonString);
        
var tt = "";
        $.each(jsonObject, 
function(k, v) {
            $.each(v, 
function(kk, vv) {
                tt 
+= kk + "" + vv + "<br/>";
            });
        });
        $(
"#divmessage").html(tt);
    },
    
"json"
);}
复制代码

 

其实得到了json字串,也就能正常解析出来。主要是理解返回的数据对象的格式。

(5)带参数的ws

·ws

复制代码
[WebMethod]
public string GetCustomerList_JsonPara(int iUnid)
{
    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); 

        var cus = from q in _list
                  
where q.Unid == iUnid
                  select q; 

        string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(cus);
        
return strJson;
}

复制代码

 

 ·ajax post

复制代码
function WebService_CustomerListJsonStringWithPara() {
    $.post(
"post_1.asmx/GetCustomerList_JsonPara",
    {iUnid:
2},
    
function(data) {
        
var jsonString = data.text;
        
var jsonObject = $.jsonToObject(jsonString);
        
var tt = "";
        $.each(jsonObject, 
function(k, v) {
        $.each(v, 
function(kk, vv) {
        tt 
+= kk + "" + vv + "<br/>";
        });
        });
        $(
"#divmessage").html(tt);        
    }
 );}
复制代码

 

带参数的post时,post函数的type部分不能以json格式请求返回。可以省略。

抱歉!评论已关闭.