jquery 的 ajax 程序 简单的

了解ajax， json，ashx,例子是一个当你用户名输入用户名，请求页面进行比对处理 例子很简单但是让初学者可以更好的理解query中的ajax
Javascript：
Javascript代码 
  1. <script src="js/jquery-1.4.2.js" type="text/javascript"></script>  
  2. <script type="text/javascript">  
  3. function alertMsg()  
  4. {  
  5.     var user={"id":"","pwd":""};  
  6.     user.id= $("input:text").val();  
  7.     user.pwd=$("input:password").val();          
  8.     $.ajax({  
  9.             url: "HandleAjax.ashx",//这里的请求页面建议大家使用ashx 一般处理程序 相当于一个轻量级的aspx 这里的对数据的处理没有必要那么大费周折的使用aspx,也算是对性能做了一点点小贡献吧  
  10.                 data: "user="+user.id,  
  11.                 datatype: "json",//请求页面返回的数据类型  
  12.                 type: "GET",  
  13.                 contentType: "application/json",//注意请求页面的contentType 要于此处保持一致  
  14.                 success:function(data) {//这里的data是由请求页面返回的数据  
  15.                     alert(data.result);  
  16.                 },  
  17.                 error: function(XMLHttpRequest, textStatus, errorThrown) {  
  18.                     alert("XMLHttpRequest");  
  19.                     }  
  20.             });  
  21.   
  22. }  
    <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,                     datatype: "json",//请求页面返回的数据类型                     type: "GET",                     contentType: "application/json",//注意请求页面的contentType 要于此处保持一致                     success:function(data) {//这里的data是由请求页面返回的数据                         alert(data.result);                     },                     error: function(XMLHttpRequest, textStatus, errorThrown) {                         alert("XMLHttpRequest");                         }                 });      }

Html：
Html代码 
  1. <body>  
  2.     用户名：<input id="id" type="text" name="id" />  
  3.     密码：<input id="pwd" type="password" name="pwd" />  
  4.       
  5.   
  6.     <input id="submit" type="button" name="sub" value="submit" onclick="alertMsg();" />  
  7. </body>  
<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
C#代码 
  1. <%@ WebHandler Language="C#" Class="HandleAjax" %>  
  2.   
  3. using System;  
  4. using System.Web;  
  5.   
  6. public class HandleAjax : IHttpHandler {  
  7.       
  8.     public void ProcessRequest (HttpContext context) {  
  9.         context.Response.ContentType = "application/json";  
  10.         if (context.Request["user"] == "jiayou")  
  11.         {  
  12.             string hello="OK";  
  13.             context.Response.Write("{\"result\":\""+hello+"\"}");//注意格式”key”:”value” 这里的格式我写错了好几次才改正确的  
  14.         }  
  15.         else { context.Response.Write("{\"result\":\"Hello pig\""); }  
  16.     }  
  17.    
  18.     public bool IsReusable {  
  19.         get {  
  20.             return false;  
  21.         }  
  22.     }  
  23. }
posted @ 2011-07-07 14:46  无恨星晨  阅读(449)  评论(0)  编辑  收藏  举报