axaj异步查询学习(多级联动、校对信息)

原创 2017年08月17日 16:35:41

要使用异步查询就要用到axaj,也可以说ajax有异步查询的功能,所谓的异步查询可以理解为在不整个页面刷新的情况下(即局部刷新)向服务器或者后台发送请求并拿到服务器的响应。

1. 导入jar包
要使用ajax就要先导入一些jar包,一般有json-lib-2.1-jdk15.jar,ezmorph-1.0.3.jar, commons-logging-1.1.1.jar,commons-lang-2.5.jar,commons-collections-3.1.jar, commons-beanutils-1.7.0.jar,jquery-1.10.2.min.js,jar包的版本不一定要与本文一模一样。
2.JSP页面上的操作
请求有post请求和get请求两种,本文用post请求,

<script type="text/javascript">
    var xhr=false;
    function isUsernameValid(){
    //1.创建XMLHttpRequest对象
        //非IE浏览器
        if(window.XMLHttpRequest){

            xhr=new XMLHttpRequest();

        }else if(window.ActiveXObject){//IE浏览器
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        if(xhr){

            /*
                GET请求
            */
            /* //2.定义url连接
            var username = document.getElementById("username").value;
            var url = "isValidServlet";

            //3.打开服务器的连接
            xhr.open("get", url, true);

            //4.绑定回调函数(即响应回来后,可以调用的函数),readystate 0~4
            xhr.onreadystatechange = callback;

            //5.发送请求
            var username=document.getElementById("username").value;//根据id找数据
            xhr.send("username="+username); */
        /*
        post请求
        */
        //2.定义url连接

        var url="IsValidServlet";

        //3.打开服务器的连接
        xhr.open("post",url,true);
        //---------------------------post请求必须设置的参数--------------------------
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        //4.绑定回调函数(即响应回来后,可以调用的函数),readystate 0~4
        xhr.onreadystatechange=callback;

        //5.发送请求
        var username=document.getElementById("username").value;//根据id找数据
        xhr.send("username="+username);


        }else{
            alert("XMLHttpRequest创建失败");

        }
    }

    //回调函数
    function callback(){

        if(xhr.readyState==4){//响应完成

            if(xhr.status==200){//正常响应完成 200 OK   404路径找不到  500服务器异常

                var response=xhr.responseText;
                document.getElementById("usernamemessage").innerHTML=response;
            }

        }


    }
    </script>

    <form action="RegistrationServlet" method="post">
    用户名:<input type="text" id="username" name="username" onblur="isUsernameValid()">
        <font color="red" size="-1" id="usernamemessage"></font>
    密码 :<input name="password" type="password"  id="password" />
         <input type="reset" value="重置"> 
     <input type="submit" value="登陆"> 
    </form>

上面的代码也可以这样写

<script type="text/javascript">
    var xhr = false;
    function isUsernameValid()
    {
        var username=document.getElementById("username").value;//根据id找数据
        $.ajax({
               type: "POST",
               url: "IsValidServlet",
               data: "username="+username,
               //多个参数时,比如有username,password,应该这样写:data:{"username" :username,"password" :password},
               success: function(Msg){
                document.getElementById("usernamemessage").innerHTML=Msg.message;

               }
            });
            }
            <form action="RegistrationServlet" method="post">
    用户名:<input type="text" id="username" name="username" onblur="isUsernameValid()">
        <font color="red" size="-1" id="usernamemessage"></font>
    密码 :<input name="password" type="password"  id="password" />
         <input type="reset" value="重置"> 
     <input type="submit" value="登陆"> 
    </form>

3.Servlet的操作

@WebServlet("/IsValidServlet")
public class IsValidServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;


    PrintWriter printWriter=null;

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String username = request.getParameter("username");


        //指定HTTP响应的字符集编码
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        //伪校验(不连接数据库)
        PrintWriter writer = response.getWriter();
        if("tomcat".equals(username))
        {
            String message="用户名合法";
            writer.write(message);
            /*也可以用json,代码如下
            String message="{\"message\":\"用户名合法\"}";

            response.setContentType("application/json;charset=utf-8");
            PrintWriter writer = response.getWriter();
            writer.write(message);
            writer.flush();
            writer.close();

            */
        }
        else
        {
            String message="用户名不合法";
            writer.write(message);
        }
        writer.flush();
        writer.close();
}

