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)想要做一个网站,首先得去买一个域名,老师的域名是在美橙上买的 ...
随机推荐
- java中short、int、long、float、double取值范围
一.分析基本数据类型的特点,最大值和最小值.1.基本类型:int 二进制位数:32包装类:java.lang.Integer最小值:Integer.MIN_VALUE= -2147483648 (-2 ...
- Mybatis学习记录（二）----mybatis开发dao的方法
1 SqlSession使用范围 1.1 SqlSessionFactoryBuilder 通过SqlSessionFactoryBuilder创建会话工厂SqlSessionFactory 将Sq ...
- MPTCP 源码分析(七) 拥塞控制
简述 MPTCP的拥塞控制对TCP的拥塞控制的线性增加阶段进行了修改,而慢启动,快速重传. 快速恢复都没有改变.每条子路径拥有自己的cwnd,MPTCP的拥塞算法主要关心cwnd的改变. ...
- 在ubuntu10.04 下将360wifi当无线网卡使用
通过百度“360wifi linux“ 已经有很多解决方案.主要过程是从网上下载mt7601驱动包,编译出一个内核模块后,再通过modprobe 添加模块.下面描述的是基于我本机的特点所做的额外工作. ...
- [翻译]JUnit 5 用户手册
为了系统的学习下 JUnit 5, 因此开始翻译 JUnit 5 官方用户手册, 谢谢关注! 本手册翻译自 5.0.0-M4 版本. 若感兴趣, 可 star 或 fork 该仓库! GitHub: ...
- Android创建JSON格式数据
Android创建JSON格式数据 作为上一篇博客的补充,简单那解说了一下Android创建JSON格式数据的小Demo. 1. 创建JSON格式数据 对于Android创建JSON格式数据.因为An ...
- 阿里云dataworks数据工场用户使用子账号
如果您是第一次使用子账号登录数加平台和使用DataWorks,您需要获知以下内容: 该子账号所属主账号的企业别名. 该子账号的用户名和密码. 该子账号的AccessKey ID和AccessKey S ...
- mysql添加修改字段
ALTER TABLE `uc_organization` ADD COLUMN `agent_id` VARCHAR(50) NOT NULL DEFAULT 0 COMMENT 'sqlserve ...
- 本文演示如何配置ASP.NET Core项目以在Visual Studio（VS）2017中使用Telerik UI for ASP.NET Core。
学习时使用的是VS2017+Core2.1了,不再讨论VS2015和core1.1的东西. 配置ASP.NET Core Web应用程序以使用Telerik UI for ASP.NET Core: ...
- 解决WSDL.EXE不能解析外部Import的XSD的问题
今天碰到一个WSDL,比较奇怪,它是用Java生成的. <types> <xsd:schema> <xsd:import namespace="ht ...