Ajax---后台校验用户输入的数据
2017-08-17 14:36
375 查看
Ajax----校验用户输入的数据
index.jsp
<head>
<title>Ajax技术演示</title>
<script type="text/javascript">
//把name提交到后台校验；看是否可用
function chacke1(obj){
var name=obj.value;
//创建一个Ajax
var xhr=null;//XMLHttpRequest
if(window.XMLHttpRequest){//看浏览器是否认识该对象--
xhr=new XMLHttpRequest();//-高版本的浏览器ActiveObjectIE7之后，火狐，google等支持
}else{
xhr=new ActiveObject("Microsoft.XMLHttp");//IE6及以下，其它大部分旧版本的浏览器
}
//2设置通讯和地址**************与POST方式有区别********************8
var url="<c:url value='TestServlet?name="+name+"'/>";//校验参数的servlet
//POST方式有区别var url="<c:url value='TestServlet'/>";不放参数
xhr.open("GET",url,true);//true为异步：你做你的；我做我的；同时可以运行
//xhr.open("GET",url,false);//false为同步
//POS方式有区别：xhr.open("Post",url,true);
//3设置访问成功后的js对象（调用回显函数--原来在子页面调用父页面的函数；来操作告诉用户其填写的name是否合法）
xhr.onreadystatechange=function (){
if(xhr.readyState==4){//Ajax是完成状态
if(xhr.status==200){//正常应答才执行
var text=xhr.responseText();//拿到后台的返回信息
alert("后台返回信息"+text);
//***********如果想在这里操纵页面----用这种架构;调用函数
succ(text);
}
}
}
//4发送（动作触发）********与POST方式有区别***********
xhr.send(null);//是GET方式提交参数为null
//POST方式有区别xhr.send("name="+name);
alert("结束了");//如果是true为异步；这句会立马执行；如果是false为同步；要等ajax执行完成才会执行这句
}
function succ(obj){
div1.innerHTML=obj;
}
</script>
</head>
<body>
<form action="">
<h3>GET方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack1(this);"/><br/>
<div id="div1"></div><br/><br/>
<h3>POST方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack2(this);"/><br/>
<div id="div2"></div><br/><br/>
Pwd<input type="password">
</form>
</body>
<-------------------把Ajax做成工具---------------->
ajax.js
function Ajax(obj){//传进一个要用Ajax的对象
this.get=function(url,succ,failure){//URL：obj调用的是后台的那个servlet路径
//succ和failure 是设置访问成功后的js对象(回调函数)
//创建一个Ajax
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveObject("Microsoft.XMLHttp");
}
//2设置通讯和地址
xhr.open("GET",url,true);
//3设置访问成功后的js对象
xhr.onreadystatechange=function (){
if(xhr.readyState==4){//Ajax是完成状态
if(xhr.status==200){//正常应答才执行
var text=xhr.responseText();//拿到后台的返回信息
alert("后台返回信息"+text);
succ(text);
}else{
failure(xhr.status);
}
}
}
//4发送（动作触发）
xhr.send(null);//是GET方式提交参数为null
}
this.post=function(url,data,succ,failure){//URL：
//succ和failure 是设置访问成功后的js对象(回调函数);data是要传的参数
//创建一个Ajax
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveObject("Microsoft.XMLHttp")；
}
//2设置通讯和地址
xhr.open("POST",url,true);
//3设置访问成功后的js对象
xhr.onreadystatechange=function (){
if(xhr.readyState==4){//Ajax是完成状态
if(xhr.status==200){//正常应答才执行
var text=xhr.responseText();//拿到后台的返回信息
alert("后台返回信息"+text);
succ(text);
}else{
failure(xhr,status);
}
} }
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4发送（动作触发）
xhr.send(data);
}
}
应用ajax.js用界面---index2.jsp
<head>
<script type="text/javascript" src="<c:url value='/js/ajax.js'/>"></script>
<script type="text/javascript">
//把name提交到后台校验；看是否可用
function chacke1(obj){
var name=obj.value;
var url="<c:url value='/TestServlet'?name="+name+"/>";
var ajax=new Ajax();
ajax.get(url, succ1, failure);
}
function succ1(obj){
div1.innerHTML=obj;
9e39
}
function chacke2(obj){
var data="name"+obj.value;
var url="<c:url value='TestServlet'/>";
var ajax=new Ajax();
ajax.post(url,data,succ2, failure);
}
function succ2(obj){
div2.innerHTML=obj;
}
function failure(obj){
alert("服务器响应的错误信息代码:"+obj);
}
</script>
</head>
<body>
<form action="">
<h3>GET方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack1(this);"/><br/>
<div id="div1"></div><br/><br/>
<h3>POST方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack2(this);"/><br/>
<div id="div2"></div><br/><br/>
Pwd<input type="password">
</form>
</body>
index.jsp
<head>
<title>Ajax技术演示</title>
<script type="text/javascript">
//把name提交到后台校验；看是否可用
function chacke1(obj){
var name=obj.value;
//创建一个Ajax
var xhr=null;//XMLHttpRequest
if(window.XMLHttpRequest){//看浏览器是否认识该对象--
xhr=new XMLHttpRequest();//-高版本的浏览器ActiveObjectIE7之后，火狐，google等支持
}else{
xhr=new ActiveObject("Microsoft.XMLHttp");//IE6及以下，其它大部分旧版本的浏览器
}
//2设置通讯和地址**************与POST方式有区别********************8
var url="<c:url value='TestServlet?name="+name+"'/>";//校验参数的servlet
//POST方式有区别var url="<c:url value='TestServlet'/>";不放参数
xhr.open("GET",url,true);//true为异步：你做你的；我做我的；同时可以运行
//xhr.open("GET",url,false);//false为同步
//POS方式有区别：xhr.open("Post",url,true);
//3设置访问成功后的js对象（调用回显函数--原来在子页面调用父页面的函数；来操作告诉用户其填写的name是否合法）
xhr.onreadystatechange=function (){
if(xhr.readyState==4){//Ajax是完成状态
if(xhr.status==200){//正常应答才执行
var text=xhr.responseText();//拿到后台的返回信息
alert("后台返回信息"+text);
//***********如果想在这里操纵页面----用这种架构;调用函数
succ(text);
}
}
}
//4发送（动作触发）********与POST方式有区别***********
xhr.send(null);//是GET方式提交参数为null
//POST方式有区别xhr.send("name="+name);
alert("结束了");//如果是true为异步；这句会立马执行；如果是false为同步；要等ajax执行完成才会执行这句
}
function succ(obj){
div1.innerHTML=obj;
}
</script>
</head>
<body>
<form action="">
<h3>GET方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack1(this);"/><br/>
<div id="div1"></div><br/><br/>
<h3>POST方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack2(this);"/><br/>
<div id="div2"></div><br/><br/>
Pwd<input type="password">
</form>
</body>
<-------------------把Ajax做成工具---------------->
ajax.js
function Ajax(obj){//传进一个要用Ajax的对象
this.get=function(url,succ,failure){//URL：obj调用的是后台的那个servlet路径
//succ和failure 是设置访问成功后的js对象(回调函数)
//创建一个Ajax
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveObject("Microsoft.XMLHttp");
}
//2设置通讯和地址
xhr.open("GET",url,true);
//3设置访问成功后的js对象
xhr.onreadystatechange=function (){
if(xhr.readyState==4){//Ajax是完成状态
if(xhr.status==200){//正常应答才执行
var text=xhr.responseText();//拿到后台的返回信息
alert("后台返回信息"+text);
succ(text);
}else{
failure(xhr.status);
}
}
}
//4发送（动作触发）
xhr.send(null);//是GET方式提交参数为null
}
this.post=function(url,data,succ,failure){//URL：
//succ和failure 是设置访问成功后的js对象(回调函数);data是要传的参数
//创建一个Ajax
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveObject("Microsoft.XMLHttp")；
}
//2设置通讯和地址
xhr.open("POST",url,true);
//3设置访问成功后的js对象
xhr.onreadystatechange=function (){
if(xhr.readyState==4){//Ajax是完成状态
if(xhr.status==200){//正常应答才执行
var text=xhr.responseText();//拿到后台的返回信息
alert("后台返回信息"+text);
succ(text);
}else{
failure(xhr,status);
}
} }
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4发送（动作触发）
xhr.send(data);
}
}
应用ajax.js用界面---index2.jsp
<head>
<script type="text/javascript" src="<c:url value='/js/ajax.js'/>"></script>
<script type="text/javascript">
//把name提交到后台校验；看是否可用
function chacke1(obj){
var name=obj.value;
var url="<c:url value='/TestServlet'?name="+name+"/>";
var ajax=new Ajax();
ajax.get(url, succ1, failure);
}
function succ1(obj){
div1.innerHTML=obj;
9e39
}
function chacke2(obj){
var data="name"+obj.value;
var url="<c:url value='TestServlet'/>";
var ajax=new Ajax();
ajax.post(url,data,succ2, failure);
}
function succ2(obj){
div2.innerHTML=obj;
}
function failure(obj){
alert("服务器响应的错误信息代码:"+obj);
}
</script>
</head>
<body>
<form action="">
<h3>GET方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack1(this);"/><br/>
<div id="div1"></div><br/><br/>
<h3>POST方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack2(this);"/><br/>
<div id="div2"></div><br/><br/>
Pwd<input type="password">
</form>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 4.用户模块：后台数据校验
- 用户登陆验证---AJax在后台用json传递数据到前台显示
- PHP登录（ajax提交数据和后台校验）实例分享
- jquery.validate 验证（支持前台js验证通过，然后ajax后台数据校验）二
- C#实现对用户输入数据进行校验的类实例
- 害怕别人乱输数据吗?提高你的数据校验功能-AJAX输入校验(8)
- 登录（ajax提交数据和后台校验）
- Visual C# 2008+SQL Server 2005 数据库与网络开发--8.2.4 校验用户输入数据的合法性
- 害怕别人乱输数据吗?提高你的数据校验功能-AJAX输入校验(8)
- MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等
- 后台界面实时获取用户输入内容，springMVC+Ajax实现（源码）
- jquery.validate 验证（支持前台js验证通过，然后ajax后台数据校验）
- 数据校验功能-AJAX输入校验(9)
- Ajax后台数据校验简单Demo
- 用户注册:后台数据校验：使用xml进行校验（Struts2）
- 2017精华版：jquery 中 ajax，后台获取数据库json数据，显示在html页面 02
- ajax提交到后台数据成功但返回不走success而走的error
- ajax请求数据，后台提供数据返回json， 前台js拼html,回填
- Ajax中通过response在后台传递数据
- ajax提交数据到后台php接收