上次搞了个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. smarty assign 赋值

    assign赋值 void assign (mixed var) void assign (string varname, mixed var) This is used to assign valu ...

  2. jquery echarts 饼状图

    var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...

  3. js动态创建类对象

    1.定义函数,函数中定义类对象 f1=function(){ //定义类 function Pannel(name){ this.name = name; this.print = function( ...

  4. FWORK-数据存储篇 -- 范式与反模式 （学习和理解）

    理解 1.第二范式的侧重点是非主键列是否完全依赖于主键,还是依赖于主键的一部分.第三范式的侧重点是非主键列是直接依赖于主键,还是直接依赖于非主键列.  2. 反模式 范式可以避免数据冗余,减少数据库的 ...

  5. Synchronized的原理及自旋锁，偏向锁，轻量级锁，重量级锁的区别（摘抄和理解）

    1. 自旋锁的优缺点: 自旋锁 自旋锁原理非常简单,如果持有锁的线程能在很短时间内释放锁资源,那么那些等待竞争锁的线程就不需要做内核态和用户态之间的切换进入阻塞挂起状态,它们只需要等一等(自旋),等持 ...

  6. css3之背景属性之background-size

    一.相关属性: background-image: url(“./img/a.jpg”); //设置元素背景图片 background-repeat: repeat/no-repeat: //设置背景 ...

  7. 一个对inner jion ...on 的sql多表联合查询的练习

    create database practiceSql; use practiceSql; -- create table student( `id` bigint not null auto_inc ...

  8. java.sql.SQLException: Incorrect string value: '\xF0\x9F\x9A\x80\xF0\x9F...' for column 'name' at row 1

    1.异常提示: 12:59:10.000 [http-nio-8080-exec-40] DEBUG o.s.j.s.SQLStateSQLExceptionTranslator - Extracte ...

  9. 01_编程规约——OOP规约

    1.[强制]避免通过一个类的对象引用访问此类的静态变量或静态方法,避免增加编译器解析成本,直接用“类名.变量名”访问即可. 2.[强制]所有的覆盖方法,必须加@Override注解 说明:加@Over ...

  10. Nginx 性能参数优化

    user www www; # ginx要开启的进程数 一般等于cpu的总核数,没必要开那么多,1个nginx内存消耗10兆左右 worker_processes 4; # 为每个进程分配cpu,上例 ...