ASP.NET动态网站制作，26-- Ajax

2023-06-21 21:17•服务端开发•阅读 4441

前言：这节课讲解关于Ajax的相关内容。

内容：

　　1.当点击页面中的一个按钮提交数据或请求数据的时候，整个页面的信息都会提交（不管信息是否是提交或者请求的数据，页面中所有的数据都提交），这样耗用的时间将会较只提交或请求所需要的部分页面信息多很多，使页面响应变慢。这种情况下，我们可以使用Ajax解决这一问题。

　　2.客户端控件（就是HTML页面中的<input type="button" value="登录" />）是可以直接和数据库交互的。客户端控件与数据库进行交互的话先通过js，再通过ajax与后台进行交互。一般情况下很少用服务端控件，服务端控件的效率非常低，因为它是将整个页面都提交的，一般都是用客户端空间+ajax的方法。

　　3.ajax就是后台处理程序，所以可以添加一个“一般处理程序”，后缀名是：.ashx。

　　4.ajax中传的值的格式：{"username":username,"pwd":pwd}。这种格式称为json格式，{"key":value}，key必须要有引号。

　　5.context是上下文对象（里面包含两个内容：Response,Request）。

　　6.代码：

　　HTML代码：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script src="js/jquery-1.10.2.min.js"></script>
 7     <script src="js/Login.js"></script>
 8 </head>
 9 <body>
10 <table>
11     <tr><td>用户名：</td><td><input type="text" /></td></tr>
12     <tr><td>密码：</td><td><input type="password" /></td></tr>
13     <tr><td><input type="button" value="登录" /></td></tr>
14 </table>
15 </body>
16 </html>

　　JS代码：

 1 $(function() {
 2     $("#btnLogin").click(function() {
 3         var username = $.trim($("#txtUserName").val());
 4         var pwd = $.trim($("#txtPwd").val());
 5         if (username==""||pwd=="") {
 6             alert("用户名或者密码不能为空");
 7         } else {
 8             //三个参数：后台页面，传的值（其格式称为json格式），data是后台处理的结果
 9             $.post("/ajax/Login.ashx", { "username": username, "pwd": pwd }, function(data) {
10                 alert(data);
11             });
12         }
13     });
14 });

　　ajax代码：

 1 using System.Data;
 2 using System.Data.SqlClient;
 3 using System.Web;
 4 using sqlHelper;
 5 
 6 namespace ADO.NET1.ajax
 7 {
 8     /// <summary>
 9     /// Login 的摘要说明
10     /// </summary>
11     public class Login : IHttpHandler
12     {
13         //简称PR方法，context是上下文对象（里面包含两个内容：Response,Request）
14         public void ProcessRequest(HttpContext context)
15         {
16             string username = context.Request.Form["username"].ToString();
17             string pwd = context.Request.Form["pwd"].ToString();
18 
19             string strSql = "select UserId from UserInfor where UserName=@UserName and Pwd=@Pwd";
20             SqlParameter[] para = new SqlParameter[]
21             {new SqlParameter("@UserName", SqlDbType.NVarChar, 50), new SqlParameter("@Pwd", SqlDbType.NVarChar, 50)};
22             para[0].Value = username;
23             para[1].Value = pwd;
24             if (SqlHelper.Exists(strSql, para)) //判断sql语句里面的结果是否存在
25             {
26                 context.Response.Write("登陆成功");
27             }
28             else
29             {
30                 context.Response.Write("用户名或者密码错误");
31             }
32         }
33 
34         public bool IsReusable
35         {
36             get
37             {
38                 return false;
39             }
40         }
41     }
42 }

　　7.服务端一般返回的是一个json格式，可以获取多个内容。百度地图就是一个典型的ajax应用，局部刷新。

　　8.json转js数组：也可以使用json.parse()。

1 var data = eval('(' + data + ')');

　　9.搜索例子。

　　HTML代码：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <script src="js/jquery-1.10.2.min.js"></script>
 7     <script src="js/Login.js"></script>
 8     <style type="text/css">
 9         #txtSel {
10             width: 300px;
11             height: 20px;
12         }
13 
14         #dcon {
15             width: 300px;
16             border: solid 1px #ccc;
17             display: none;
18         }
19 
20             #dcon ul {
21                 list-style-type: none;
22                 padding: 0px;
23                 margin: 0px;
24                 font-family: "微软雅黑";
25             }
26     </style>
27 </head>
28 <body>
29     <input type="text"  />
30     <div ></div>
31 </body>
32 </html>

　　js代码：

 1 $(function(){
 2     $("#txtSel").keyup(function () {
 3         var title = $.trim($("#txtSel").val());
 4         if (title == "") {
 5             $("#dcon").hide();
 6         }
 7         else {
 8             $.post("/ajax/LoginAjax.ashx?cmd=sel", { "title": title }, function (data) {
 9                 data = eval('(' + data + ')');
10                 if (data.Success) {
11                     $("#dcon").show();
12                     $("#dcon").html(data.Infor);
13                 }
14                 else {
15                     $("#dcon").show();
16                     $("#dcon").html(data.Infor);
17                 }
18             });
19         }
20     });
21 });

