上次搞了个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. 数组之reduce()和reduceRight()

    1.reduce()和reduceRight()方法使用指定的函数将数组元素进行组合,生成单个值. reduce()可以传入两个参数,第一个是执行化简操作的函数.同样这个函数可以有参数,第一个参数代表 ...

  2. Java中线程的实现

    在Java中要想实现多线程代码有两种方法,一种是继承 Thread 类,另一种就是实现 Runnable 接口 一.继承 Thread 类 Thread 类是在 java.lang 包中定义的,一个类 ...

  3. C++类继承--基类析构函数加上Virtual

    下面的内容要说明两个问题:1. 基类的析构函数为什么要加上Virtual--防止内存泄露 1. 基类虚构函数无virtual,派生类无法析构,会导致内存泄露 #include <stdio.h& ...

  4. Android碎笔录2——按键的点击变色和圆角实现

    android的Button默认写出来之后都是方形的直角,并且点击感很不明显,只要在drawable中加上一个xml就能解决这个问题: <?xml version="1.0" ...

  5. 扩展javascript原生对象

    原文地址: http://javascript.info/tutorial/native-prototypes 原生的javascript 对象在prototypes里面保存他们可用的方法. 比如,当 ...

  6. Data Flow ->> Multiple Excel Sheet Loaded Into One Table

    同个Excel文件中多个Sheet中的数据导入到单张表中,参考了文章:http://www.cnblogs.com/biwork/p/3478778.html 思路: 1) ForEach Loop组 ...

  7. java.langThrowable:STACKTRACE

    Jboss版本是4.2.0.GA代码运行完后总报错 但是程序的运行结果没问题 请问下这是什么原因2009-12-11 01:53:26,611 INFO  [org.jboss.resource.co ...

  8. .NET预处理器指令

    .NET预处理器指令 做开发以来很少接触到这部分内容,基本上没有用到,偶尔在一些框架中和一些开源项目中会见到,常常因为只关心实现逻辑忽略了这部分的功能.现在自己有点时间了,还是希望能够完整的对这部分做 ...

  9. linux下查看某个文件属于哪个包

    1.centos/redhat下查看某个文件或命令属于哪个rpm包: $ yum provides /etc/passwd 或者 $ rpm -qf /etc/passwd 2.ubuntu及衍生版: ...

  10. Python初学者第八天 元组和字典

    8day 1.数据类型:元组 元组:有序的,不可变地数据的集合.但若包含其他可变元素,这些元素可变.显示的告诉别人,此处不可修改: a = (1,2,3,4,5,['1','a']) 2.数据类型:字 ...