zoukankan      html  css  js  c++  java
  • 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. }
  • 相关阅读:
    Oracle EBS-SQL (MRP-7):检查MRP计划运行报错原因之超大数据查询2.sql
    Oracle EBS-SQL (MRP-6):检查MRP计划运行报错原因之超大数据查询1.sql
    Oracle EBS-SQL (MRP-5):重起MRP Manager.sql
    Oracle EBS-SQL (INV-12):检查待定事物处理1.sql
    Oracle EBS-SQL (OM-6):打开订单.sql
    Oracle EBS-SQL (INV-11):检查子库存会计信息.sql
    Oracle EBS-SQL (OM-5):检查订单事务处理类型.sql
    Oracle EBS-SQL (OM-4):检查发运网络.sql
    Oracle EBS-SQL (PO-18):检查工作台下达的PR在系统找不到.sql
    Oracle EBS-SQL (PO-17):检查供货比例不为100%.sql
  • 原文地址:https://www.cnblogs.com/weixing/p/2100076.html
Copyright © 2011-2022 走看看