上次搞了个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">
<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>
<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>
   
    &nbsp;
        <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;
        }
        $.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例子的更多相关文章

  1. 项目中的一个JQuery ajax实现案例

    /**  * brief 这些代码用于在线制图中 attention author <list of authors> <date> begin modify by  * nu ...

  2. jquery ajax例子

    (1)取得服务端当前时间 jquery对象.load(url,sendData,function(backData,textStatus,xhr){... ...}) load():如果无参的话,就以 ...

  3. Jquery.ajax 详细解释 通过Http请求加载远程数据

    首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dat ...

  4. jquery ajax 应用返回类型是html json

    jquery ajax 例子:    function JudgeUserName()        {            $.ajax({            type:"GET&q ...

  5. jquery ajax 保存讲解

    jquery ajax 参数传递与数据保存实例是一款适合于初学者用的,首先我们是讲一下关于如何利用ajax +php进行数据操作,然后再详细的介绍关于jquery ajax的帮助说明. jquery ...

  6. JQuery AJAX Demo

    JQuery AJAX Demo APP发展集团:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC ...

  7. jQuery ajax请求错误返回status 0和错误error的问题

    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

  8. WCF入门教程（四）通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]

    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...

  9. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

随机推荐

  1. 基于bootstrap的内容折叠功能

    加入js及css支持: <link rel="stylesheet" href="css/bootstrap.min.css"/> <scri ...

  2. [Java反射基础四]通过反射了解集合泛型的本质

    本文接上文"方法反射的基本操作",利用反射了解下java集合中泛型的本质 1.初始化两个集合,一个使用泛型,一个不使用 ArrayList list1 = new ArrayLis ...

  3. layui-学习03-页面元素

    布局: 相关样式: 包裹层 : layui-container ( 响应式 宽度 ) layui-fluid ( 100% 宽度 )行        : layui-row列        : lay ...

  4. 如何使用idea把web项目打成war包

    如果是maven项目,打成war包很容易,如果是web项目,需要这样子 1. 2. 3. output directory是war包的目录 4.重新选择 第一步的操作,选择build即可.

  5. androidcode

    package UICtrl; import android.animation.ObjectAnimator;import android.content.Context;import androi ...

  6. SpringMVC学习（四）——处理器Handler的各种常用实现

    代码:http://files.cnblogs.com/files/douJiangYouTiao888/MultiActionController.zip 在使用springMVC的开发过程中,Ha ...

  7. 微信小程序——初始化一个小程序项目

    最近准备学习一下微信小程序,因为之前有react native项目经验,学习起来应该困难不大 微信小程序官网地址:https://mp.weixin.qq.com/debug/wxadoc/dev/i ...

  8. sqlserver2008 insert语句性能

    在sqlserver2008中“新建查询”,执行批量添加语句的执行时间: declare @i int ) begin INSERT INTO [xxx].[dbo].[北京万奇亚讯科技_QueryL ...

  9. Routing Manager for WCF4 z

    http://www.codeproject.com/Articles/77198/Routing-Manager-for-WCF Download source Contents Features ...

  10. mysql获取表列信息、主键信息

    /** * 获取物理表中已存在的列信息 * @param tbName 表名 * @return results 查询结果 */ fun getExistColumnInfo(tbName:Strin ...