浅尝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;

        }

    }

 

}

 

主要是可以让自己知道究竟有没有获取了数据，以及将数据输出是否正确。

转载于:https://www.cnblogs.com/jeanlyn/archive/2012/05/30/2527122.html