导学

Jquery在此处不做讲解，各位同学各自复习，主要需要学习的是通过Ajax实现前后台的联动。
image.png
image.png
image.png
image.png

Ajax入门

Asynchronous JavaScript And XML （异步的JavaScript和XML），Ajax可以在不刷新页面的前提下，进行页面局部更新，Ajax不是新的技术，Ajax并不是W3C的标准。
在过去，我们在网页中刷新页面内容，需要重新从服务器获取新的页面。
Ajax的出现，揭开了无刷新更新页面的新时代。

Ajax优势

  • 优秀的用户体验：Ajax最大的有点是能在不刷新整个页面的前提下更新数据，这使得Web应用能迅速的回应用户的操作。
  • 提高Web程序的性能：在传统模式中，数据提交是通过表单来实现的，而数据的获取则需要全页面刷新来获取整页内容。Ajax可以不刷新整个页面，按需提交数据给服务器，并接收服务器返回，然后通过dom操作，按需刷新页面的一部分。
  • 减轻服务器和带宽的负担：Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。把传统方式下的一些服务器负担的工作转移到了客户端。

    jquery中的ajax

    $ajax()方法是jQuery最底层的Ajax实现。
    结构：$.ajax(options)
    options参数是一个对象：
options参数名称 说明
url 发送请求的地址
type 请求方式（`get post`）
timeout 请求超时时间（毫秒）
data 发送到服务器的数据
datatype 预期服务器返回的数据类型（`text json xml html jsonp script`）
success 请求成功后调用的回调函数
error 请求失败后调用的回调函数

image.png

  1. public class News {
  2.     private String title;
  3.     private String date;
  4.     private String source;
  5.     private String content;
  7.     public News() {
  9.     }
  11.     public News(String title, String date, String source, String content) {
  12.         super();
  13.         this.title = title;
  14.         this.date = date;
  15.         this.source = source;
  16.         this.content = content;
  17.     }
  19.     public String getTitle() {
  20.         return title;
  21.     }
  22.     public void setTitle(String title) {
  23.         this.title = title;
  24.     }
  25.     public String getDate() {
  26.         return date;
  27.     }
  28.     public void setDate(String date) {
  29.         this.date = date;
  30.     }
  31.     public String getSource() {
  32.         return source;
  33.     }
  34.     public void setSource(String source) {
  35.         this.source = source;
  36.     }
  37.     public String getContent() {
  38.         return content;
  39.     }
  40.     public void setContent(String content) {
  41.         this.content = content;
  42.     }
  44. }
  1. @WebServlet("/news_list")
  2. public class NewsListServlet extends HttpServlet {
  3.     private static final long serialVersionUID = 1L;
  5.     public NewsListServlet() {
  6.         super();
  7.     }
  8.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  9.         String type = request.getParameter("t");
  10.         List list = new ArrayList();
  11.         if(type != null && type.equals("pypl")) {
  12.             list.add(new News("PYPL:2018年5月份全球编程语言排行榜" , "2018-5-1" , "PYPL" , "..."));
  13.             list.add(new News("PYPL:2018年6月份全球编程语言排行榜" , "2018-6-1" , "PYPL" , "..."));
  14.             list.add(new News("PYPL:2018年7月份全球编程语言排行榜" , "2018-7-1" , "PYPL" , "..."));
  15.             list.add(new News("PYPL:2018年8月份全球编程语言排行榜" , "2018-8-1" , "PYPL" , "..."));
  17.         }else if(type == null || type.equals("tiobe")) {
  18.             list.add(new News("TIOBE:2018年5月份全球编程语言排行榜" , "2018-5-1" , "TIOBE" , "..."));
  19.             list.add(new News("TIOBE:2018年6月份全球编程语言排行榜" , "2018-6-1" , "TIOBE" , "..."));
  20.             list.add(new News("TIOBE:2018年7月份全球编程语言排行榜" , "2018-7-1" , "TIOBE" , "..."));
  21.             list.add(new News("TIOBE:2018年8月份全球编程语言排行榜" , "2018-8-1" , "TIOBE" , "..."));
  23.         }
  24.         String json = JSON.toJSONString(list);
  25.         System.out.println(json);
  26.         response.setContentType("text/html;charset=UTF-8");
  27.         response.getWriter().println(json);
  28.     }
  29. }
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  7. <script type="text/javascript">
  8.     $(function(){
  9.         $.ajax({
  10.             "url" : "/ajax/news_list",
  11.             "type" : "get" ,
  12.             "data" : {"t":"pypl" , "abc":"123" , "uu":"777"},
  13.             //"data" : "t=pypl&abc=123&uu=777" , 
  14.             "dataType" : "json" ,
  15.             "success" : function(json){
  16.                 console.log(json);
  17.                 for(var i = 0 ; i < json.length ; i++){
  18.                     $("#container").append("<h1>" + json[i].title + "</h1>");
  19.                 }
  20.             },
  21.             "error" : function(xmlhttp , errorText){
  22.                 console.log(xmlhttp);
  23.                 console.log(errorText);
  24.                 if(xmlhttp.status == "405"){
  25.                     alert("无效的请求方式");
  26.                 }else if(xmlhttp.status == "404"){
  27.                     alert("未找到URL资源");
  28.                 }else if(xmlhttp.status == "500"){
  29.                     alert("服务器内部错误，请联系管理员");
  30.                 }else{
  31.                     alert("产生异常，请联系管理员");
  32.                 }
  33.             }
  35.         })
  36.     })
  37. </script>
  38. </head>
  39. <body>
  40.     <div id="container"></div>
  41. </body>
  42. </html>

