jquery 实现客户端与服务端数据交互

 html 代码如下：

View Code

 1   <a id="ViewInfo" href="javascript:void(0)" class="link" onclick="ViewMsg(<%#Eval("RecordID")%>);return false;">查看全部</a>
 2  <div id="ViewMsg" style="background-color:#fff; padding:10px;" class="inbox">
 3         <p>
 4             <b>
 5                 <label id="lblSender"></label>
 6             </b>
 7             <label style="margin-left: 10px;">
 8                 <label id="lblSendTime"></label>
 9             </label>
10         </p>
11         <p>
12             <label id="lblContent"></label>
13         </p>
14         <p style="text-align:right;">
15             <input type="button" class="button" value="关闭本页" onclick="closeViewMsg();" />
16             <input id="delMsg" type="button" class="button" value="删除本消息" />
17         </p>
18     </div>

 引用 jquery.js 和 date.f-0.5.0.js（json 日期转换）

function ViewMsg(id) {
    $.ajax({
        type: "post",
        cache: false,
        url: "/user/accountmanage/mymessage/MsgHandler.ashx?id=" + id + "&type=view",
        datatype: "json",
        data:'',//可以在这里写需要http请求的参数。
        success: function (data) {
            $('#lblSender').html(data.Sender);
            $('#lblSendTime').html(new Date(parseInt(data.SendTime.substr(6))).f('yyyy-MM-dd'));//json 日期字符串转换成 string日期 格式
            $('#lblContent').html(data.Content1);
            var message = data.RecordID;
            $('#delMsg').bind('click', { msg: message }, function (event) {

                confirm("确定要删除?");
                $.ajax({
                    type: "post",
                    cache: false,
                    url: "/user/accountmanage/mymessage/MsgHandler.ashx?id=" + event.data.msg + "&type=del",
                    datatype: "text",
                    success: function (data) { location.href = location; },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert('');
                    }
                });
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert('');
        }
    });
}

新建一个一般处理程序 MsgHandler.ashx ：

  public class MsgHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.QueryString["type"] == "view")
            {
                context.Response.ContentType = "application/json";
                int id = JSSDW.Utils.StringUtils.ToInt32(context.Request.QueryString["id"], 0);//这个是把string类型转换为int类型，默认为0，可以直接用convert.into32()
                WebBiz.Message messageBiz = new WebBiz.Message();
                Interface.Message message = messageBiz.GetMessageInfo(id);
                string json = new JavaScriptSerializer().Serialize(message);//把实体类转为json格式输出
                context.Response.Write(json);
            }
            else
            {
                context.Response.ContentType = "application/text";
                int id = JSSDW.Utils.StringUtils.ToInt32(context.Request.QueryString["id"], 0);
                WebBiz.Message messageBiz = new WebBiz.Message();
                messageBiz.DeleteMessageInfo(id);
                context.Response.Write("删除成功");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

$.ajax({

type:'post',//这里页面数据发送请求的方式可以为post和get

cache:'false ', //这里可以为false或者true 是否要缓存 ，默认为false

url  : 'XXXXX/XXX.ashx',//这里页面通过webhttprequest 请求处理的类路径最好写物理路径

datatype：'json',//这里传出的数据格式可以为json类型和text类型

data: flag:'del',id:'ID',$('#id').val()//这里可以写入你要传过去处理的数据和类型等等

success:function(data){},//这里返回经过处理的得到的服务端数据

error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert('');
});

这样就可以实现页面的局部数据的服务端和客户端数据交互了。我不知道这是不是有些人说的异步调用。。。新人刚刚学习不要见怪。

转载于:https://www.cnblogs.com/mu-nan/archive/2012/04/23/2466694.html