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)想要做一个网站,首先得去买一个域名,老师的域名是在美橙上买的 ...
随机推荐
- Node.js 调用 restful webservice
如何构建一个restful web service参考原来的文章 http://www.cnblogs.com/ericnie/p/5212748.html 直接用原来的项目编译好像有问题,此处耗费1 ...
- 在Oracle Enterprise Linux R5U7上安装Oracle 11gr2数据库
折腾了好几次,经验是: 包的安装 在安装包里,需要把开发方面的安装包都装上. 另外安装完成后,需要安装的包包括: cd /media/cdrom/Server rpm -Uvh binutils-2. ...
- 【OpenStack 虚拟机初始化user-data & Cloud-init】
示例: import httplib import json import base64 tenant_id='xxx' token='xxx' compute_host="xxx" ...
- jstack来分析。当linux出现cpu被java程序消耗过高时
我们使用jdk自带的jstack来分析.当linux出现cpu被java程序消耗过高时,以下过程说不定可以帮上你的忙: 1.top查找出哪个进程消耗的cpu高 21125 co_ad2 18 ...
- Hadoop+Spark+Hbase部署整合篇
之前的几篇博客中记录的Hadoop.Spark和Hbase部署过程虽然看起来是没多大问题,但是之后在上面跑任务的时候出现了各种各样的配置问题.庆幸有将问题记录下来,可以整理出这篇部署整合篇. 确保集群 ...
- 【招聘App】—— React/Nodejs/MongoDB全栈项目：消息列表
前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...
- Redis使用记录
登陆:cd /usr/local/bin 启动客户端:./redis-cli 查看所有key:keys * 查看key类型:type keyname 查看list长度:LLEN KEY_NAME 清空 ...
- Sql中存在斜杠“/”怎么办？
比如下面的语句 select concat(name,'/',description) from table1 这样的语句在数据库访问工具中执行没问题,到java中就报错. 解决办法也很简单,用单引号 ...
- python 页面信息抓取
1. 特点 在python 解析html这篇文章中已经做了初步的介绍,接下来再坐进一步的说明.python抓取页面信息有下面两个特点: 依赖于HTML的架构. 微小的变化可能会导致抓取失败,这取决于你 ...
- linux下confstr与uname函数_获取C库与内核信息
#include <stdio.h> #include <sys/utsname.h> //uname int main(int argc, char **argv[]) { ...