SpringMVC和Ajax的交互詳解(手工處理)

更新時間：2022年08月02日 09:25:39 作者：程序員小王java

Ajax即異步的?JavaScript和XML,是一種無需重新加載整個網(wǎng)頁的情況下,能夠更新部分模塊的網(wǎng)頁技術(shù),下面這篇文章主要給大家介紹了關(guān)于SpringMVC和Ajax交互的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

一、ajax的實現(xiàn)

ajax異步請求 javaScript and xml 異步請求

1、同步請求和異步請求

1、異步請求特點：請求響應回來頁面不動只刷新頁面局部
2、同步請求特點：響應回來全部刷新(地址欄，超鏈接，表單 js的location.href="")
3、通過Ajax發(fā)送的請求都是異步請求多請求之間并行處理請求之間不會相互影響

2、Ajax實現(xiàn)異步請求

Ajax發(fā)送請求通過js的異步請求對象發(fā)送請求 xhr XMLHttpRequest

js實現(xiàn)ajax:

1、創(chuàng)建異步請求對象 xhr
2、準備并且發(fā)送請求xhr.open() xhr.send();
3、處理響應
xhr.onreadyStateChang=dunction(){
    if(xhr.readyState==4&&xhr.status==200{
    xhr.responseText
    }
}

4、ajax只認字符串

jquery實現(xiàn)Ajax的封裝

$.ajax({}) 基礎(chǔ)發(fā)送Ajax請求的方式
$.get(url,method,function(){})//get方式發(fā)送請求
$.post(url,method,function{},"json")

二、SpringMVC和AJAX交互（手工處理）

控制器使用的json解析工具：阿里巴巴的fastjson

    <!--引入阿里巴巴json解析器fastjson-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.73</version>
    </dependency>

1、案例：使用Ajax形式查詢所有用戶

（1）交互示意圖

（2）ajax頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <%--引入js相關(guān)的jquery頁面--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //獲取單擊按鈕對象，綁定單擊事件
            $("#btn").click(function () {
                //發(fā)送get形式的Ajax異步請求
                $.get("${pageContext.request.contextPath}/user/show", function (result) {
                    console.log(result)
                }, "json");
            })
        });

    </script>
</head>
<body>
<input type="button" value="點擊查詢所有" id="btn">
</body>
</html>

（3）實體類

public class User {
    private Integer id;
    private String Username;
    private String password;
    private Double salary;
    private Date birthday;

（4）Controller以手工轉(zhuǎn)化json

@Controller
@RequestMapping("user")
public class QueryUser {

    @RequestMapping("show")
    public String showUser(HttpServletResponse response) throws IOException {
        User user1 = new User(1,"王恒杰1","123",2000d,new Date());
        User user2 = new User(2,"王恒杰2","123",20000d,new Date());
        User user3 = new User(3,"王恒杰3","123",200000d,new Date());
        User user4 = new User(4,"王恒杰4","123",2000000d,new Date());
        User user5 = new User(5,"王恒杰5","123",20000000d,new Date());
        List<User> users = Arrays.asList(user1, user2, user3, user4, user5);
        //1、將users用戶集合轉(zhuǎn)化為json形式字符串
        String jsonUsers = JSONObject.toJSONStringWithDateFormat(users, "yyyy-mm-dd");
        //2、通過響應輸出流，響應到客戶端
        //設置響應格式
        response.setCharacterEncoding("utf-8");
        response.getWriter().print(jsonUsers);
        return  null;
    }
}

（5）響應到前端中文亂碼 Ajax前端頁面響應中文亂碼

響應之前先設置響應格式：

 //設置響應格式
        response.setCharacterEncoding("utf-8");

解決亂碼問題后

三、SpringMVC和AJAX交互（@responseBody注解實現(xiàn)）

1、SpringMVC提供注解：@responseBody

@responseBody:簡化返回的數(shù)據(jù)轉(zhuǎn)化成json串并且通過response響應的回客戶端過程

2、使用@ResponseBody替代手工處理（使用Ajax形式查詢所有用戶）

@Controller
@RequestMapping("user")
public class QueryUser {

    @RequestMapping("show")
    @ResponseBody
    public List<User> showUser(HttpServletResponse response) throws IOException {
        User user1 = new User(1,"王恒杰1","123",2000d,new Date());
        User user2 = new User(2,"王恒杰2","123",20000d,new Date());
        User user3 = new User(3,"王恒杰3","123",200000d,new Date());
        User user4 = new User(4,"王恒杰4","123",2000000d,new Date());
        User user5 = new User(5,"王恒杰5","123",20000000d,new Date());
        List<User> users = Arrays.asList(user1, user2, user3, user4, user5);

        return  users;
    }
}

@ResponseBody替代示意圖

3、@responsBody注意事項

（1）@responsBody注解使用的json轉(zhuǎn)化工具不是fastjson,用的是jackjson

