浅尝JQ AJAX
因为之前写AJAX都是用js,于是今天就试下用JQ写AJAX,感觉很爽,代码也写得少,也习惯了一点括号的写法,因为之前一直都没多少去写括号。
关于JQ AJAX,JQ的理念是write less do more,今天写的就深有体会,不但不需要开发者去关心浏览器的兼容性问题,而且JQ的选择器也非常强大,例如:
这里我给两个textbox增加一个class为text的东西,那么我在代码中清空这些textbox只需要这一句的代码 $(".text").attr("value","");就可以吧所有含有class为text的value清空。
在dom加载完毕之后,就为按钮增加click的事件,增加一个AJAX的函数代码如下:
1 $(function () { 2 3 $("#bt").click(function () { 4 5 $.ajax({ 6 7 type: "Post", 8 9 url: "ajax.ashx", 10 11 data: "name="+$("#name").val()+"&sex=man", 12 13 dataType: "text", 14 15 success: function (data) { 16 17 $("#ajax").attr("Value", data); 18 19 $("p").html(data); 20 21 }, 22 23 error: function () { 24 25 $("#ajax").html("请求失败!"); 26 27 } 28 29 }); 30 31 }); 32 33 $("#bt_clear").click(function () { 34 35 $("#ajax").attr("Value", ""); 36 37 $("p").html(""); 38 39 }); 40 41 });
这段代码的意思就是点击按钮,就把id为name的textbox里面的值发送回后台,然后后台获取值之后再把那个值给输出到前端的textbox以及p标签,为id为bt_clear的按钮增加清空的功能。如果想偷懒,那么就用下面的一段代码:
1 $(function () { 2 3 $("#bt").click(function () { 4 5 $.post("ajax.ashx", 6 7 { name: $("#name").val(), sex: "man" }, 8 9 function (data) { 10 11 $("#ajax").attr("Value", data); 12 13 $("p").html(data); 14 15 } 16 17 ); 18 19 }); 20 21 $("#bt_clear").click(function () { 22 23 // $(".text").attr("value",""); 24 25 $("#ajax").attr("Value", ""); 26 27 $("p").html(""); 28 29 $("#name").attr("value", "") 30 31 }); 32 33 });
这段代码达到的效果是一样的,但是我个人觉得一般比较推荐第一种,因为我们可以操控的东西可以更加多,也意味着可以更加灵活。
下面是后台代码,比较简单:
<%@ WebHandler Language="C#" class="ajax" %> using System; using System.Web; public class ajax : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write(context.Request["name"]); } public bool IsReusable { get { return false; } } }
主要是可以让自己知道究竟有没有获取了数据,以及将数据输出是否正确。