了解ajax, json,ashx,例子是一个当你用户名输入用户名,请求页面进行比对处理 例子很简单但是让初学者可以更好的理解query中的ajax
Javascript:
Html:
请求页面 ashx
- <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");
- }
- });
- }
<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:
- <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>
<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";
- if (context.Request["user"] == "jiayou")
- {
- string hello="OK";
- context.Response.Write("{\"result\":\""+hello+"\"}");//注意格式”key”:”value” 这里的格式我写错了好几次才改正确的
- }
- else { context.Response.Write("{\"result\":\"Hello pig\""); }
- }
- public bool IsReusable {
- get {
- return false;
- }
- }
- }