基于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…

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

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

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

全局刷新

&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>

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;
    }
}

@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());
    }
}

<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>

@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());
    }
}

<%@ 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>