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)想要做一个网站,首先得去买一个域名,老师的域名是在美橙上买的 ...
随机推荐
- RegexHelper
ylbtech-Unitity-cs: RegexHelper 验证帮助类 1.A,效果图返回顶部 1.B,源代码返回顶部 1.B.1,RegexMail #region RegexMail pu ...
- 一起來玩鳥 Starling Framework（6）Juggler、Tween、以及DelayCall
這篇開始來講Starling裡的Animation.Juggle是個簡單的Class,用來控制動畫的進行.他負責管理經由add()加進來的實現IAnimatable介面的物件,然後當Juggler的a ...
- 【AS3 Coder】任务四：噪音的魅力（下）
在之前的两篇文章中我们介绍了PerlinNoise的两种用途:创建云雾等自然效果以及用作随机数提供源.那么在这一章中,贫道将隆重介绍一位perlinNoise的好基友:DisplacementMapF ...
- linux后台启动命令-的原因
linux后台启动命令-的原因 学习了:https://blog.csdn.net/saife/article/details/78276014 学习了:https://www.ibm.com/dev ...
- css样式布局中position的那些事儿
哎,页面布局及设计开发.对于一个一直从事后台开发来说屌丝来说,确实是件非常费时.费力,非常艰难的一件事. 今晚是想实现把多张重叠在一起.或是标记一张图片中不同的位置然后赋以超链接.花了一晚上的时间,才 ...
- rational rose 2007安装破解全过程
1:下载安装文件 下载地址: http://pan.baidu.com/s/1c0ldKEs 2:下载虚拟光驱 由于下载的文件须要光驱安装,所以须要下载一个虚拟光驱,虚拟光驱名称:daemon too ...
- jquery treegrid实例
前台jqurey代码 function organDatagrid(){ $organ_treegrid = $('#organ_treegrid').treegrid({ url:ctx+'/pet ...
- Atitit.单向sso 单点登录的设计与实现
Atitit.单向sso 单点登录的设计与实现 1. 单点登录sso 的三大解决方案1 2. 新方案:密码管理器方案1 3. 调用方1 4. 自动登录登录2 5. 主页跳转2 1. 单点登录sso ...
- android学习十三（android的通知使用）
通知(Notification)是android系统中比較有特色的一个功能,当某个应用程序希望向用户发出一些提示信息.而该应用程序又不在前台执行时,就能够借助通知来实现.发出一条通知后,手机最上方的状 ...
- 关于linux系统下 无法解析主机的问题
linux无法解析主机 xxx: 解决方法: 1. sudo gedit /etc/hosts 找到如下行: 127.0.1.1 XXX 将其修改为: 127.0.1.1 (你 ...