一、简介

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 是一种用于创建快速动态网页的技术。

AJAX通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

二、基本结构

1、新建Linq(数据库信息封装绑定)

2、组键json对象(数据库数据加载到后台)

对象格式:"{"key":"value","key":"value"}"
数组格式:"[{"key":"value"},{},{}]"

例:

using System;
using System.Web;
using System.Text;
using System.Linq;
using System.Collections.Generic; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) {
StringBuilder str = new StringBuilder();
str.Append("["); //string s = context.Request["id"];
int count = ;
using (StudentDataContext con = new StudentDataContext())
{
List<Users> ulist = new List<Users>(); ulist = con.Users.ToList();
foreach (Users us in ulist)
{
count++;
if (count < ulist.Count)
{
str.Append("{\"ids\":\"" + us.Ids + "\",\"username\":\"" + us.Username + "\",\"password\":\"" + us.Password + "\",\"nickname\":\"" + us.Nikename + "\",\"sex\":\"" + us.Sex + "\",\"birthday\":\"" + us.Birthday + "\",\"nation\":\"" + us.Nation + "\",\"num\":\"" + us.Ids + "\"},"); }
else
{
str.Append("{\"ids\":\"" + us.Ids + "\",\"username\":\"" + us.Username + "\",\"password\":\"" + us.Password + "\",\"nickname\":\"" + us.Nikename + "\",\"sex\":\"" + us.Sex + "\",\"birthday\":\"" + us.Birthday + "\",\"nation\":\"" + us.Nation + "\",\"num\":\"" + us.Ids + "\"}");
}
} }
str.Append("]");
context.Response.Write(str);
context.Response.End();
} public bool IsReusable {
get {
return false;
}
} }

Josn

3、js页面数据展示(后台与前台的数据交互)

table id="tb1" style=" text-align: center; width: 100%;">
<thead>
<tr style="color: #ff6a00;">
<td>用户名</td>
<td>密码</td>
<td>昵称</td>
<td>性别</td>
<td>生日</td>
<td>年龄</td>
<td>民族</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="加载" id="btn1" />
复制代码
复制代码

页面布局

<script>
//点击加载按钮
$("#btn1").click(function () {
//编写ajax语句,将数据提交到某个服务端去
$.ajax({
url: "ajax/userajax.ashx",//将数据要提交到哪个服务端
data: {},//将什么数据提交到服务端去,{}内基本格式为"key":"要传的数据"
type: "post",//用什么样的方式将数据提交过去
dataType: "json",//返回一个什么样的数据类型
//请求完成
success: function (data) {
$("#tb1 tbody").empty();//清空tbody
for (i in data) {
var str = "<tr style=\"\">";
str += "<td>" + data[i].username + "</td>";
str += "<td>" + data[i].password + "</td>";
str += "<td>" + data[i].nickname + "</td>";
str += "<td>" + data[i].sex + "</td>";
str += "<td>" + data[i].birthday + "</td>";
str += "<td>" + data[i].age + "</td>";
str += "<td>" + data[i].nation + "</td>";
str += "</tr>";
$("#tb1 tbody").append(str);
}
},//success
//请求失败
error: function () {
alert('服务器连接失败!!!');
}
});//ajax
});//btn1.click
</script>

数据绑定

三、完整结构

1、错误处理:error:function(){}

2、加载前处理:beforeSend:function(){}

3、加载完处理:complete:function(){}

