Jquery的.post使用方法和举例

2010年07月27日 1,808 次浏览陈华抢沙发

准备工作

·Customer类

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

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

（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 + ” ”;
 });
 });

        $(“#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

注意，这里返回的直接是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 + ” ”;
 })

        $(“#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

这个方法与（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

其实得到了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

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

$.post

调用webservice，通过Response来返回数据。

（一）Hello

·ws

[WebMethod]
public void HelloWorld()
{
    HttpResponse Response = HttpContext.Current.Response;
    Response.ContentEncoding = System.Text.Encoding.Default;
    Response.Write(“Hello world!”);
}

·ajax post

function ajaxVoidHello() {
    $.post(
    ”post_2.asmx/HelloWorld”,
    function(data) {
        var jsonString = data.text;
        $(“#divmessage”).html(data);
    },
    ”json”
    );
}

客户端得到的数据类型为string类型。

（二）得到客户实体

·ws

[WebMethod]
public void GetCustomer()
{
Customer customer = new Customer
{ Unid = 1, CustomerName = ”宋江”, Memo = ”天魁星”, Other = ”黑三郎” };

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

    HttpResponse Response = HttpContext.Current.Response;
    Response.ContentEncoding = System.Text.Encoding.Default;
    Response.ContentType = ”application/json”;
    Response.Write(strJson);
}

这里ContentType很重要，这里要保留，即使空值也可以。

·ajax post

function ajaxGetCustomer() {
    $.post(
    ”post_2.asmx/GetCustomer”,
    function(data) {
        var jsonString = data;
        var jsonObject = $.jsonToObject(jsonString);

var tt = ”;
 $.each(jsonObject, function(k, v) {
 tt += k + ”:” + v + ” ”;
 });

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

请求json数据，返回的是一个字符串，就是json字串，然后处理。

（三）得到客户集

·ws

[WebMethod]
public void GetCustomersList()
{
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);

    HttpResponse Response = HttpContext.Current.Response;
    Response.ContentEncoding = System.Text.Encoding.Default;
    Response.ContentType = ”application/json”;
    Response.Write(strJson);
}

·ajax post

function ajaxGetCustomerList() {
    $.post(
    ”post_2.asmx/GetCustomersList”,
    function(data) {
        alert(data);
        var jsonString = data;
        var jsonObject = $.jsonToObject(jsonString);

var tt = ”;
 $.each(jsonObject, function(k, v) {
 $.each(v, function(kk, vv) {
 tt += kk + ”:” + vv + ” ”;
 });
 });
 $(“#divmessage”).html(tt);
 },
 ”json”
);}

这些很容易理解了，返回的是json字串。处理字串就可以了。

（四）带参数的

·ws

[WebMethod]
public void GetCustomersListWithPara(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 q = _list.Where(p => p.Unid == iUnid);

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

    HttpResponse Response = HttpContext.Current.Response;
    Response.ContentEncoding = System.Text.Encoding.Default;
    Response.ContentType = ”";
    Response.Write(strJson);
}

·ajax post

这里返回的是[object,object]类型。

服务端的ContentType可以设置为空。

自由转载，转载请注明： 转载自WEB开发笔记 www.chhua.com

本文链接地址: Jquery的.post使用方法和举例 http://www.chhua.com/web-note346

WEB开发笔记

Jquery的.post使用方法和举例

相关笔记

评论

发表评论

我的微博，请加关注

最近笔记

文章归档

交换友情链接