11.1Ajax异步加载数据

最新推荐文章于 2024-05-28 21:47:35 发布

澜色海湾

最新推荐文章于 2024-05-28 21:47:35 发布

阅读量237

点赞数

分类专栏： spring-mvc学习总结文章标签： ajax javascript 前端 java mvc

本文链接：https://blog.csdn.net/m0_52433668/article/details/123155096

版权

spring-mvc学习总结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

11.1Ajax异步加载数据

后端传递数据前端Ajax接受数据，操作Dom元素拼接数据

AjaxControlle.java文件

@RestController
public class AjaxController {
    @RequestMapping(value = "/test1")
    public String test1(String name) {
        if(name.equals("tony")) {
            return "true";
        }else {
            return "faulse";
        }
    }
    @RequestMapping(value = "/a1")
    public List<User> a1() {
        List<User> userList = new ArrayList<User>();
        userList.add(new User("tony","123","1"));
        userList.add(new User("tony2","123","2"));
        userList.add(new User("tony3","123","3"));
        return userList;
    }
    @RequestMapping(value = "/o12")
    public String o12(String name,String pwd) {
//        System.out.println("name="+name);
//        System.out.println("pwd="+pwd);
        String msg = "";
        if(name!=null) {
            if(name.equals("admin")) {
                msg = "ok";
            }else {
                msg = "用户名错误！";
            }
        }
        if(pwd!=null) {
            if(pwd.equals("123")) {
                msg = "ok";
            }else {
                msg = "密码错误";
            }
        }
        System.out.println("msg="+msg);
        return msg;
    }
}

前端index.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <title>ajax测试</title>
    <script>
      function clickthis() {
        $.post({
          url : "${pageContext.request.contextPath}/test1",
          data : {"name":$("#name").val()},
          success : function (data) {
            alert(data);
          }
        })
      }
      $(function () {
          $("#btn").click(function () {
              $.ajax({
                  url : "${pageContext.request.contextPath}/a1",
                  success:function (data) {
                      var html = "";

                      for (var i = 0; i < data.length; i++) {
                          html += "<tr>"+
                          "<td>" + data[i].name + "</td>"+
                          "<td>" + data[i].password + "</td>"+
                          "<td>" + data[i].age + "</td>"+
                          "</tr>"
                      }
                      $("#context").html(html);
                  }
              })
          })
      })
        function o1() {
          $.ajax({
              url : "${pageContext.request.contextPath}/o12",
              data : {"name":$("#username").val()},
              success:function (data) {
                  if(data.toString() === "ok") {
                      $("#nameinfo").css("color","green");
                  }else {
                      $("#nameinfo").css("color","red");
                  }
                  $("#nameinfo").html(data);
              }
          })
        }
function o2() {
            $.ajax({
                url : "${pageContext.request.contextPath}/o12",
                data : {"pwd":$("#pwd").val()},
                success:function (data) {
                    if(data.toString() === "ok") {
                        $("#pwdinfo").css("color","green");
                    }else {
                        $("#pwdinfo").css("color","red");
                    }
                    $("#pwdinfo").html(data);
                }
            })
        }
    </script>
  </head>

  <body>

  <input id="name" type="text">
  <input type="button" value="点击" onclick="clickthis()">


  <input id="btn" type="button" value="加载数据">
  <table>
      <tr>
          <th>用户名</th>
          <th>密码</th>
          <th>年龄</th>
      </tr>
      <tbody id="context">

      </tbody>

  </table>


  用户名：<input id="username" type="text" onblur="o1()"><label id="nameinfo"></label>
<br/>
  密码：<input id="pwd" type="text" onblur="o2()"><label id="pwdinfo"></label>

  </body>
</html>

澜色海湾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.1Ajax异步加载数据

11.1Ajax异步加载数据后端传递数据前端Ajax接受数据，操作Dom元素拼接数据AjaxControlle.java文件@RestControllerpublic class AjaxController { @RequestMapping(value = "/test1") public String test1(String name) { if(name.equals("tony")) { return "true";
复制链接

扫一扫