SpringMVC---Ajax学习

SpringMVC—Ajax学习

我们的征程是星辰大海,而非人间烟尘

文章目录

    • SpringMVC---Ajax学习
      • 1.简介
      • 2.伪造Ajax
      • 3.SpringMVC实现

1.简介

  • 不刷新页面更新网页

  • 在页面加载后从服务器请求数据

  • 在页面加载后从服务器接收数据

  • 在后台向服务器发送数据

  • AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

  • AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

  • Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

  • 在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。

  • Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

  • 就和国内百度的搜索框一样!

  • 传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。

  • 使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。

  • 使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

2.伪造Ajax

我们可以使用前端的一个标签来伪造一个ajax的样子。iframe标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪造ajaxtitle>
    <script type="text/javascript">
        window.onload = function () {
       
            var myDate = new Date();
            document.getElementById('currentTime').innerText = myDate.getTime();
        };
        function LodePage() {
       
            var targetUrl = document.getElementById('url').value;
            console.log(targetUrl);
            document.getElementById("iframePosition").src = targetUrl;
        }
    script>
head>
<body>
    <div>
        <p>请输入要加载的地址:<span id="currentTime">span>p>
        <p>
            <input id="url" type="text" value="https://www.csdn.net/"/>
            <input type="button" value="提交" onclick="LodePage()" />
        p>
    div>
    <div>
        <h3>加载页面位置h3>
        <iframe id="iframePosition" style="width: 100%;height: 500px">
        iframe>
    div>
body>
html>

SpringMVC---Ajax学习_第1张图片

3.SpringMVC实现

实体类user

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
     

   private String name;
   private int age;
   private String sex;

}

我们来获取一个集合对象,展示到前端页面

 @RequestMapping("/a2")
    @ResponseBody
    public List<User> ajax2(){
     
        List<User> users = new ArrayList<>();
        users.add(new User("长江一号", 3, "男"));
        users.add(new User("长江二号", 4, "男"));
        users.add(new User("长江三号", 5, "男"));
        return users;
}

前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>数据回显title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js" >script>
    <script >
        $(function (){
       
            $("#btn").click(function () {
       
                $.post("${pageContext.request.contextPath}/a2",function (data) {
       
                    console.log(data)
                    var html="";
                    for (var i = 0; i <data.length ; i++) {
       
                        html+= "" +
                            "" + data[i].name + "" +
                            "" + data[i].age + "" +
                            "" + data[i].sex + "" +
                            ""
                    }
                    $("#content").html(html);
                });
            })
        })
    script>
head>
<body>
    <input type="button" id="btn" value="获取数据" />
    <table width="80%" align="center" >
        <tr>
            <th>姓名th>
            <th>年龄th>
            <th>性别th>
        tr>
        <tbody id="content">
        tbody>
    table>
body>
html>

成功实现了数据回显!可以体会一下Ajax的好处!

SpringMVC---Ajax学习_第2张图片

你可能感兴趣的:(Spring,ajax,javascript,html)