案例：二级联动菜单

  1. public class Channel {
  2.     private String code;
  3.     private String name;
  5.     public Channel() {
  7.     }
  9.     public Channel(String code, String name) {
  10.         super();
  11.         this.code = code;
  12.         this.name = name;
  13.     }
  14.     public String getCode() {
  15.         return code;
  16.     }
  17.     public void setCode(String code) {
  18.         this.code = code;
  19.     }
  20.     public String getName() {
  21.         return name;
  22.     }
  23.     public void setName(String name) {
  24.         this.name = name;
  25.     }
  27. }
  1. @WebServlet("/channel")
  2. public class ChannelServlet extends HttpServlet {
  3.     private static final long serialVersionUID = 1L;
  5.     public ChannelServlet() {
  6.         super();
  7.     }
  8.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  9.         String level = request.getParameter("level");
  10.         String parent = request.getParameter("parent");
  11.         List chlist = new ArrayList();
  12.         if(level.equals("1")) {
  13.             chlist.add(new Channel("ai" , "前沿/区块链/人工智能"));
  14.             chlist.add(new Channel("web" , "前端/小程序/JS"));
  15.         }else if(level.equals("2")) {
  16.             if(parent.equals("ai")) {
  17.                 chlist.add(new Channel("micro" , "微服务"));
  18.                 chlist.add(new Channel("blockchain" , "区块链"));
  19.                 chlist.add(new Channel("other" , "..."));
  20.             }else if(parent.equals("web")){
  21.                 chlist.add(new Channel("html" , "HTML"));
  22.                 chlist.add(new Channel("css" , "CSS"));
  23.                 chlist.add(new Channel("other" , "..."));
  24.             }
  25.         }
  26.         String json = JSON.toJSONString(chlist);
  27.         response.setContentType("text/html;charset=utf-8");
  28.         response.getWriter().println(json);
  29.     }
  30. }
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  7. <script type="text/javascript">
  8.     $(function(){
  9.         $.ajax({
  10.             "url" : "/ajax/channel",
  11.             "data" : {"level" : "1"},
  12.             "type" : "get" , 
  13.             "dataType" : "json" , 
  14.             "success" : function(json){
  15.                 console.log(json);
  16.                 for(var i = 0 ; i < json.length ; i++){
  17.                     var ch = json[i];
  18.                     $("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>")
  19.                 }
  20.             }
  21.         })
  22.     })
  24.     $(function(){
  25.         $("#lv1").on("change" , function(){
  26.             var parent = $(this).val();
  27.             console.log(parent);
  28.             $.ajax({
  29.                 "url" : "/ajax/channel" , 
  30.                 "data" : {"level" : "2" , "parent" : parent},
  31.                 "dataType" : "json" , 
  32.                 "type" : "get" ,
  33.                 "success" : function(json){
  34.                     console.log(json);
  35.                     //移除所有lv2下的原始option选项
  36.                     $("#lv2>option").remove();
  37.                     for(var i = 0 ; i < json.length ; i++){
  38.                         var ch = json[i];
  39.                         $("#lv2").append("<option value='" + ch.code +"'>" + ch.name + "</option>")
  40.                     }
  41.                 }
  42.             })
  43.         })
  44.     })
  45. </script>
  46. </head>
  47. <body>
  48. <select id="lv1" style="width:200px;height:30px">
  49.     <option selected="selected">请选择</option>
  50. </select>
  51. <select id="lv2" style="width:200px;height:30px"></select>
  52. </body>
  53. </html>