主页 > 知识库 > Ajax实现的异步传输与验证示例代码

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

热门标签:电子围栏 银行业务 阿里云 团购网站 服务器配置 科大讯飞语音识别系统 Mysql连接数设置 Linux服务器
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());
}

以上已经很清楚啦,当然验证用户是否存在,道理和这个是一模一样的,其中一定要注意汉字传输中乱码的问题~~~~~~
您可能感兴趣的文章:
  • yii2 modal弹窗之ActiveForm ajax表单异步验证
  • Ajax实现异步用户名验证功能
  • Ajax异步方式实现登录与验证
  • Ajax实现异步刷新验证用户名是否已存在的具体方法
  • ajax jquery 异步表单验证示例代码
  • PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
  • jquery ajax 登录验证实现代码
  • jquery+ajax验证不通过也提交表单问题处理
  • Ajax 用户名验证是否存在
  • ajax同步验证单号是否存在的方法

标签:衢州 萍乡 江苏 广元 大理 枣庄 衡水 蚌埠

巨人网络通讯声明:本文标题《Ajax实现的异步传输与验证示例代码》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266