ASP.NET动态网站制作（26）-- Ajax
前言：这节课讲解关于Ajax的相关内容。
内容：
1.当点击页面中的一个按钮提交数据或请求数据的时候，整个页面的信息都会提交（不管信息是否是提交或者请求的数据，页面中所有的数据都提交），这样耗用的时间将会较只提交或请求所需要的部分页面信息多很多，使页面响应变慢。这种情况下，我们可以使用Ajax解决这一问题。
2.客户端控件（就是HTML页面中的<input type="button" value="登录" id="btnLogin"/>）没有办法直接和数据库交互，服务端控件（<asp:Button ID="btnLogin" runat="server" Text="登录" OnClick="btnLogin_Click" />）是可以直接和数据库交互的。客户端控件与数据库进行交互的话先通过js，再通过ajax与后台进行交互。一般情况下很少用服务端控件，服务端控件的效率非常低，因为它是将整个页面都提交的，一般都是用客户端空间+ajax的方法。
3.ajax就是后台处理程序，所以可以添加一个“一般处理程序”，后缀名是：.ashx。
4.ajax中传的值的格式：{"username":username,"pwd":pwd}。这种格式称为json格式，{"key":value}，key必须要有引号。
5.context是上下文对象（里面包含两个内容：Response,Request）。
6.代码：
HTML代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/Login.js"></script>
</head>
<body>
<table>
<tr><td>用户名：</td><td><input type="text" id="txtUserName"/></td></tr>
<tr><td>密码：</td><td><input type="password" id="txtPwd"/></td></tr>
<tr><td><input type="button" value="登录" id="btnLogin"/></td></tr>
</table>
</body>
</html>
JS代码：
$(function() {
$("#btnLogin").click(function() {
var username = $.trim($("#txtUserName").val());
var pwd = $.trim($("#txtPwd").val());
if (username==""||pwd=="") {
alert("用户名或者密码不能为空");
} else {
//三个参数：后台页面，传的值（其格式称为json格式），data是后台处理的结果
$.post("/ajax/Login.ashx", { "username": username, "pwd": pwd }, function(data) {
alert(data);
});
}
});
});
ajax代码：
using System.Data;
using System.Data.SqlClient;
using System.Web;
using sqlHelper; namespace ADO.NET1.ajax
{
/// <summary>
/// Login 的摘要说明
/// </summary>
public class Login : IHttpHandler
{
//简称PR方法，context是上下文对象（里面包含两个内容：Response,Request）
public void ProcessRequest(HttpContext context)
{
string username = context.Request.Form["username"].ToString();
string pwd = context.Request.Form["pwd"].ToString(); string strSql = "select UserId from UserInfor where UserName=@UserName and Pwd=@Pwd";
SqlParameter[] para = new SqlParameter[]
{new SqlParameter("@UserName", SqlDbType.NVarChar, ), new SqlParameter("@Pwd", SqlDbType.NVarChar, )};
para[].Value = username;
para[].Value = pwd;
if (SqlHelper.Exists(strSql, para)) //判断sql语句里面的结果是否存在
{
context.Response.Write("登陆成功");
}
else
{
context.Response.Write("用户名或者密码错误");
}
} public bool IsReusable
{
get
{
return false;
}
}
}
}
7.服务端一般返回的是一个json格式，可以获取多个内容。百度地图就是一个典型的ajax应用，局部刷新。
8.json转js数组：也可以使用json.parse()。
var data = eval('(' + data + ')');
9.搜索例子。
HTML代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/Login.js"></script>
<style type="text/css">
#txtSel {
width: 300px;
height: 20px;
} #dcon {
width: 300px;
border: solid 1px #ccc;
display: none;
} #dcon ul {
list-style-type: none;
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<input type="text" id="txtSel" />
<div id="dcon"></div>
</body>
</html>
js代码：
$(function(){
$("#txtSel").keyup(function () {
var title = $.trim($("#txtSel").val());
if (title == "") {
$("#dcon").hide();
}
else {
$.post("/ajax/LoginAjax.ashx?cmd=sel", { "title": title }, function (data) {
data = eval('(' + data + ')');
if (data.Success) {
$("#dcon").show();
$("#dcon").html(data.Infor);
}
else {
$("#dcon").show();
$("#dcon").html(data.Infor);
}
});
}
});
});
ajax代码：
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Text;
using System.Web.Script.Serialization;
namespace vip20151029.ajax
{
/// <summary>
/// LoginAjax 的摘要说明
/// </summary>
public class LoginAjax : IHttpHandler
{
HttpContext context;
Dictionary<string, object> dt = new Dictionary<string, object>();
JavaScriptSerializer jss = new JavaScriptSerializer();
string strReturn = "";
public void ProcessRequest(HttpContext context)
{
this.context = context;
string cmd = context.Request.QueryString["cmd"].ToString();
switch (cmd)
{
case "login":
strReturn = Login();
break;
case "sel":
strReturn = SelTitle();
break;
}
context.Response.Write(strReturn); }
public string SelTitle()
{
string title = context.Request.Form["title"].ToString();
string strSql = "select top 10 title from RNews where Title like '%'+@title+'%'";
SqlParameter[] para = new SqlParameter[] { new SqlParameter("@title", SqlDbType.NVarChar, ) };
para[].Value = title;
StringBuilder sb = new StringBuilder();
SqlDataReader read = SqlHelper.ExecuteReader(SqlHelper.connectionString, CommandType.Text, strSql, para);
if (read.HasRows)
{
sb.Append("<ul>");
while (read.Read())
{
sb.Append(string.Format("<li>{0}</li>", read["title"].ToString()));
}
sb.Append("</ul>");
dt.Add("Success", true);
dt.Add("Infor", sb.ToString());
}
else
{
dt.Add("Success", false);
dt.Add("Infor", "没有数据");
}
return jss.Serialize(dt);
}
public string Login()
{
string username = context.Request.Form["username"].ToString();
string pwd = context.Request.Form["pwd"].ToString();
string strSql = "select UserId from UserInfor where UserName=@UserName and Pwd=@Pwd";
SqlParameter[] para = new SqlParameter[] { new SqlParameter("@UserName", SqlDbType.NVarChar, ), new SqlParameter("@Pwd", SqlDbType.NVarChar, ) };
para[].Value = username;
para[].Value = pwd;
if (SqlHelper.Exists(strSql, para))//判断sql语句里面的结果是否存在
{
dt.Add("Success", true);
dt.Add("Infor", "登录成功");
}
else
{
dt.Add("Success", false);
dt.Add("Infor", "登录失败");
}
return jss.Serialize(dt);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
10.在js里获取cookie，需要使用插件：cookies.jquery.js。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/cookies.jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#setCookie").click(function () {
$.cookie("username", "admin1", { expires: 7, path: "/" });
});
$("#getCookie").click(function () {
alert($.cookie("username"));
});
$("#reCookie").click(function () {
$.cookie("username", null);
});
});
</script>
</head>
<body>
<input type="button" value="存储cookie" id="setCookie" />
<input type="button" value="获取cookie" id="getCookie" />
<input type="button" value="清空cookie" id="reCookie" />
</body>
</html>
后记：做网页的原则：1.建立base.css和base.js来存放公共信息（比如每个页面的上部和下部）。2.对于具体的每个页面，单独建立js或者css文件，不要共用，否则不好维护。
ASP.NET动态网站制作（26）-- Ajax的更多相关文章
- ASP.NET动态网站制作（3）--css（2）
前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...
- ASP.NET动态网站制作（20）-- C#（3）
前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...
- ASP.NET动态网站制作（18）-- jq作业讲解及知识补充
前言:这节课主要讲解js及jq作业,并在作业讲解完后补充关于jQuery的一些知识点. 内容: 1.作业讲解:计算器那一块考虑的各种情况还不算完善,只实现了基本的功能,还需多多练习使用jQuery. ...
- ASP.NET动态网站制作（1）--html
前言:正式上课的第一课,讲的是前端部分的最基础内容:html. 前端:html,css,js 数据库:sql server 动态部分:.net,c#... IIS(Internet Informati ...
- ASP.NET动态网站制作（0）
前言:一直想系统地学习一下网站建设的相关内容,看过相关的书籍,也跟着视频学过,但总觉得效率不高,学过的东西印象不深刻,或许还是自己动手实践的少.无意中免费听了一堂讲ASP.NET网站建设的课,觉得性价 ...
- ASP.NET动态网站制作（28）-- 三层框架（2）
前言:三层框架的第二节课,继续上次课的内容. 内容: 1.三层框架的使用目的:可以将视图层和业务逻辑层及实体层分开,可以提高代码的扩展性,安全性,可以实现程序的低耦合性. 2.GetModel方法及G ...
- ASP.NET动态网站制作（24）-- ADO.NET（3）
前言:ADO.NET的第三节课.今天主要讲SQL Helper. 内容: 1.DataReader和DataSet的区别: (1)DataReader是一行一行地读,且只能向前读:DataSet是一次 ...
- ASP.NET动态网站制作（22）-- ADO.NET（1）
前言:这节课开始真正地学习WEB开发,ADO.NET就是一组允许.NET开发人员使用标准的.机构化的,甚至无连接的方式与数据交互的技术.所属的类库为:System.Data.dll. 内容: 1.AD ...
- ASP.NET动态网站制作（17）-- C#（1）
前言:用C#也有一年多了,基本上都是边用边学的,现在可以跟着老师系统的学习一下,感觉应该挺好的. 内容: 1.网站部署的相关内容: (1)想要做一个网站,首先得去买一个域名,老师的域名是在美橙上买的 ...
随机推荐
- OpenGL.Vertex Array Object (VAO) [转]
http://www.cppblog.com/init/archive/2012/02/21/166098.html 一 OpenGL抛弃glEnable(),glColor(),glVertex() ...
- 小二助手（react应用框架）-概述
时间想学习一个前端框架,原因是这样的,我本身是做游戏的,但是自己对前端web比较感兴趣. 然后我就选择自己学哪个框架,Angular.react.vue 最后选择了react,选择的理由就不说了 那做 ...
- 理解JS里的偏函数与柯里化
联系到上篇博客讲的bind完整的语法为: let bound = func.bind(context, arg1, arg2, ...); 可以绑定上下文this和函数的初始参数.举例,我们有个乘法函 ...
- java源码阅读System
1类签名与注释 public final class System System类包含一些有用的类属性和方法.该类不能被实例化,所以其所有属性与方法都是static的. 2标准输入输出流 public ...
- B9:备忘录模式 Memento
在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可以将该对象恢复到原先保存的状态 UML: 示例代码: class Role { private $hp; pri ...
- Python学习笔记（七）函数的使用
python中的函数使用较简单,这里列出值得注意的几点: 内嵌函数 例如: # coding: utf-8 def foo(): def bar(): print 'bar() called. ...
- 输入N，打印如图所看到的的三角形（例：N=3,N=4,N=5）1<=N<=26
package demo; public class PrintDemo { public static void main(String[] args) { print(26); } private ...
- .Net——实现IConfigurationSectionHandler接口定义处理程序处理自己定义节点
除了使用.net里面提供的内置处理程序来处理我们的自己定义节点外,我们还能够通过多种方法,来自己定义处理类处理我们的自己定义节点,本文主要介绍通过实现IConfigurationSectionHand ...
- 原生js 操作类名
添加类名: document.getElementById('navBar').getElementsByClassName('mui-tab-item')[0].classList.add('mui ...
- cocos2d-x OpenGL ES 坐标系总结
很多教程都说cocos2d-x OpenGL ES世界坐标系原点在左下角,但至于为什么在左下角却从来没有人提过,这导致大部分人觉得这是OpenGL ES的规定,事实上这是错的.OpenGL ES的坐标 ...