基于JQuery的Ajax+JSON（全）

本文介绍: Async h ro nous Ja vaSc rip t And XML的缩写：异步的 Ja vaSc rip t 和 XML AJAX不是新的编程，指的是⼀种交互⽅式，异步加载，客户端和服务器的数据交互更新在局部⻚⾯的技术，不需要刷新整个⻚⾯（局部刷新）优点： 1、局部刷新，效率更⾼ 2、⽤户体验更好先用一个例子来开篇吧(jsp发起请求，Se r v let 接收）一个 test.jsp<%@ page contentTy pe=”text/html;char set=UTF-8″ lang ua g…

Async h ronous Ja vaSc r ip t And XML的缩写：异步的 Ja vaScrip t 和 XML AJAX

AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有 Jav aScrip t, html , dom , xml ,css 等。主要是 JavaScrip t , XML.异步加载，客户端和服务器的数据交互更新在局部⻚⾯的技术，不需要刷新整个⻚⾯（局部刷新）

优点： 1、局部刷新，效率更⾼ 2、⽤户体验更好

先用一个例子来开篇吧(jsp发起请求，Serv let 接收

我们先来从同步开始讲，再到异步

全局刷新

此时浏览器只能显示 result.jsp 页面，其他用户什么都看不到

怎么才能局部刷新呢，这里就要用到JQue ry 封装的 AJAX

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是 AJAX 请求的响应结果。

开发中是用JQue ry 封装的AjaxJQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Pos t 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。语法：

引入JQuery封装的Ajax的js，引入还得ReBui ld一下，不然out里没有该js 资源

好了，我们来测试一下到底成功了没有（此时form 表单提交方式已经被取代了）

&lt;%@ page contentType="text/html;charset=UTF-8" language="java" %&gt;
<html&gt;
<head&gt;
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        var btn = $("#btn")
        btn.click(function () {
            alert("引入成功啦")
        })
    })
</script>
<body>
    ${str}
    <input type="text"><br>
    <input type="submit" value="提交" id="btn">
</body>
</html>

基于 jQuery 的 AJAX，好了我们回到我们最开始的问题，怎么局部刷新呢

我们来举例子：一个添加电脑的表单，当用户填完电脑名后，他就进行局部刷新，JS函数去查看数据库是否有该电脑名，并对结果进行判断（前提要先引入 jquery)

我们要有一个向数据库查询是否存在该电脑名的控制层

addCo m puter.jsp(在这里面进行局部刷新）

跳转 servlet进行判断

来看一下结果

接下来我们再来写一个例子

补充一点JSON的知识（JS第九讲我写过）

JSON

JavaScript Object Notation，⼀种轻量级数据交互格式，完成 js 与 Java 等后端开发语⾔对象数据之间的转换

首先导包吧

先通过一个例子来引入它吧

一个User类

public class User {
    Integer id;
    String name;
    double score;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + ''' +
                ", score=" + score +
                '}';
    }

    public User(Integer id, String name, double score) {
        this.id = id;
        this.name = name;
        this.score = score;
    }
}

一个Serv letTest.java

@WebServlet("/test")
public class ServletTest extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        User user = new User(1,"Bob",23.5);
        resp.getWriter().write(user.toString());
    }
}

一个jsp

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        var btn = $("#btn")
        btn.click(function () {
            //获取点击事件跳转Servlet
            $.ajax({
                url:'/test',
                type:'post',
                dateType:'text',
                success:function (data) {
                    alert(data)
                }
            })
        })
    })
</script>
<body>
    <input type="submit" value="提交" id="btn">
</body>

运行情况

通过输出Servlet拿到的data，我们能看到我们的User信息拿到了

但是我们如何在HTML页面来输出呢，这时就要用到JSON

一个ServletTest.java

@WebServlet("/test")
public class ServletTest extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        User user = new User(1,"Bob",23.5);
        resp.setCharacterEncoding("UTF-8");
        //将Java对象转换为JSON格式
        JSONObject jsonObject = JSONObject.fromObject(user);
        resp.getWriter().write(jsonObject.toString());
    }
}

一个jsp

这个data其实是servlet 传过来的

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        var btn = $("#btn");
        btn.click(function(){
            $.ajax({
                url:'/test',
                type:'post',
                dataType:'json',
                success:function(data){
                    $("#id").val(data.id);
                    $("#name").val(data.name);
                    $("#score").val(data.score);
                }
            });
        });
    })
</script>
<body>
    编号：<input id="id" type="text"/><br/>
    姓名：<input id="name" type="text"/><br/>
    成绩：<input id="score" type="text"/><br/>
    <input id="btn" type="button" value="提交"/>
</body>
</html>