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)想要做一个网站,首先得去买一个域名,老师的域名是在美橙上买的 ...
随机推荐
- python socket timeout设置
需要在调用socket的connect方法之前设置settimeout(time)方法,另外在设置之后要将再次调用settimeout(None)来设置socket进入阻塞模式. 如下代码示例: so ...
- 爬虫扒下 bilibili 视频信息
B站算是对爬虫非常非常友好的网站啦! 修改转载已取得腾讯云授权 在以上两篇文章中我们已经在腾讯云服务器上搭建好了 Python 爬虫环境了,下一步就是在云服务器上爬上我们的爬虫,抓取我们想要的数据: ...
- 注册表 API 以及开机自启动
注册表是window系统中非常重要的一部分,今天在网上查了一些文章学习了下,觉得其中有一句话总结的很经典:注册表是用来存储信息的. 这句话虽然有点废,但是说的没错.当然,注册表中包含的内容非常多,远没 ...
- 对帝国cms、dedecms、phpcms等负载测试总结
来自:http://www.chinaz.com/web/2013/0729/311360.shtml 担心被骂,本不想写这篇文章.犹豫良久,最终还是决定写.希望能够帮助到一些朋友,认识到数据库索引正 ...
- 进程资源和进程状态 TASK_RUNNING TASK_INTERRUPTIBLE TASK_UNINTERRUPTIBLE
摘要:本文主要介绍进程资源和进程状态.进程资源由两部分组成:内核空间进程资源以及用户空间进程资源.进程状态,就绪/执行状态.等待状态(能够被中断打断).等待状态(不能够被中断打断).停止状态和僵死状态 ...
- POJO百度百科
POJO(Plain Ordinary Java Object)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称. 使用POJO名称是为了避免和EJB混淆起来, ...
- 绘制 SVG
工具网址:http://svg123.com/ 画布 点击画布,在页面的右侧我们可以调整画布属性 点击属性,滚动滑轮可以微调 或者直接双击修改属性值 工具栏 左侧工具栏 就像画图的工具栏一样 形状库 ...
- 开启GodMode
上帝模式的开启方法:首先你可以在任何地方创建一个新文件夹,这个操作对于几乎所有电脑用户来说都非常简单,然后重要的是,将这个新文件夹重命名为 “GodMode.{ED7BA470-8E54-465E-8 ...
- Android ListView工作原理全然解析，带你从源代码的角度彻底理解
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/44996879 在Android全部经常使用的原生控件其中.使用方法最复杂的应该就是 ...
- NodeJS淘宝 CNPM 镜像
原文地址:http://npm.taobao.org/ 设置NPM镜像(前提已安装NodeJS): npm config set registry https://registry.npm.taoba ...