管理

js+ajax+jquery(4)( jquery使用ajax的3种方式）

jQuery常用AJAX-API

目的：简化客户端与服务端进行局部刷新的异步通讯

（1）取得服务端当前时间

简单形式：jQuery对象.load(url)

  返回结果自动添加到jQuery对象代表的标签中间
  如果是Servlet的话，采用的是GET方式

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

sendData = {"user.name":"jack","user.pass":"123"};
 以JSON格式文本方式发送，使用POST方式发送，服务端能收到数据

注意：对于load方法而言，如果请求体无参数发送的话，load方法采用GET方式提交

注意：对于load方法而言，如果请求体有参数发送的话，load方法采用POST方式提交

注意：使用load方法时，自动进行编码，无需手工编码

$(":button").click(function(){
            //参数一:发送的路径
            var url = "${pageContext.request.contextPath}/servlet/TimeServlet?time="+new Date().getTime();
            //参数二:以JSON文本书写的发送的参数
            var sendDate = {
                "name" : "哈哈",
                "sal"  :  6000
            };
            //参数三:回调函数
            $("#time").load(url,sendDate,function(backData,textStatus,xmlHttpRequest){
                //回调函数中参数一：backData表示返回的数据，它是js对象
                //回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error，
                //回调函数中参数三：xmlHttpRequest表示ajax中的核心对象
                //alert("backData=" + backData);//它是一个js对象（如果返回json格式的字符串就是json对象）
                //alert("textStatus=" + textStatus);
                //alert("xmlHttpRequest=" + xmlHttpRequest.readyState);
                //alert("xmlHttpRequest=" + xmlHttpRequest.status);
                //alert("xmlHttpRequest=" + xmlHttpRequest.responseText);//它是一个字符串
                //项目中只需要使用backDate即可                
            });            
                            
            //$("#time").load(url,sendDate);
            //$("#time").load(url);
        });

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>取得服务端当前时间</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <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();
            //参数二:以JSON文本书写的发送的参数
            var sendDate = {
                "name" : "哈哈",
                "sal"  :  6000
            };
            //参数三:回调函数
            $("#time").load(url,sendDate,function(backData,textStatus,xmlHttpRequest){
                //回调函数中参数一：backData表示返回的数据，它是js对象
                //回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error，
                //回调函数中参数三：xmlHttpRequest表示ajax中的核心对象
                //alert("backData=" + backData);//它是一个js对象
                //alert("textStatus=" + textStatus);
                //alert("xmlHttpRequest=" + xmlHttpRequest.readyState);
                //alert("xmlHttpRequest=" + xmlHttpRequest.status);
                //alert("xmlHttpRequest=" + xmlHttpRequest.responseText);//它是一个字符串
                //项目中只需要使用backDate即可                
            });
            
                            
            //$("#time").load(url,sendDate);
            //$("#time").load(url);
        });
    </script>
    
  </body>
</html>

View Code

/**
 * 取得服务端当前时间
 * @author AdminTC
 */
public class TimeServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        System.out.println("GET");
        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();
    }
    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();
    }
}

View Code

load()方法参数解释：

参数一：url发送到哪里去
参数二： sendData发送请求体中的数据，符合JSON格式，例如：{key:value,key:value}
参数三：function处理函数，类似于传统方式ajax.onreadystatechange = 处理函数

其中参数三为function处理函数最多可以接收三个参数，含义如下

第一个参数：服务端返回的数据，例如：backData
第二个参数：服务端状态码的文本描述，例如：success、error、
第三个参数：ajax异步对象，即XMLHttpRequest对象

以上所有参数的名字可以任意，但必须按顺序书写，尽量做到见名知意

（2）检查注册用户名和密码是否存在(第二种jquery的ajax方式）

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

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

$(":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 = {
                "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='"+backDate+"' width='14px' height='14px'>");
                $("span").text("");
                $("span").append($img);
            });
        });

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>检查注册用户名和密码是否存在</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <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 = {
                "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='"+backDate+"' width='14px' height='14px'>");
                $("span").text("");
                $("span").append($img);
            });
        });
    </script>
    
  </body>
</html>

View Code

/**
 * 检查注册用户名和密码是否存在
 * @author AdminTC
 */
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();
    }
}

View Code

（3）jQuery对象.serialize()

作用：自动生成JSON格式的文本（会将有name的文本框的内容生成json对象)

注意：

为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名
必须用<form>标签元素

适用：如果属性过多，强烈推荐采用这个API