　　ajax代码：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Data;
 4 using System.Data.SqlClient;
 5 using System.Web;
 6 using System.Text;
 7 using System.Web.Script.Serialization;
 8 namespace vip20151029.ajax
 9 {
10     /// <summary>
11     /// LoginAjax 的摘要说明
12     /// </summary>
13     public class LoginAjax : IHttpHandler
14     {
15         HttpContext context;
16         Dictionary<string, object> dt = new Dictionary<string, object>();
17         JavaScriptSerializer jss = new JavaScriptSerializer();
18         string strReturn = "";
19         public void ProcessRequest(HttpContext context)
20         {
21             this.context = context;
22             string cmd = context.Request.QueryString["cmd"].ToString();
23             switch (cmd)
24             {
25                 case "login":
26                     strReturn = Login();
27                     break;
28                 case "sel":
29                     strReturn = SelTitle();
30                     break;
31             }
32             context.Response.Write(strReturn);
33 
34         }
35         public string SelTitle()
36         {
37             string title = context.Request.Form["title"].ToString();
38             string strSql = "select top 10 title from RNews where Title like '%'+@title+'%'";
39             SqlParameter[] para = new SqlParameter[] { new SqlParameter("@title", SqlDbType.NVarChar, 50) };
40             para[0].Value = title;
41             StringBuilder sb = new StringBuilder();
42             SqlDataReader read = SqlHelper.ExecuteReader(SqlHelper.connectionString, CommandType.Text, strSql, para);
43             if (read.HasRows)
44             {
45                 sb.Append("<ul>");
46                 while (read.Read())
47                 {
48                     sb.Append(string.Format("<li>{0}</li>", read["title"].ToString()));
49                 }
50                 sb.Append("</ul>");
51                 dt.Add("Success", true);
52                 dt.Add("Infor", sb.ToString());
53             }
54             else
55             {
56                 dt.Add("Success", false);
57                 dt.Add("Infor", "没有数据");
58             }
59             return jss.Serialize(dt);
60         }
61         public string Login()
62         {
63             string username = context.Request.Form["username"].ToString();
64             string pwd = context.Request.Form["pwd"].ToString();
65             string strSql = "select UserId from UserInfor where UserName=@UserName and Pwd=@Pwd";
66             SqlParameter[] para = new SqlParameter[] { new SqlParameter("@UserName", SqlDbType.NVarChar, 50), new SqlParameter("@Pwd", SqlDbType.NVarChar, 50) };
67             para[0].Value = username;
68             para[1].Value = pwd;
69             if (SqlHelper.Exists(strSql, para))//判断sql语句里面的结果是否存在
70             {
71                 dt.Add("Success", true);
72                 dt.Add("Infor", "登录成功");
73             }
74             else
75             {
76                 dt.Add("Success", false);
77                 dt.Add("Infor", "登录失败");
78             }
79             return jss.Serialize(dt);
80         }
81         public bool IsReusable
82         {
83             get
84             {
85                 return false;
86             }
87         }
88     }
89 }

　　10.在js里获取cookie，需要使用插件：cookies.jquery.js。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <script src="js/jquery-1.10.2.min.js"></script>
 7     <script src="js/cookies.jquery.js"></script>
 8     <script type="text/javascript">
 9         $(function () {
10             $("#setCookie").click(function () {
11                 $.cookie("username", "admin1", { expires: 7, path: "/" });
12             });
13             $("#getCookie").click(function () {
14                 alert($.cookie("username"));
15             });
16             $("#reCookie").click(function () {
17                 $.cookie("username", null);
18             });
19         });
20     </script>
21 </head>
22 <body>
23     <input type="button" value="存储cookie"  />
24     <input type="button" value="获取cookie"  />
25     <input type="button" value="清空cookie"  />
26 </body>
27 </html>

后记：做网页的原则：1.建立base.css和base.js来存放公共信息（比如每个页面的上部和下部）。2.对于具体的每个页面，单独建立js或者css文件，不要共用，否则不好维护。

上一篇 »借助得力工具快速制作CSS导航菜单，附工具下载地址
下一篇 »如何使用html+css+javascript制作表白网站？

ASP.NET动态网站制作，26-- Ajax

相关推荐

dreamweaver中怎么使用DIV+CSS制作网站页面？

如何用DIV+CSS制作横向菜单？

DIV+CSS排版中制作细线条的三种方法--FOR IE

ASP.NET动态网站制作，3--css

ASP.NET动态网站制作，2--css

Web前端技术：Bootstrap插件基础---Bootstrap环境安装，使用Bootstrap 的基本HTML 模板，制作导航栏，下拉菜单，制作轮播图，栅格布局，制作标签页，制作模态框，页面底部

凌峰制作：2017年最值得分享的IIS部署网站详细步骤

C# .Net实现URL绝对路径和相对路径之间互相转换