基于jquery $.ajax实现客户端与服务器数据实时交互程序

作者:袖梨 2022-06-25

简单的html代码,保存了ajax.html就可以了。

代码如下 复制代码

:void(0)" class="link" onclick="ViewMsg();return false;">查看全部















引用 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 注意文档编码和jquery ajax文件编码必须一致,否则可能出现乱码问题。

代码如下 复制代码

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

下面这段代码是主要的了,就是发送类型为post数据了,然后返回 类型为json上面有个json文件,还有一个url就是请求处理数据的url

代码如下 复制代码

$.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('');
});

总结:
本文章简单的讲述了关于利用了$.ajax的post方法来发送请求返回json数据然后我们进来处理,由于使用了插件我们节省了大量的关于ajax兼容这块的处理,至于asp.net这段代码我们不讲解了。

相关文章

精彩推荐