17-Ajax

最新推荐文章于 2023-03-30 17:01:56 发布

xixihaha_coder

最新推荐文章于 2023-03-30 17:01:56 发布

阅读量9.3k

点赞数 1

分类专栏： springmvc 文章标签： springmvc

本文链接：https://blog.youkuaiyun.com/xixihaha_coder/article/details/120113615

版权

springmvc 专栏收录该内容

20 篇文章

订阅专栏

Ajax

application.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
         http://www.springframework.org/schema/beans/spring-beans.xsd
         http://www.springframework.org/schema/mvc
         https://www.springframework.org/schema/mvc/spring-mvc.xsd
         http://www.springframework.org/schema/context
         https://www.springframework.org/schema/context/spring-context.xsd">
    <!--处理器映射器-->
    <context:component-scan base-package="com.kuang.controller"/>
<!--   静态资源过滤   -->
    <mvc:default-servlet-handler/>
    <mvc:annotation-driven/>


<!-- JSON乱码问题配置 -->


    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp" />
    </bean>


</beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

</web-app>

初体验

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>

  </head>
  <body>
用户名: <input type="text" id="username" onblur="a()">
<script>
  function a() {
    $.ajax({
      url: "${pageContext.request.contextPath}/a1",
      data: {"name":$("#username").val()},//name和后端接受的name对应
      success:function (data,status) {
        alert(data);
        console.log("status"+status);
      }
    })
  }
</script>
  </body>

</html>

controller

    @RequestMapping("/a1")
    public  void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:name----->"+name);
        if("zhangsan".equals(name)){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }

Ajax异步加载数据

pojo

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String sex;

}

controller

  @RequestMapping("/a2")
    public List<User> a2(){
      List<User> userList = new ArrayList<User>();
      //添加数据
        userList.add(new User("张三",1,"男"));
        userList.add(new User("李四",1,"男"));
        userList.add(new User("王五",1,"男"));
      return userList;
    }

ajax2.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>
<script>
        $(function () {
            $("#btn").click(function () {
               // console.log("111");
                $.post("${pageContext.request.contextPath}/a2",function (data) {
                    //console.log(data);
                    var html="<>";
                    for (let i = 0; i <data.length; i++) {
                        html+="<tr>"+
                                "<td>"+data[i].name+"</td>"+
                                "<td>"+data[i].age+"</td>"+
                                "<td>"+data[i].sex+"</td>"+
                                "</tr>"
                    }
                    $("#content").html(html);
                })

            })
        });
</script>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">

    </tbody>

</table>
</body>
</html>