一个jquery ajax例子

上次搞了个jquery的AutoComplete效果,感觉很久没写jquery了,趁热打铁,再找点东西练练手.这不,看了一下jquery手册,顺便写了一个小例子,源码我直接贴上来了.

1.新建一个web窗体:index.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>
<body>
    <form />

    </div>
    </form>
</body>
</html>

2.好习惯,新建一个js文件: js/common.js

说明:这里,简单说一下$.get()的使用方法,jquery手册上面有它的基本语法,这里面注意一下function(data){...}这个Callback的参数data就可以了,data代表的是处理页面(这里是Ajax/Count.ashx)发送回来的文本(格式有多种,我还没深入了解),至于怎么发送,看看处理页面的代码,下面会说.

$(document).ready(function() {
    $("#btnSubmit").click(function() {
        if (($.trim($("#txtNumA").val()) == "") || ($.trim($("#txtNumB").val()) == "")) {
            alert("請輸入完整的信息");
            return false;
        }

        $.get("Ajax/Count.ashx", { a: $("#txtNumA").val(), b: $("#txtNumB").val() },
    function(data) {
        $("#txtSums").attr("value", data);
        //alert("nums:" + data);
    });
    });
});

3.最后,新建一个处理页面:Ajax/Count.ashx

说明:页面处理完传过来的数据之后,怎么把数据传回去呢?在asp和asp.net中都是以Response.Write的形式返回结果,而像PHP则是echo.同时,请求页面那里的回调函数就会接到一个数值(一般function(data){...}中的data就代表这个处理页面Response.Write的结果了),如果想知道jquery是怎么样获取到这个数值的,可以回到第二点看仔细点.

另外,返回值要写在ProcessRequest(..){//code}的方法内,代码如下:

<%@ WebHandler Language="C#" class="Count" %>

using System;
using System.Web;

public class Count : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        int a = Convert.ToInt32(context.Request.QueryString["a"].Trim());
        int b = Convert.ToInt32(context.Request.QueryString["b"].Trim());
        context.Response.Write(GetCounts(a, b));
    }

    private int GetCounts(int x, int y)
    {
        return x + y;
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

4.自己上网下载一个jquery.js,下图为此项目的文件目录,此项目的功能就是利用AJAX返回两个数字的和,输入中文的没反应的属正常现象.

一个jquery ajax例子

图一

一个jquery ajax例子

相关推荐