springBoot-ajax

简介

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作，是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用

ajax本质就是 XMLHTTPRequest，方法如下

jQuery.ajax{
    url:待载入页面的URL地址
    data:待发送的key/vlalue 参数
    success:载入成功时回调函数
    dataType:返回内容格式
}

实例

1. 下载Jquery后导入项目static/js中
2. 编写controller/AjaxController.java

package com.gui.controller;

import com.gui.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@RequestMapping("/ajax")
@Controller
public class AjaxController {

    @RequestMapping("/a")
    public void ajax(String name, HttpServletResponse response) throws IOException {
        if ("admin".equals(name)){
            response.getWriter().println("ture");
        }else{
            response.getWriter().println("false");
        }
    }
    @RequestMapping("/b")
    @ResponseBody
    public List<User> ajax2(){
        List<User> list = new ArrayList<>();
        list.add(new User("1","gui","男"));
        list.add(new User("2","jie","男"));
        list.add(new User("3","xu","男"));
        return list;
    }

}

3. 编写config/MyMvcConfig.java 自定义视图解析器

package com.gui.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.View;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.util.Locale;

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

    //ViewResolver 需要实现视图解析器接口的类
    @Bean
    public ViewResolver myViewResolver(){
        return new MyViewResolver();
    }

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/index2").setViewName("index2");
        registry.addViewController("/index").setViewName("index");
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index3").setViewName("index3");
    }

    //自定义一个自己的视图解析器MyViewResolver
    public static class MyViewResolver implements ViewResolver{

        @Override
        public View resolveViewName(String s, Locale locale) throws Exception {
            return null;
        }

    }
}

4. 编写index2.html完成前端数据传递到后端

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-3.6.0.js}"></script>
</head>
<body>

<script th:inline="javascript">
    function a1(){
        var modeljson={
            "name": document.getElementById("txtName").value
        }
        $.ajax({
            url:[[@{/ajax/a}]],
            data:modeljson,
            success:function (data,status){
                console.log(data)
                console.log(status)
            }
        })
    }
</script>

<div>
    userName:
    <input type="text" id="txtName" onblur="a1()">
</div>
</body>
</html>

结果显示

4. 编写index3.html完成后端数据传递到前端

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-3.6.0.js}"></script>
</head>
<body>

<input type="button" id="btn" value="get">
<table width="80%" align="center">
    <tr>
        <td>id</td>
        <td>name</td>
        <td>sex</td>
    </tr>
    <tbody id="context"></tbody>

    <script th:inline="javascript">
        $(function () {//页面加载完执行
            $("#btn").click(function () {
                $.post({
                    url: "/ajax/b",
                    success: function (data) {
                        console.log(data);
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            html += "<tr>" +
                                "<td>" + data[i].id + "</td>" +
                                "<td>" + data[i].name + "</td>" +
                                "<td>" + data[i].sex + "</td>" +
                                "</tr>"
                        }
                        $("#context").html(html)
                    }
                })
            })
        })
    </script>
</table>
</body>
</html>

结果显示

posted @ 2021-10-15 20:35  keacua  阅读(481)  评论(0)    收藏  举报