Ajax实现的异步传输与验证示例代码

Ajax异步传输用得很广,就拿web开发来说吧,当用户注册时,当用户刚一输完,怎么立即判断用户是否存在,并在输入框后显示提示?这就用到了异步传输~~

它可以让你不离开页面的情况下,获取后台你想要的数据,并显示在当前页面!!好的,下面看个例子

下面是一段Ajax验证代码

复制代码 代码如下:

<script type="text/javascript">

//① 设置变量

var xmlHttp ;

var flag = false ;

var package_name;

//② 创建XMLHttp对象

function createXMLHttp(){

if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest() ;

} else {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;

}

}

//③

function getPackage_name(package_name){

//创建XMLHttpRequest对象

createXMLHttp() ;

document.getElementById("msg").innerHTML=package_name;

//创建一个HTTP请求,以post方式将package_name交给AppInfoServlet

xmlHttp.open("post","AppInfoOneServlet?package_name="+package_name) ;

//调用回调函数 生成可视化的页面响应

xmlHttp.onreadystatechange =checkCallback;

// 发送请求

xmlHttp.send(null) ;

//友好提示

document.getElementById("msg").innerHTML = "正在获取信息,请耐心等候..." ;

}

//④ 回调函数

function checkCallback(){

if(xmlHttp.readyState == 4){

if(xmlHttp.status == 200){

var text = xmlHttp.responseText ;

var t=text.split('|');//当获取的是多个值,并用"|"作为分割时

document.getElementById("msg").innerHTML =t[0]+ "<br>"+"<div id='container'>"+"<div id='content'>"+"<div id='slider'>"+"<ul>"+"<li>"+"<img src='"+t[1]+"' alt='Css Template Preview' />"+"</li>"+"<li>"+"<img src='"+t[2]+"' alt='Css Template Preview' />"+"</li>"+"</ul>"+"</div>"+"<h3>Android应用截图展示</h3>"+"</div>"+"</div>"+"<center><a href='"+t[3]+"' target='_blank'><img src='./images/downloadsoruce.png'></a></center>" ;

//获取的数据在id为“msg” 的标记中显示出来,例如:<span id="msg"></span>

}

}

}

</script>

在jsp页面中是这样调用js函数的

复制代码 代码如下:

<a href="#bottom" onclick="getPackage_name('<%=ainfo.getPackage_name() %>')">获取</a>

Ajax获取的数据将在下列标记中显示出来

复制代码 代码如下:

<span id="msg"></span>

好的,我们来看一下servlet中的代码:

复制代码 代码如下:

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");//必须在out前,否则传输的汉子为乱码啊

PrintWriter out = response.getWriter();

String package_name=request.getParameter("package_name");

AppDaoImpl adi=new AppDaoImpl();

AppInfo ainfo=new AppInfo();

ainfo=adi.getOneAppInfo(package_name);

out.print(ainfo.getDescription()+"|"+ainfo.getScreen_1_path()+"|"+ainfo.getScreen_2_path()+"|"+ainfo.getDownload_path());

}

以上已经很清楚啦,当然验证用户是否存在,道理和这个是一模一样的,其中一定要注意汉字传输中乱码的问题~~~~~~

时间: 2024-09-28 21:38:41

Ajax实现的异步传输与验证示例代码的相关文章

Ajax实现的异步传输与验证示例代码_AJAX相关

Ajax异步传输用得很广,就拿web开发来说吧,当用户注册时,当用户刚一输完,怎么立即判断用户是否存在,并在输入框后显示提示?这就用到了异步传输~~ 它可以让你不离开页面的情况下,获取后台你想要的数据,并显示在当前页面!!好的,下面看个例子 下面是一段Ajax验证代码 复制代码 代码如下: <script type="text/javascript"> //① 设置变量 var xmlHttp ; var flag = false ; var package_name; /

ajax jquery 异步表单验证示例代码_AJAX相关

文件目录:  html代码: 复制代码 代码如下: <html> <head> <title>异步表单验证</title> <script type='text/javascript' src='jquery.js' ></script> <script> function checkname(){ //$("input[name='name']").val() $.ajax({ type:"

ajax jquery 异步表单验证示例代码

文件目录:   html代码: 复制代码 代码如下: <html> <head> <title>异步表单验证</title> <script type='text/javascript' src='jquery.js' ></script> <script> function checkname(){ //$("input[name='name']").val() $.ajax({ type:"

Ajax邮箱、用户名唯一性验证实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> $(function () { $("#txtEmail").blur(function () { $.ajax({ type: "post", url: "reg.ashx?email=" + $.trim($("#txtEmail").val()) + "&

Asp.net 2.0 实现自定义Email格式有效性验证(示例代码下载)

asp.net|示例|下载 (一). 概述及功能          用了两种方法实现验证Email格式,Asp.net验证控件和手动编写代码验证.并用到简单工厂和适配品设计模式, 代码重构技术.    实现自定义Email邮件地址有效性验证, 完成如下功能:Question 11. Email 格式为 user@server.domain. 例如: King.Cheng@hotmail.com or King.Cheng@hotmail.com.cn or King.Cheng@hotmail.

ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码_php实例

在ThinkPHP3.1版本之前,如果需要设置自动验证或者自动完成,必须定义在模型中,或者通过setProperty方法动态设置属性来完成,但是这样做的缺点是不太方便动态改变和调整 . ThinkPHP3.1版本在模型类中增加auto和validate两个连贯操作,用于动态设置自动完成和自动验证规则,现在可以在Action中使用,示例代码如下: $validate = array( array(verify,require,验证码必须!), array(name,,帐号名称已经存在!,0,uni

用ajax实现读博客rss示例代码_AJAX相关

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>this is test</title

用ajax实现读博客rss示例代码

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>this is test</title

ajax提交加载进度条示例代码_AJAX相关

实现效果图  加载图片  实现方式: 在jsp页面中加入 样式 复制代码 代码如下: .progress{z-index: 2000} .mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F} 节点 复制代码 代码如下: <img id="progressImgage" class="progress" style=&qu