    <!--jackson相關(guān)依賴 Springmvc@responsBody注解使用jackSon-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.11.3</version>
    </dependency>

（2）@responsBody可以放在返回值前面

（3）設置當前方式的日期轉(zhuǎn)化格式需要使用注解

//jackson SpringMVC內(nèi)置的
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
//fastjson 阿里的
@JSONFiled(format="yyyy-mm-dd")

解決辦法：在實體類的屬性Date加入：@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")

設置后結(jié)果：

4、@ResponseBody案例：通過動態(tài)獲取id查詢用戶并在頁面顯示結(jié)果

（1）前端頁面動態(tài)獲取id，通過Ajax實現(xiàn)異步傳輸id值到Controller層

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $("#del").click(function () {
                $.get("${pageContext.request.contextPath}/user/showById?id=" + $("input[name='id']").val(), function (result) {
                    console.log(result);
                    // 創(chuàng)建ul標簽
                    var ul = $("<ul></ul>");
                    //    創(chuàng)建li當前獲取到的值
                    var idLi = $("<li>" + result.id + "</li>");
                    var usernameLi = $("<li>" + result.username + "</li>");
                    var passwordLi = $("<li>" + result.password + "</li>");
                    var salaryLi = $("<li>" + result.salary + "</li>");
                    var birthdayLi = $("<li>" + result.birthday + "</li>");
                //    將li子標簽添加到ul上
                    ul.append(idLi);
                    ul.append(usernameLi);
                    ul.append(passwordLi);
                    ul.append(salaryLi);
                    ul.append(birthdayLi);
                    $("#body").append(ul)
                }, "json");
            })
        })
    </script>
</head>
<body id="body">

ID：<input type="text" name="id" placeholder="請輸入用戶的ID">
<input type="button" name="id" value="提交" id="del">
</body>
</html>

（2）控制層java代碼

  @RequestMapping("showById")
    public  @ResponseBody User showUserById(HttpServletResponse response,Integer id) throws IOException {

        User user1 = new User(1,"王恒杰1","123",2000d,new Date());
        User user2 = new User(2,"王恒杰2","123",20000d,new Date());
        User user3 = new User(3,"王恒杰3","123",200000d,new Date());
        User user4 = new User(4,"王恒杰4","123",2000000d,new Date());
        User user5 = new User(5,"王恒杰5","123",20000000d,new Date());
        List<User> users = Arrays.asList(user1, user2, user3, user4, user5);
        for (User user : users) {
            if(id.equals(user.getId())){
                return  user;
            }
        }
        return null;

    }

（3）效果展示圖

總結(jié)

到此這篇關(guān)于SpringMVC和Ajax交互的文章就介紹到這了,更多相關(guān)SpringMVC和Ajax交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

軟件下載

源碼下載

軟件編程

網(wǎng)絡編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

SpringMVC和Ajax的交互詳解(手工處理)

目錄

一、ajax的實現(xiàn)

1、同步請求和異步請求

2、Ajax實現(xiàn)異步請求

二、SpringMVC和AJAX交互（手工處理）

1、案例：使用Ajax形式查詢所有用戶

三、SpringMVC和AJAX交互（@responseBody注解實現(xiàn)）

1、SpringMVC提供注解：@responseBody

2、使用@ResponseBody替代手工處理（使用Ajax形式查詢所有用戶）

3、@responsBody注意事項

4、@ResponseBody案例：通過動態(tài)獲取id查詢用戶并在頁面顯示結(jié)果

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

SpringMVC和Ajax的交互詳解(手工處理)

目錄

一、ajax的實現(xiàn)

1、同步請求和異步請求

2、Ajax實現(xiàn)異步請求

二、SpringMVC和AJAX交互（手工處理）

1、案例：使用Ajax形式查詢所有用戶

三、SpringMVC和AJAX交互（@responseBody注解實現(xiàn)）

1、SpringMVC提供注解：@responseBody

2、使用@ResponseBody替代手工處理（使用Ajax形式查詢所有用戶）

3、@responsBody注意事項

4、@ResponseBody案例：通過動態(tài)獲取id查詢用戶并在頁面顯示結(jié)果

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

1、同步請求和異步請求

二、SpringMVC和AJAX交互（手工處理）

1、案例：使用Ajax形式查詢所有用戶

三、SpringMVC和AJAX交互（@responseBody注解實現(xiàn)）

1、SpringMVC提供注解：@responseBody

2、使用@ResponseBody替代手工處理（使用Ajax形式查詢所有用戶）

3、@responsBody注意事項