首页 > 代码库 > Jquery的AJAX应用详解

Jquery的AJAX应用详解

案例一:取得服务端当前时间

  简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间

<body>
    当前时间:
    <span id="time"></span><br />
    <input type="button" value="获取时间" />
    <script type="text/javascript">
    $(":button").click(function() {
      var url = "${pageContext.request.contextPath}/servlet/TimeServlet?time="+ new Date().getTime();
      $("#time").load(url);
    });
    </script>
</body>
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(str);
        pw.flush();
        pw.close();
}

  复杂形式:jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})

<body>
    当前时间:
    <span id="time"></span><br />
    <input type="button" value="获取时间" />
    <script type="text/javascript">
        $(":button").click(function() {
        //参数一:发送的路径
        var url = "${pageContext.request.contextPath}/servlet/TimeServlet?time="+ new Date().getTime();
             //参数二:sendData发送请求体中的数据,以JSON文本书写的发送的参数
             var sendDate = {
                 "name" : "哈哈",
                 "sal"  :  6000
             };
             //参数三:回调函数,类似于传统方式ajax.onreadystatechange = 处理函数
             $("#time").load(url,sendDate,function(backData,textStatus,xmlHttpRequest){
                 //回调函数中参数一:backData表示返回的数据,它是js对象
                 //回调函数中参数二:textStatus表示返回状态的文本描述,例如:success,error,
                 //回调函数中参数三:xmlHttpRequest表示ajax中的核心对象
                 alert("backData=http://www.mamicode.com/" + backData);//输出:backData=http://www.mamicode.com/2017-01-15 20:26:50
                 alert("textStatus=" + textStatus);//输出:textStatus=success
                 alert("xmlHttpRequest=" + xmlHttpRequest.readyState);//输出:xmlHttpRequest=4
                 alert("xmlHttpRequest=" + xmlHttpRequest.status);//输出:xmlHttpRequest=200
                 alert("xmlHttpRequest=" + xmlHttpRequest.responseText);//它是一个字符串,输出:xmlHttpRequest=2017-01-15 20:26:50
                 //项目中只需要使用backDate即可                
              });
    });
    </script>
</body>
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        System.out.println("POST");
        String name = request.getParameter("name");
        String sal = request.getParameter("sal");
        System.out.println(name+":"+sal);
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(str);
        pw.flush();
        pw.close();
}

  注意:对于load方法而言,如果请求体无参数发送的话,load方法采用GET方式提交,如果请求体有参数发送的话,load方法采用POST方式提交,使用load方法时,自动进行编码,无需手工编码

案例二:检查注册用户名和密码是否存在

<body>
    <!-- 在异步提交的方式下,form标签的action和method属性没有意义-->
    <form action="01_time.jsp" method="GET">
        <table border="2" align="center">
            <tr>
                <th>用户名</th>
                <td><input type="text" name="username" /></td>
            </tr>
            <tr>
                <th>密码</th>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="button" value="检查" style="width:111px" /></td>
            </tr>
        </table>
    </form>
    <span></span>
    <script type="text/javascript">
        $(":button").click(function() {
             var username = $(":text").val();//哈哈
             var password = $(":password").val();//123
             var url = "${pageContext.request.contextPath}/servlet/UserServlet?time="+ new Date().getTime();
             //手工写JSON文本
             /* var sendData = http://www.mamicode.com/{"username" : username,
                 "password" : password
               }; */
             var sendData = $("form").serialize();//这行相当于上面三行
             $.post(url,sendData,function(backDate) {
                                     //backDate:
                                     //如果服务器返回html,即backDate就是string,不要解析
                                     //如果服务器返回json,即backDate就是object,要解析    
                                     //如果服务器返回xml,即backDate就是object,要解析    
                                     var $img = $("<img src=http://www.mamicode.com/‘"+backDate+"‘ width=‘14px‘ height=‘14px‘>");
                                     $("span").text("");
                                     $("span").append($img);
                                 });
             });
    </script>
</body>

 

public class UserServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");//哈哈
        String password = request.getParameter("password");//123
        String tip = "images/MsgSent.gif";
        if("哈哈".equals(username) && "123".equals(password)){
            tip = "images/MsgError.gif";
        }
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }
}

  $.get(url,sendData,function(backData,textStatus,ajax){... ...})

  $.post(url,sendData,function(backData,textStatus,ajax){... ...})(提倡)

  注意:使用get或post方法时,自动进行编码,无需手工编码

  jQuery对象.serialize() :自动生成JSON格式的文本,要为每个jQuery对象设置一个name属性,因为name属性会被认为请求参数名必须用<form>标签元素如果属性过多,强烈推荐采用这个API 

案例三:jQuery解析XML

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <city>广州</city>
    <city>深圳</city>
    <city>香港</city>
    <city>澳门</city>
    <city>台湾</city>
    <city>中山</city>
</root>
<body>
    <input type="button" value="解析服务器响应的xml文件" />
    <script type="text/javascript">
        $(":button").click(function() 
                {   
var url = "${pageContext.request.contextPath}/03_city.xml?time="+ new Date().getTime();   var sendData = null;   $.get(url, sendData, function(xml) {   //用jquery中的api解析xml文件,这时的xml是js对象   var $xml = $(xml).find("city");   //迭代   $xml.each(function() {   var city = $(this).text();   alert(city);   });   });   }); </script> </body>

 

 案例四:基于jQuery的AJAX二级联动

<body>
    <select id="province">
        <option>选择省份</option>
        <option>江苏</option>
        <option>浙江</option>
    </select>
    <select id="city">
        <option>选择城市</option>
    </select>
    <!-- 省份->城市 -->
    <script type="text/javascript">
        //定位省份下拉框,同时添时内容改变事件
        $("#province").change(
                        function() {
                            //清空原城市下拉框中的内容,除第一项外
                            $("#city option:gt(0)").remove();
                            //获取选中的省份
                            var province = $("#province option:selected").text();
                            //如果选中的不是"选择省份"
                            if ("选择省份" != province) {
                                $.ajax({
                                            type : "POST",
                                            url : "${pageContext.request.contextPath}/findCityByProvinceRequest?time="+ new Date().getTime(),
                                            data : {
                                                "province" : province
                                            },
                                            success : function(backDate,textStatus, ajax) {
                                                //解析json文本
                                                var array = backDate.setCity;
                                                var size = array.length;
                                                for (var i = 0; i < size; i++) {
                                                    var city = array[i];
                                                    var $option = $("<option>"+ city+ "</option>");
                                                    $("#city").append($option);
                                                }
                                            }
                                        });
                           }
                      });
    </script>
</body>
public class ProvinceCityAction extends ActionSupport{
    private String province;
    public void setProvince(String province) {
        this.province = province;
    }
    public String findCityByProvince() throws Exception {
        setCity = new LinkedHashSet<String>();
        if("江苏".equals(province)){
            setCity.add("南京");
            setCity.add("扬州");
        }else if("浙江".equals(province)){
            setCity.add("杭州");
            setCity.add("宁波");
            setCity.add("温州");
        }
        return SUCCESS;
    }
    private Set<String> setCity;
    public Set<String> getSetCity() {
        return setCity;
    }
}

Jquery的AJAX应用详解