• $.ajax()方法和$.get()方法使用小结


    一. 使用JQuery的$.get()方法实现异步请求

    1. 编写JSP

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
     7     <script type="text/javascript" src="js/verify_jquery_get.js"></script>
     8 </head>
     9 <body>
    10     <input type="text" id="inputVal"/><br/>
    11         <input type="button" value="获取xml数据" onclick="verifyJqueryGet()"/>
    12     <div id="result"></div>
    13 </body>
    14 </html>

    2. 编写verify_jquery_get.js

    1 function verifyJqueryGet() {
    2     $.get("AjaxServer?value="+$('#inputVal').val(),
    3         null,
    4         function (data) {
    5             $('#result').html("<p>"+data+"</p>");
    6         });
    7 }

    $.get()方法参数说明:

    $.get(url, param, callback(data));

    url 请求资源的路径

    param 请求参数, 注意将请求参数写在url后, 这里填null

    callback(data) 回调函数, 服务器响应数据后, Ajax引擎(xhr)会自动调用该回调函数,数据还没回来时, 页面不会等待, 而是继续执行, 中断...

    3. 编写Servlet

     1 /**
     2  * Created by IntelliJ IDEA.
     3  *
     4  * @Auther: ShaoHsiung
     5  * @Date: 2018/8/20 15:12
     6  * @Title: Ajax后台程序
     7  * @Description: 获取异步请求参数, 若参数满足条件, 则使用输出对象向浏览器输出数据
     8  */
     9 public class AjaxServer extends HttpServlet {
    10     @Override
    11     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    12         // 设置响应内容类型
    13         resp.setContentType("text/html;charset=utf-8");
    14         // 获取输出对象
    15         PrintWriter out = resp.getWriter();
    16         // 获取异步请求参数
    17         String value = req.getParameter("value");
    18         // 设置参数编码为UTF-8
    19         String valueUtf8 = URLDecoder.decode(value, "UTF-8");
    20         // 检验参数
    21         if (valueUtf8==null || valueUtf8.equals("")) {
    22             out.println("用户名不能为空!");
    23         } else {
    24             // 判断参数是否满足条件
    25             if(valueUtf8.equals("young")) {
    26                 out.println("用户名可以使用!");
    27             } else {
    28                 out.println("用户名无法使用!");
    29             }
    30         }
    31     }
    32 
    33     @Override
    34     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    35         doGet(req, resp);
    36     }
    37 }

    4. 程序演示

    二. 使用JQuery的$.ajax()方法实现异步请求

    1. 编写JSP

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
     7     <script type="text/javascript" src="js/verify_jquery_ajax.js"></script>
     8 </head>
     9 <body>
    10     <input type="text" id="inputVal"/><br/>
    11         <input type="button" value="获取xml数据" onclick="verifyJqueryAjax()"/>
    12     <div id="result"></div>
    13 </body>
    14 </html>

    2. 编写verify_jquery_ajax.js

     1 function verifyJqueryAjax() {
     2     $.ajax({
     3         type: "get",  // 请求方式
     4         url: "AjaxXmlServer",  // 目标资源
     5         data: "value="+$('#inputVal').val(), // 请求参数
     6         dataType: "xml",  // 服务器响应的数据类型
     7         success : function (data) {  // readystate == 4 && status == 200
     8             $('#result').html("<p>"+$(data).children().text()+"</p>");  // data是一个dom对象, 先将其转化为jquery对象
     9         }
    10     });
    11 }

    小结:

    1) js中定义一个对象方式:
    var obj1 = {};
    var obj2 = {name: "zhang", age: 18};

    2) dom->jquery
    var $data = $(data)

    3) 需要注意jquery对象的children方法的使用

    $.ajax()方法参数说明:

    type 请求方式 get/post

    url 请求资源路径

    data 请求参数, 注意格式

    dataType 服务器响应的数据类型

    success(data) 回调函数, data是一个dom对象

    3. 编写Servlet

     1 /**
     2  * Created by IntelliJ IDEA.
     3  *
     4  * @Auther: ShaoHsiung
     5  * @Date: 2018-8-21 12:41:06
     6  * @Title: Ajax后台程序, 返回xml数据
     7  * @Description: 获取异步请求参数, 若参数满足条件, 则使用输出对象向浏览器输出xml数据
     8  */
     9 public class AjaxXmlServer extends HttpServlet {
    10     @Override
    11     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    12 
    13         // 设置响应内容类型为xml
    14         resp.setContentType("text/xml;charset=utf-8");
    15         // 获取输出对象
    16         PrintWriter out = resp.getWriter();
    17         // 获取异步请求参数
    18         String value = req.getParameter("value");
    19         //System.out.println("1" + value);
    20         //System.out.println("2" + new String(value.getBytes("ISO8859-1"), "UTF-8"));
    21         // 设置参数编码为UTF-8
    22         String valueUtf8 = URLDecoder.decode(value, "UTF-8");
    23         // 准备响应的数据
    24         StringBuffer buffer = new StringBuffer();
    25         buffer.append("<message>");
    26         // 检验参数
    27         if (valueUtf8==null || valueUtf8.equals("")) {
    28             buffer.append("用户名不能为空!").append("</message>");
    29         } else {
    30             // 判断参数是否满足条件
    31             if(valueUtf8.equals("young")) {
    32                 buffer.append("用户名可以使用!").append("</message>");
    33             } else {
    34                 buffer.append("用户名无法使用!").append("</message>");
    35             }
    36         }
    37         // 响应数据
    38         out.print(buffer.toString());
    39     }
    40 
    41     @Override
    42     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    43         doGet(req, resp);
    44     }
    45 }

    备注: 

    1) 务必设置设置响应内容类型为xml, 否则js代码无法处理响应的数据

    4. 程序演示

  • 相关阅读:
    第九十一天 how can I 坚持 技术-永远的技术
    第九十天 how can I 坚持
    Java控制台中输入中文输出乱码的解决办法
    【体系结构】转移预测器设计与比较1
    Ubuntu 13.04 用Sublime Text 2 编译运行 JAVA
    HDU 4605 Magic Ball Game (在线主席树|| 离线 线段树)
    个人重构机房收费系统之报表
    快速排序的递归和非递归实现
    HDU 3721 Building Roads (2010 Asia Tianjin Regional Contest)
    体验决定深度,知识决定广度。你的人生是什么呢? 操蛋和扯蛋没必要纠结 唯有继续
  • 原文地址:https://www.cnblogs.com/shaohsiung/p/9538890.html
Copyright © 2020-2023  润新知