`
cheeruplc
  • 浏览: 114891 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

一个简单但完整的jquery 的ajax程序

阅读更多
每天下班后都会敲会儿代码,怕遇到了问题解决不了,虽然我现在很菜,但是我努力,我相信我每天学点,总有一天我这个蜗牛也会有属于我的天,只要今天比昨天好这不就是希望吗?呵呵 史今说的 我喜欢 也送给大家
今天我写了第一个完整的jquery 的ajax 返回json 的程序,也进一步了解了ajax, json,ashx 之前没有怎么接触过json 只知道键值对的格式 但是不知道在ajax 中怎样使用,今天算是用到了 虽然很简单但是对于我一个初学者来说 还是挺高兴的 希望给那些和我一样在初级阶段徘徊的朋友们能够带来一点帮助 这是个完整的例子
例子是一个当你用户名输入用户名,请求页面进行比对处理 例子很简单但是让初学者可以更好的理解query中的ajax

Javascript:
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    function alertMsg()
    {
        var user={"id":"","pwd":""};
        user.id= $("input:text").val();
        user.pwd=$("input:password").val();        
        $.ajax({
                url: "HandleAjax.ashx",//这里的请求页面建议大家使用ashx 一般处理程序 相当于一个轻量级的aspx 这里的对数据的处理没有必要那么大费周折的使用aspx,也算是对性能做了一点点小贡献吧
                    data: "user="+user.id,// (xml, json, script, or html)如果使用Json 传值 格式为该行代码为 data:({arg:1})
                    datatype: "json",//请求页面返回的数据类型
                    type: "GET",
                    contentType: "application/x-www-form-urlencoded",//发送信息至服务器时内容编码类型 默认值:application/x-www-form-urlencoded
                    success:function(data) {//这里的data是由请求页面返回的数据
                        alert(data.result);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("XMLHttpRequest");
                        }
                });

    }

Html:
<body>
    用户名:<input id="id" type="text" name="id" />
    密码:<input id="pwd" type="password" name="pwd" />
    

    <input id="submit" type="button" name="sub" value="submit" onclick="alertMsg();" />
</body>

请求页面 ashx
<%@ WebHandler Language="C#" Class="HandleAjax" %>

using System;
using System.Web;

public class HandleAjax : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "application/json";  //返回客户端请求的数据类型      如果为xml 则“text/xml”
        if (context.Request["user"] == "jiayou")//无论使用什么方式传值 json 或者连接字符串 都以此方式接收 参数
        {
            string hello="OK";
            context.Response.Write("{\"result\":\""+hello+"\"}");//注意格式”key”:”value” 这里的格式我写错了好几次才改正确的
        }
        else { context.Response.Write("{\"result\":\"Hello pig\"}"); }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}
3
5
分享到:
评论
4 楼 cheeruplc 2011-07-06  
stormtoy 写道
每天都有进步就好

谢谢你啊 呵呵 大家共同进步 祝我们都快乐
3 楼 stormtoy 2011-07-05  
每天都有进步就好
2 楼 抢街饭 2011-07-05  
路过 看看
1 楼 hzw2312 2011-07-05  
LZ是ASP的啊~~~!!!呵呵、"只要今天比昨天好这不就是希望吗?"!这句话很好、旦旦而学、久而不怠! 为之则难者亦易!

相关推荐

    java程序使用jquery AJAX

    接下来,你可以创建一个简单的AJAX请求来与Java后台进行通信。以下是一个使用jQuery AJAX的示例: ```javascript $.ajax({ url: "http://yourserver.com/yourjavaendpoint", // 这是你的Java服务端接口地址 type:...

    Jquery Ajax简易计算器

    "jQuery AJAX简易计算器"是一个实用示例,展示了如何利用jQuery和AJAX实现一个简单的动态计算功能。通过这个项目,开发者可以学习到如何在客户端和服务器之间有效地交换数据,以及如何更新页面内容而无需刷新整个...

    jquery ajax源代码

    - 遍历从服务器返回的 JSON 数据,并构建一个 `&lt;ul&gt;` 元素列表。 - 使用 `$("#did").html(str);` 将生成的列表替换到页面上 id 为 "did" 的元素中。 ##### 2.2 doload2 函数 ```javascript function doload2() {...

    Struts2+jQuery ajax的一个商品小系统

    Struts2作为一个MVC(Model-View-Controller)框架,提供了强大的控制层逻辑,而jQuery则是一种高效的JavaScript库,简化了DOM操作、事件处理以及Ajax通信。在这个"商品小系统"中,它们的结合使用可以实现快速的数据...

    jquery ajax servlet json简单demo

    这个简单的demo是一个很好的学习资源,帮助初学者理解如何使用jQuery的AJAX功能与后端Servlet交互,以及如何使用JSON进行数据交换。通过实践这个demo,你可以更深入地了解这些技术的实际应用。同时,它也展示了Web...

    jquery ajax 异步传值并把值赋予在div标签内

    jquery ajax 异步传值并把值赋予在div标签内 很简单的jquery ajax异步传值 让您清楚了解jquery ajax运作 点击按钮的时候 程序会通过ajax去获取某个PHP文件的输出值 获取PHP文件的输出值的那一刻下面的程序会继续执行...

    Jquery Ajax实现简易计算器

    在本文中,我们将深入探讨如何使用Jquery Ajax技术来实现一个简易计算器。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。结合Jquery库,我们可以...

    jquery ajax json struts2最简单例子测试成功

    2. **JSON与Struts2的结合**:Struts2 Action执行后返回一个JSON字符串,这个字符串被jQuery AJAX请求接收。通过Struts2的插件,如struts2-json-plugin,可以在Action类中直接返回一个包含JSON数据的对象,Struts2会...

    jquery ajax框架

    jQuery AJAX框架是JavaScript库jQuery中的一个核心特性,它极大地简化了网页与服务器之间的异步数据交互。AJAX,即Asynchronous JavaScript and XML,允许在不刷新整个页面的情况下更新部分网页内容,提升了用户体验...

    ajax 开发 必备文件 jquery ajax开发 一般处理程序ajax开发 应用

    jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript编程,包括AJAX操作。 在jQuery中,使用AJAX开发主要有以下知识点: 1. **jQuery的$.ajax()方法**:这是jQuery提供的核心AJAX函数,允许发送异步...

    IW12.2.8JQueryAjax简单例子

    IntraWeb中有一个控件TIWJQueryWidget,使用该控件的文档却很少。 实际上TIWJQueryWidget的OnReady属性就是放置jQuery的$(document).ready()函数代码的位置。本例中在这里绑定IWEDIT1的onkeypress事件处理程序与...

    jquery+ajax例子

    总结起来,"jQuery+Ajax例子"是一个展示如何在MyEclipse环境下使用jQuery进行Ajax请求的实践项目。它涵盖了jQuery的Ajax方法、与Java后端的交互以及开源精神的应用,对于理解Web开发中的异步通信具有很高的参考价值...

    spring3 mvc 用 jquery ajax 交互

    jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及AJAX交互等任务。其内置的AJAX函数使得发起异步请求变得非常简单。 接下来,我们将探讨如何在Spring MVC项目中使用jQuery的AJAX功能: ...

    Asp.Net MVC之jQuery与AJAX操作实例

    jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。在Asp.Net MVC项目中,jQuery可以帮助开发者更高效地处理用户交互和页面动态更新。 二、AJAX基础 AJAX(Asynchronous ...

    asp.net+jquery+ajax所有调用例子

    例如,一个简单的ASP.NET AJAX调用aspx页面的方法可能如下: ```asp.net &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;&lt;/asp:ScriptManager&gt; &lt;asp:Button ID="btnAjaxCall" runat="server" Text="...

    写个一个简单的web项目,把前端技术:html、css、JavaScript、jQuery,ajax,bootstrop等都放在这个web项目上了。

    jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理、动画制作和Ajax交互。它提供了简洁的API,使得开发者能够用更少的代码实现相同的功能。例如,`$(selector).click(function() {...})`用于绑定点击事件,`...

    Jquery+ajax+json+servlet

    首先,`jQuery` 是一个高效、轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。jQuery的出现使得JavaScript代码变得更加简洁易读,减少了跨浏览器兼容性问题。例如,使用jQuery,你可以轻松...

    springmvc利用jquery实现ajax的例子

    Spring MVC是Spring框架的一部分,专门用于构建Web应用程序,而jQuery则是一个强大的JavaScript库,简化了DOM操作、事件处理以及异步HTTP(Ajax)请求。通过结合这两者,我们可以创建交互性更强的Web应用,提供无需...

    php基于jquery的ajax技术传递json数据简单实例.docx

    jQuery 库是一个 JavaScript 库,提供了许多有用的功能,例如选择器、事件处理、动画和 Ajax 等。jQuery 库可以帮助我们快速地开发网页应用程序,在本例中,我们使用 jQuery 库来实现 Ajax 功能。 POST 请求 POST ...

    简单的JQuery+AJAX在线聊天室

    【jQuery和AJAX在线聊天室】是一个初学者友好的示例,它展示了如何利用这两种技术创建实时交互的Web应用程序。这个项目的核心在于使用jQuery库来简化JavaScript操作,并借助AJAX实现页面无刷新通信,从而创建一个...

Global site tag (gtag.js) - Google Analytics