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

cheeruplc · 发表于 2013-1-23 01:20:55

每天下班后都会敲会儿代码，怕遇到了问题解决不了，虽然我现在很菜，但是我努力，我相信我每天学点，总有一天我这个蜗牛也会有属于我的天，只要今天比昨天好这不就是希望吗？呵呵史今说的我喜欢也送给大家
今天我写了第一个完整的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"  /></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;       } }}

		自动登录	找回密码
密码			立即注册