一个jquery ajax例子
上次搞了个jquery的AutoComplete效果,感觉很久没写jquery了,趁热打铁,再找点东西练练手.这不,看了一下jquery手册,顺便写了一个小例子,源码我直接贴上来了.
1.新建一个web窗体:index.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Test Page</title>
<script src="js/jquery-1.6.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Test Page</title>
<script src="js/jquery-1.6.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtNumA" runat="server" Width="50px"></asp:TextBox>
+<asp:TextBox ID="txtNumB" runat="server" Width="50px"></asp:TextBox>
=<asp:TextBox ID="txtSums" runat="server" Width="50px"></asp:TextBox>
<input type="button" name="btnSubmit" id="btnSubmit" value=" 计 算 " />
</div>
</form>
</body>
</html>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtNumA" runat="server" Width="50px"></asp:TextBox>
+<asp:TextBox ID="txtNumB" runat="server" Width="50px"></asp:TextBox>
=<asp:TextBox ID="txtSums" runat="server" Width="50px"></asp:TextBox>
<input type="button" name="btnSubmit" id="btnSubmit" value=" 计 算 " />
</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;
}
$("#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);
});
});
});
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;
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));
}
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;
}
}
{
return x + y;
}
public bool IsReusable {
get {
return false;
}
}
}
4.自己上网下载一个jquery.js,下图为此项目的文件目录,此项目的功能就是利用AJAX返回两个数字的和,输入中文的没反应的属正常现象.
图一