多级联动
1.jsp页面操作

    <script type="text/javascript">
    var xhr = false;
    function getSclassify()
    {
        var bclassifyObj = document.getElementById("bclassify");//拿到大分类的对象
        var bclassifyId = bclassifyObj.options[bclassifyObj.selectedIndex].value;//再拿大分类的value
        $.ajax({
               type: "POST",
               url: "getSclassifyServlet",
               data: "bclassify="+bclassify,
               success: function(sclassifies){

                //将sclassifyObj中的sid、sname绑定到city下拉列表
                var sclassifyObj = document.getElementById("sclassify");

                //清空下拉列表
                sclassifyObj.options.length = 1;
                for(var i=0;i<sclassifies.length;i++)
                {
                    var sclassify = sclassifies[i];

                    var sid = sclassify.id;
                    var sname = sclassify.sname;

                    //在下拉列表末尾添加新option
                    sclassifyObj.options[sclassifyObj.options.length] =  new Option(sname,sid);

                    }
               }
        });
    }

    <form action="">
        用户名:<input type="text" name="username"><br/><br/>
        大分类:<select id="bclassify" name="bclassify"  onchange="getSclassify()">
                <option value="">--请选择--</option>
                <option value="1000">个人护理</option>
                <option value="2000">家居用品</option>
                <option value="3000">食品饮料</option>
            </select>
        小分类:<select id="sclassify" name="sclassify"   >
            <option   >--请选择--</option>
            </select>
    </form>

2.servlet的操作

@WebServlet("/getSclassifyServlet")
public class GetSclassifyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    /**
     * 响应JSON格式文档
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String bclassifyId = request.getParameter("bclassifyId");


        //根据大分类ID查询小分类中所有符合条件的数据(应该连接数据库找,这里就写死了不去连接数据库了)
        List<Sclassify> sclassifyList = new ArrayList<Sclassify>();//Sclassify实体类里有id和name
        if("1000".equals(bclassifyId))
        {
            sclassifyList.add(new Sclassify(1001,"洗发水"));
            sclassifyList.add(new Sclassify(1002,"沐浴露"));
            sclassifyList.add(new Sclassify(1003,"牙膏"));
        }
        else if("2000".equals(bclassifyId))
        {
            sclassifyList.add(new Sclassify(2001,"厨房用品"));
            sclassifyList.add(new Sclassify(2002,"床上用品"));
            sclassifyList.add(new Sclassify(2003,"清洁用品"));
        }
        else if("3000".equals(bclassifyId))
        {
            sclassifyList.add(new Sclassify(3001,"水果"));
            sclassifyList.add(new Sclassify(3002,"酒类"));
            sclassifyList.add(new Sclassify(3003,"零食"));
        }
        JSONArray jsonArray = JSONArray.fromObject(sclassifyList);

        System.out.println("json格式响应内容:" + jsonArray.toString());

        //指定http响应字符集编码
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");

        //响应
        PrintWriter writer = response.getWriter();
        writer.write(jsonArray.toString());
        writer.flush();
        writer.close();
    }

一般情况下,大家都喜欢用json。
4.附
如果一个jsp页面要做多个异步查询的话,需要改动几点
1.jsp页面

比如有两个需要异步查询的地方

    $.ajax({
               type: "POST",
               //url: "getSclassifyServlet",
               url: "getSclassifyServlet/getsclassify " //url地址带上后缀getsclassify
               data: "bclassify="+bclassify,
               success: function(sclassifies){
                }
                });

    $.ajax({
               type: "POST",
               //url: "getSclassifyServlet",
               url: "getSclassifyServlet/getname " //url地址带上后缀getname
               data: "bclassify="+bclassify,
               success: function(sclassifies){
                }
                });      

2.servlet页面
1.使用service方法(此方法会接收所有POST和GET请求),不用dopost和doget方法

@WebServlet("/getSclassifyServlet/*")//代表接收所有发到getSclassifyServlet的post和get请求
public class GetSclassifyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;


    PrintWriter printWriter=null;

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String url=request.getRequestURI();//获取URL的值
    if(url.endsWith("getsclassify")){//如果URL以getsclassify结尾就调用getSclassify()方法
        getSclassify(request, response);
    }else if(url.endsWith("getname")){
        getName(request, response);
    }

protected void getSclassify(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String bclassifyId = request.getParameter("bclassifyId");


        //根据大分类ID查询小分类中所有符合条件的数据(应该连接数据库找,这里就写死了不去连接数据库了)
        List<Sclassify> sclassifyList = new ArrayList<Sclassify>();//Sclassify实体类里有id和name
        if("1000".equals(bclassifyId))
        {
            sclassifyList.add(new Sclassify(1001,"洗发水"));
            sclassifyList.add(new Sclassify(1002,"沐浴露"));
            sclassifyList.add(new Sclassify(1003,"牙膏"));
        }
        else if("2000".equals(bclassifyId))
        {
            sclassifyList.add(new Sclassify(2001,"厨房用品"));
            sclassifyList.add(new Sclassify(2002,"床上用品"));
            sclassifyList.add(new Sclassify(2003,"清洁用品"));
        }
        else if("3000".equals(bclassifyId))
        {
            sclassifyList.add(new Sclassify(3001,"水果"));
            sclassifyList.add(new Sclassify(3002,"酒类"));
            sclassifyList.add(new Sclassify(3003,"零食"));
        }
        JSONArray jsonArray = JSONArray.fromObject(sclassifyList);

        System.out.println("json格式响应内容:" + jsonArray.toString());

        //指定http响应字符集编码
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");

        //响应
        PrintWriter writer = response.getWriter();
        writer.write(jsonArray.toString());
        writer.flush();
        writer.close();
    }
    protected void getName(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    /*
    这里像getSclassify()一样,写需要做的验证
    */
    }
}

