ajax测试Demo以及json简单的转化
Ajax是局部刷新，并不影响页面其他的操作
实例1：本测试是演示利用Ajax在一个页面播放视频，点击赞和踩按钮，视频不会受影响,
新建一个ajaxTest.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 type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function zan()
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象，考虑兼容性
xmlhttp.open("POST", "AjaxTest.ashx?action=Zan", true);//准备向服务器发出post请求
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == ) //readyState==4表示服务器返回数据了额，之前可能经历 2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）
{
if (xmlhttp.status == ) //状态码200位成功
{
document.getElementById("ZanCount").innerHTML = xmlhttp.responseText;//responseText是服务器返回的报文正文
}
else {
alert("ajax服务器返回错误");
}
}
}
xmlhttp.send();//这时才发送请求，发送完请求，并一定马上服务器响应，然后看上面的onreadystatechange状态，发送完继续执行下面的操作，不等服务器
} function cai()
{
ajax("AjaxTest.ashx?action=Cai", function (reText) {
document.getElementById("CaiCount").innerHTML = reText;
})
}
</script>
</head>
<body>
<video src="video.mp4" controls="controls"></video>
<p><input type="button" name="Zan" value="赞" onclick="zan()"/><label id="ZanCount"></label></p>
<p><input type="button" name="Cai" value="踩"onclick="cai()"/><label id="CaiCount"></label></p>
</body>
</html>
然后新建一个后台处理程序AjaxTest.ashx
string action = context.Request["action"];
if (action == "Zan") //赞加1
{
SqlHelper.ExecuteNonQuery("Update T_ZanCai set ZanCount=ZanCount+1");
int zanCount = (int)SqlHelper.ExecuteScalar("select top 1 ZanCount from T_ZanCai");
context.Response.Write(zanCount);
}
else//踩加1
{
SqlHelper.ExecuteNonQuery("Update T_ZanCai set CaiCount=CaiCount+1");
int caiCount = (int)SqlHelper.ExecuteScalar("select top 1 CaiCount from T_ZanCai");
context.Response.Write(caiCount);
}
数据库test,新建表T_ZanCai
上面的ajax都有很多相似的部分，可以吧ajax封装起来
新建js文件夹，下新建ajax.js
function ajax(url, onsuccess)
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象，考虑兼容性 xmlhttp.open("POST", url, true);//准备向服务器发出post请求
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == ) //readyState==4表示服务器返回数据了额，之前可能经历 2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）
{
if (xmlhttp.status == ) //状态码200位成功
{
//responseText是服务器返回的报文正文
onsuccess(xmlhttp.responseText);
}
else {
alert("ajax服务器返回错误");
}
}
}
xmlhttp.send();//这时才发送请求，发送完请求，并一定马上服务器响应，然后看上面的onreadystatechange状态，发送完继续执行下面的操作，不等服务器
}
实例2：简单的用户注册页面，ajax检测用户名是否已被注册，没有注册功能，只是检测用户名是否合法
注册页面Register.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>用户注册用户名ajax检测是否已用</title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function checkUserName()
{
var userName = document.getElementById("UserName").value;
ajax("checkuserName.ashx?UserName=" + userName, function (resText) {
if (resText == "ok")
{
document.getElementById("UserNameMsg").innerHTML="用户名可用";
}
else if(resText == "error")
{
document.getElementById("UserNameMsg").innerHTML = "用户名不可用";
}
else if (resText == "forbidden")
{
document.getElementById("UserNameMsg").innerHTML = "用户名含有禁词，请换用其他用户名";
}
});
} </script>
</head>
<body>
<form action="Register.ashx">
用户名:<input type="text" id="UserName" name="UserName" onblur="checkUserName()"/><span id="UserNameMsg" style="color:red"></span><br>
密码:<input type="password"/>
</form> </body>
</html>
ajax 后台处理checkUserName.ashx
string userName=context.Request["UserName"];
if(userName.Contains("国家") || userName.Contains("管理员"))
{
context.Response.Write("forbidden");
}
int count = (int)SqlHelper.ExecuteScalar("select count(*) from tab_user where name=@UserName", new SqlParameter("@UserName", userName));
if (count <= )
{
context.Response.Write("ok");
}
else
{
context.Response.Write("error");
}
实例三：Json的使用：
C# 将.net对象转为json字符串，然后在前台页面js解析json为javascript对象使用
新建Person.cs类
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public string Email { get; set; }
}
jsonTest.ashx代码：
List<Person> list =new List<Person>();
list.Add(new Person { Name="hyb",Age=,Email="111@q.com"});
list.Add(new Person { Name = "aa", Age = , Email = "221@q.com" });
list.Add(new Person { Name = "bb", Age = , Email = "23331@q.com" });
//将对象序列号为json字符串的方法
JavaScriptSerializer jss=new JavaScriptSerializer();
string json=jss.Serialize(list);
//string json = jss.Serialize(new Person { Name="哈哈",Age=23,Email="12345@qq.com"}); context.Response.Write(json);
jsonTest.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 type="text/javascript" src="js/ajax.js"></script>
<script src="js/json2.js"></script>
<script type="text/javascript" >
function go()
{
ajax("jsonTest.ashx", function (resText) {
//把json字符串转为javascrip对象
var person = JSON.parse(resText);
for (var i = ; i < person.length; i++)
{
var p=person[i];
alert("姓名："+p.Name+"年龄："+p.Age+"邮箱："+p.Email);
}
});
} </script>
</head>
<body onload="go()">
</body>
</html>
注意：一般浏览器支持JSON.parse,不支持的引用json2,js就可以了
ajax测试Demo以及json简单的转化的更多相关文章
- struts1、ajax、jquery、json简单实例
1.页面ajax代码,使用$.ajax,获得json对象后each $.ajax({ type:"GET", url:ctx + "/uploadImg.do" ...
- ADO.NET .net core2.0添加json文件并转化成类注入控制器使用 简单了解 iTextSharp实现HTML to PDF ASP.NET MVC 中 Autofac依赖注入DI 控制反转IOC 了解一下 C# AutoMapper 了解一下
ADO.NET 一.ADO.NET概要 ADO.NET是.NET框架中的重要组件,主要用于完成C#应用程序访问数据库 二.ADO.NET的组成 ①System.Data → DataTable, ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- JSON 在Ajax数据交换中的简单运用
随着浏览器内核更新,原先的json.js在最新的谷歌浏览下不管用了,运行报错,特此修改下代码,不使用json.js,使用Object自带的json转换方法,修改时间,2016年10月26日. 首先需要 ...
- .net core2.0添加json文件并转化成类注入控制器使用 让js调试更简单—console
.net core2.0添加json文件并转化成类注入控制器使用 上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢 ...
- SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析
SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...
- 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回
作者:ssslinppp 时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...
- Ajax与服务器（JSON）通信介绍
本文主要介绍使用Ajax与服务器(JSON)通信方法,谈谈Ajax提供的两类服务器通信手段:同步通信和异步通信.有需要的可以了解一下.毕竟这个时代出了很多东西,自动化构建工具,mvvm框架等等.Jav ...
- 原生ajax、XMLHttpRequest和FetchAPI简单描述
什么是ajax ajax的出现,刚好解决了传统方法的缺陷.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...
随机推荐
- js循环添加事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 静态局部变量、静态全局变量、extern全局变量、自动变量 札记
静态局部变量 静态局部变量. 从称呼上我们可以看出,静态局部变量首先是一个局部变量,因此其只在定义它的函数内有效,冠以静态的头衔后,其生存期就被延长了,不会随着函数的返回而被撤销.我们可以这样来理解: ...
- hdu4289 最小割最大流 (拆点最大流)
最小割最大流定理:(参考刘汝佳p369)增广路算法结束时,令已标号结点(a[u]>0的结点)集合为S,其他结点集合为T=V-S,则(S,T)是图的s-t最小割. Problem Descript ...
- Swift3.0语言教程获取字符
Swift3.0语言教程获取字符 Swift3.0语言教程获取字符,在字符串中获取某一下标位置(下标索引)处的字符是很常见的功能,在NSString中使用character(at:)方法实现,其语法形 ...
- Delphi中Messagedlg用法
if MessageDlg('Welcome to my Delphi application. Exit now?', mtConfirmation, [mbYes, mbNo], 0) = mrY ...
- 块级元素和内联元素的区别（HTML）
请把下面二行代码放进body标签里: <div style=”border: 1px solid red;”>div1</div> <div style= ...
- html中frameset的详细使用方法
http://blog.csdn.net/csb5201314/article/details/5695417
- NoSQL-Redis【1】-控制台配置密码
1.设置密码为123456 CONFIG SET requirepass 123456 2.验证密码 AUTH 123456 3.redis-cli连接 @ECHO OFF redis-cli.exe ...
- iOS之01-基本语法
视频iOS是本人通过视频学习,初期并不是直接使用Xcode,而是在命令行下创建文件.打开文件.编译文件和运行文件. #import <Foundation/Foundation.h> in ...
- 如何在2016年成为一个更好的Node.js开发者
本文主要讨论一些进行Node.js开发的最佳实践和建议,这些建议不仅仅适合开发者,还适合那些管理与维护Node.js基础架构的工作人员.遵循本文提供的这些建议,能够让你更好的进行日常的开发工作. St ...