编写ajax语句,将数据提交到某个服务端去
$.ajax({
url: "ajax/Login.ashx",//将数据要提交到哪个服务端
data: { "un": $("#txt_uname").val().trim(), "pwd": $("#txt_pwd").val() },//将什么数据提交到服务端去,{}内基本格式为"key":"要传的数据"
type: "post",//用什么样的方式将数据提交过去
dataType: "json",//返回一个什么样的数据类型
success: function (data) {//请求完成
if (data.has == '') {
$("#btn1").attr("disabled", "disabled").val('跳转中...');
window.setTimeout(function () {
window.location.href = "HtmlPage2.html";
}, );
}
else {
$("#sp1").text("用户名密码输入错误!");
$("#btn1").removeAttr("disabled").val('登录');
}
},
error: function () {//服务器连接错误
$("#sp1").text("服务器连接失败!");
$("#btn1").removeAttr("disabled").val('登录');
},
beforeSend: function () {//已向服务器发送请求,请求完成前
$("#btn1").attr("disabled", "disabled").val('登录中...');
},
complete: function () {//请求完成后,可有可无
$("#btn1").removeAttr("disabled").val('登录');
} });
复制代码

完整

练习:

省市区三级联动

ajax入门基础的更多相关文章

  1. 掌握 Ajax,第 1 部分: Ajax 入门简介

    转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...

  2. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  3. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  4. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  5. ASP.NET AJAX入门系列

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  6. 系列文章--ASP.NET之AJAX入门教程

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  7. AJAX入门---点滴的积累

    AJAX入门---点滴的积累 每次学习完一个内容总会写上几句话总结一下学习的内容.这不刚看完王兴魁老师讲的AJAX核心技术.如今回想梳理一下. 这套视频的内容不多,简单的解说了XMLHttpReque ...

  8. mybatis入门基础(二)----原始dao的开发和mapper代理开发

    承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...

  9. 原生AJAX入门讲解(含实例)

    相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...

随机推荐

  1. BurpSuite工具抓取手机的流量

    1.设置BurpSuite监听策略(和电脑区别不大就简单写了) 打开BurpSuite进入Proxy-Options界面,修改端口为8082.地址为第二项所有接口,点击OK 2.设置手机代理 首先保证 ...

  2. Linux下安装gradle

    Linux下安装gradle 1. Gradle 是以 Groovy 语言为基础,面向Java应用为主.基于DSL(领域特定语言)语法的自动化构建工具 下面就描述一下如何在linux环境下安装配置gr ...

  3. selenium_Python3_邮箱登录:动态元素定位

    这里的关键是动态frame定位: 其他元素定位不用多说,常规操作. 不过需要注意加上这个: from selenium.webdriver.remote.webelement import WebEl ...

  4. macbook远程连接报错no matching cipher found

    在.ssh/目录下添加config文件 Host xxx.xxx.xxx.xxx Ciphers 3des-cbc KexAlgorithms +diffie-hellman-group1-sha1 ...

  5. Rogue 罗格

    发售年份 1980 平台 多平台 开发商 Michael Toy, Glenn Wichman, Ken Arnold 类型 策略/角色扮演 https://www.youtube.com/watch ...

  6. mac 中 git 操作账号的保存与删除

    mac 系统中,运行命令:git config -l,输出中看到credential.helper=osxkeychain时,说明 git 密码保存在 Keychain 中. 右上角搜索框内搜索 gi ...

  7. 纪念使用FTPClient工具所遇到的

    我所使用的是org.apache.commons.net.ftp.FTPClient.  查了资料还有其余几个FTPClient,其余的先不展开. 1.ftpClient.changeWorkingD ...

  8. tensorboard OSError:[Errno 22] Invalid argument

    哈哈 问题解决了.感谢大佬 Bill.Z 附上原文链接:https://blog.csdn.net/u013244846/article/details/88380860 解决方法:更改manager ...

  9. 解决spyder、Jupyter Notebook 打不开

    参考: https://blog.csdn.net/lanchunhui/article/details/72891918 https://stackoverflow.com/questions/49 ...

  10. Kettle解决方案: 第五章 ETL相关知识

    早期, ETL知识作为BI系统的一部分来介绍. 后来在The Data Warehouse ETL Tooket一书中, 系统性的整理了ETL的相关内容, 形成了一篇"ETL里的34个子系统 ...