希望本文可以带给你一些帮助。

版权声明:本文为博主原创文章,未经博主允许不得转载。

多级联动下拉列表Ajax方案实现

 首先是生成下拉列表内容的jsp。这个jsp要生成XML文件,根据发来的参数把数据传到ajax异步请求中。XML可以用来传送比较复杂的数据,然后在javascript中进行解析,但下拉列表可以只传某个...
  • HeLiang7
  • HeLiang7
  • 2008年03月27日 22:17
  • 3791

利用jquery、json实现前台无刷新的多级联动下拉菜单

这两天我都在做一个项目,s2sh的一个项目,里面有一个模块需要
  • u011687037
  • u011687037
  • 2014年07月20日 19:24
  • 4259

Struts2中<s:doubleselect>标签从MySQL数据库中查询出数据实现二级联动

1.先在mysql建立两张表,一张城市表City,一张地区表Area: 2.写两个实体类: City.java package com.jmx.entity; public cla...
  • qq_37110005
  • qq_37110005
  • 2017年10月30日 10:29
  • 230

ajax 实现多级联动。

首先例如城市和地区之间的联动: 前台jq $("#area1").change(function(){//市变化的时候 调用后台查询相关的地区 $.ajax({ url:'${...
  • linlinv3
  • linlinv3
  • 2013年11月15日 10:13
  • 4075

ecshop详情页商品三级联动搜索

在index.php添加//三级联动 传递厂商名列表 begin $sql_cs="select distinct(attr_value) from ".$GLOBALS['ecs']->ta...
  • u010620626
  • u010620626
  • 2014年05月21日 11:12
  • 2013

html选择框多级联动

Demo来源:http://www.imuum.com/plugin-jquery-cityselect-js-provinces-linkage-effect.html 我把Demo改写成最多可以到...
  • liufang1991
  • liufang1991
  • 2016年08月17日 19:46
  • 3552

axaj

AJAX(Asynchronous Javascript And XML) 1.什么是AJAX:      是异步的javaScript And Xml,与服务器进行异步的数据交互,传输数...
  • my_csdn_lsq
  • my_csdn_lsq
  • 2017年10月18日 12:32
  • 325

JS多级联动下拉列表(不限级数)

JS多级联动下拉列表,可用于省、市、区三级联动,或多级分类联动选择等。 不限级数,兼容浏览器,使用方法请看下面的HTML示例。 示例效果如下图所示: 图1 图2 ...
  • oukunqing
  • oukunqing
  • 2015年02月02日 11:44
  • 3499

ASP利用数据表生成多级联动下拉列表框

在做多个联动的select下拉列表框时,一般都是用javascript数组来动态显示列表框的列表项内容。看到不少程序,都是在脚本中一行一行地输入数组元素,即容易出错,而且让脚本篇幅看上去很大。经常在想...
  • daniel75122
  • daniel75122
  • 2009年06月22日 02:37
  • 4112

自己总结封装了多级联动下拉框js

/*支持多级下拉框 * data:查询出来的所有数据,经过处理缩进的多级数据。子集用固定child, * pdata:选中的数据。字符串用逗号隔开例:'4,57,557'如果没有就空字符串''; * ...
  • zdw19861127
  • zdw19861127
  • 2016年12月02日 21:26
  • 239
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:axaj异步查询学习(多级联动、校对信息)
举报原因:
原因补充:

(最多只允许输入30个字)