• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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());
    }

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

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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