<script type="text/javascript">
        //定位按钮，同时添加单击事件
        $(":button").click(function(){
            //获取用户名和密码
            var username = $(":text:first").val();
            var password = $(":text:last").val();
            //去空格
            username = $.trim(username);
            password = $.trim(password);
            //异步发送到服务端
            var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
            /*手工书写JSON文本
            var sendData = {
                "user.username":username,
                "user.password":password
            };
            */
            /*工具生成JSON文本*/
            var sendData = $("form").serialize();
            $.post(url,sendData,function(backData,textStatus,ajax){
                //backData是一个JSON文本/对象，你得通过.号访问其属性值
                var tip = backData.tip;
                //创建img节点
                var $img = $("<img src='" + tip + "' height='18px' widht='18px'/>")
                //清空span节点中的内容
                $("span").text("");
                //将img节点添加到span节点中
                $("span").append( $img );
            });
        });
    </script>

（4）jQuery解析XML

$(":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);
                });
            });
        });

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery解析XML</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <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>
</html>

View Code

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <city>广州</city>
    <city>深圳</city>
    <city>香港</city>
    <city>澳门</city>
    <city>台湾</city>
    <city>中山</city>
</root>

View Code

（5）省份-城市，基于jQuery的AJAX二级联动，用Struts2整合AJAX【非数据库版】（第三种jquery的ajax方式)

        $.ajax({
                         type:"POST",
                         url:"${pageContext.request.contextPath}/findCityByProvinceRequest?id="+new Date().getTime(),
                         data:{"province":province},
                         success:function(backData,textStatus,ajax){}
            });

//定位省份下拉框，同时添时内容改变事件
        $("#province").change( function(){
            //清空原城市下拉框中的内容，除第一项外
            $("#city option:gt(0)").remove();
            //获取选中的省份
            var province = $("#province option:selected").text();
            //如果选中的不是"选择省份"
            if("选择省份"!=province){
                $.ajax( {
                    type    : "POST",
                    url     : "${pageContext.request.contextPath}/struts2/findCityByProvinceRequest?time="+new Date().getTime(),
                    data    : {"province":province},
                    success : function(backDate,textStatus,ajax){
                                //alert(backDate!=null?"收到":"为收到");    
                                //alert(ajax.responseText);
                                //解析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);
                                  }
                              }
                } );
            }
        } );

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省份-城市，基于jQuery的AJAX二级联动</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <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}/struts2/findCityByProvinceRequest?time="+new Date().getTime(),
                    data    : {"province":province},
                    success : function(backDate,textStatus,ajax){
                                //alert(backDate!=null?"收到":"为收到");    
                                //alert(ajax.responseText);
                                //解析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>
</html>

View Code

public class ProvinceCityAction extends ActionSupport{
    private String province;//广东
    public void setProvince(String province) {
        this.province = province;
    }
    public String findCityByProvince() throws Exception {
        cityList = new ArrayList<String>();
        if("广东".equals(province)){
            cityList.add("湛江");
            cityList.add("汕头");
        }else if("湖南".equals(province)){
            cityList.add("邵阳");
            cityList.add("浏阳");
        }
        return "ok";
    }
    private List<String> cityList;
    public List<String> getCityList() {
        return cityList;
    }
    /**
     * var backData = {
     *                      "cityList":["邵阳","浏阳"]
     *                   }
     */
}
        
<struts>

   <package name="timePackage" extends="json-default" namespace="/">
           
           <global-results>
               <result name="ok" type="json"/>
           </global-results>

        <!-- 获取服务端时间 -->
           <action 
               name="loadTimeRequest" 
               class="cn.itcast.javaee.js.time.TimeAction" 
               method="loadTimeMethod"/>

        <!-- 检查用户名和密码是否存在 -->
           <action 
               name="checkRequest" 
               class="cn.itcast.javaee.js.register.RegisterAction" 
               method="checkMethod"/>
               
           <!-- 根据省份查询城市 -->    
           <action 
               name="findCityByProvince" 
               class="cn.itcast.javaee.js.provincecity.ProvinceCityAction" 
               method="findCityByProvince"/>
 
   </package>

</struts>

View Code

posted @ 2017-05-31 03:11 假程序猿阅读(255) 评论(0) 收藏举报

刷新页面返回顶部

∝∝∝ξ══════════════════◤

js+ajax+jquery(4)( jquery使用ajax的3种方式）

jQuery常用AJAX-API

（1）取得服务端当前时间

（2）检查注册用户名和密码是否存在(第二种jquery的ajax方式）

（3）jQuery对象.serialize()

（4）jQuery解析XML

（5）省份-城市，基于jQuery的AJAX二级联动，用Struts2整合AJAX【非数据库版】（第三种jquery的ajax方式)

公告