上次搞了个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. javaweb之EL自定义函数

    1.什么是EL自定义函数 EL自定义函数是在EL表达式中调用的某个java类的静态方法,这个静态方法需在web应用程序中进行配置才可以被EL表达式调用.EL自定义函数可以扩展EL表达式的功能,让EL表 ...

  2. kafka-php

    kafka-php kafka-php的github地址  https://github.com/jacky5059/kafka-php 生产者produce示例代码 <?php set_inc ...

  3. C#学习笔记15

    1.平台互操作性和不安全的代码:C#功能强大,但有些时候,它的表现仍然有些“力不从心”,所以我们只能摒弃它所提供的所有安全性,转而退回到内存地址和指针的世界. C#通过3种方式对此提供支持. (1)第 ...

  4. IO流之打印流

    打印流的概述(只有输出就是只与数据目的有关,不会抛出IO异常) 打印流添加输出数据的功能,使它们能够方便地打印各种数据值表示形式. 打印流根据流的分类: l  字节打印流  PrintStream l ...

  5. php编程--二叉树遍历算法实现

    今天使用php来实现二叉树的遍历 创建的二叉树如下图所示 php代码如下所示:   <?php   class Node {   public $value;   public $child_l ...

  6. Failed to create the part's controls解决方法

    今早打开eclipse,所有的文件均打不开,如下所示: 因为项目从tomcat迁移到weblogic,JDK版本从1.8降到了1.6,EL表达式有些也解析不了,猜想是这其中出现了问题. 解决方法: F ...

  7. 02_linux常用指令

    [用户管理] 查看当前用户     whoami 新建用户     sudo adduser higginCui 查看新建用户     ls /home 使用新建用户登录     su -l higg ...

  8. 什么是git subcommand，如何创建git子命令？

    大多数git用户知道如何在git中创建一个alias以便更便利地使用相关命令.很少有人知道至少不会好好利用的是:你实际上可以为Git创建扩展或者plugin,以便上git完成任何你希望完成的工作.这就 ...

  9. 【Leetcode】【Medium】Letter Combinations of a Phone Number

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  10. linux下查看数据库版本的5中方法

    1.在Linux终端窗口中,输入mysql -V查看MySQL版本信息[sky@qin ~]# mysql -Vmysql  Ver 14.14 Distrib 5.1.29-rc, for pc-l ...