ajax请求整理(一) 2021.05.12

最新推荐文章于 2024-03-02 11:28:57 发布

zzn的进阶笔记

最新推荐文章于 2024-03-02 11:28:57 发布

阅读量180

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_49092494/article/details/116722041

版权

JavaWeb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

关于整理Ajax请求的整理.
·····首先Ajax就是起一个异步不刷新页面的作用，就只是局部刷新,地址栏不变，归纳为一句话就是:
·····AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
首先我们用的是jQuery的Ajax的一些方法来把服务端上的东西展示出来，关于导入jQuery自己出了很多bug，先总结一下：
当时$.post一直报undefined自己明明确确的是导入了jquery的配置文件但是就是一直报错，最后花了接近3个小时解决了这个bug，细节看图：

首先引入jquery文件
在这里插入图片描述
然后看以下流程，这个图片借用的别人的。

最后下载就行了，这个只能确保jquery的ajax以及它的方法可以被调用，但是显示到前端必须要引入jquery的文件，否则js前端会报错，这里就欧克了。

还有一个非常重要的点就是配置静态资源，不然js文件根本加载不进去
静态资源执行的逻辑是因为使用了springmvc框架，通过DispatcherServlet来捕获所有的请求，如果不加静态资源过滤的情况它就不会去加载js，css，以及htm等静态文件

 <!--静态资源过滤 不配这个js加载不进去-->
    <mvc:default-servlet-handler />

还有一个html文件展示，就是点击框框搜索提交但是并不刷新地址栏不会有任何变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframec测试体验页面无刷新</title>

    <script>
        function go(){
            var url = document.getElementById("url").value;
            document.getElementById("iframe1").src=url;
        }
    </script>
</head>
<body>
<div>
    <p>请输入地址:</p>
    <p>
        <input type="text" id="url" value="https://blog.csdn.net/ckc_666/article/details/82849813">
        <input type="button" value="提交" onclick="go()">
    </p>

</div>
<iframe id="iframe1" style="width: 100%;height: 500px" ></iframe>
</body>
</html>

在这里插入图片描述

代码逻辑就不用咋讲了，反正主要就是Ajax+jquery来实现，页面不刷新的这些问题。代码展示一波！

这是主页面代码，主要展示失去焦点onblur后立即出现一个请求，像百度一样。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World</title>

    <script type="text/javascript" src="<c:url value="/statics/js/jquery-3.4.1.js"/>"></script>
    <script>

        function a(){
            $.post({
                url:"${pageContext.request.contextPath}/a1",
                data:{"name":$("#username").val()},
                success:function (data){
                    alert(data);
            }
            })
        }

    </script>
</head>
<body>

<%--失去焦点的时候,发起一个请求到后台--%>
用户名:<input type="text" id="username" onblur="a()"/>
</body>
</html>

在这里插入图片描述
对应的后端Java代码！

package cn.com.zzn.controller;

import cn.com.zzn.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
public class AjaxController {
/**关于ajax异步不刷新当前页面,地址栏不变*/

    @RequestMapping("/t1")
    public String test(){
        return "hello";
    }
    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param=>"+name);
        if ("zzn".equals(name)){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }
    @RequestMapping("/a2")
    public List<User> a2(){
        List<User> userList = new ArrayList<User>();
        userList.add(new User("zzn说Java",20,"男"));
        userList.add(new User("zzn2说Java",19,"男"));
        userList.add(new User("zzn3说Java",18,"男"));
        return userList;
    }
}

最后全局整理一波！

在这里插入图片描述
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>

    <!--spring自带的过滤器-->
    <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>

resources包下的

<?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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--自动扫描指定的包，下面所有的注解交给IOC容器管理-->
    <context:component-scan base-package="cn.com.zzn.controller"/><!--开启注解-->
    <!--    <mvc:default-servlet-handler />-->
    <!--    <mvc:annotation-driven />-->
    <!--以上的代码是定死的，写web项目时不需要管-->

    <!--静态资源过滤 不配这个js加载不进去-->
    <mvc:default-servlet-handler />

    <mvc:annotation-driven/>

    <!--    &lt;!&ndash; 视图解析器 &ndash;&gt;-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          id="internalResourceViewResolver">
        <!-- 前缀 -->
        <property name="prefix" value="/WEB-INF/jsp/" />
        <!-- 后缀 -->
        <property name="suffix" value=".jsp" />
    </bean>
    <!--    <bean id="/hek" class="cn.com.zzn.controller.ControllerTest1"/>&lt;!&ndash;类似于进入请求到这个servlet页面&ndash;&gt;-->
</beans>

zzn的进阶笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax请求整理(一) 2021.05.12

关于整理Ajax请求的整理.·····首先Ajax就是起一个异步不刷新页面的作用，就只是局部刷新,地址栏不变，归纳为一句话就是:·····AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。首先我们用的是jQuery的Ajax的一些方法来把服务端上的东西展示出来，关于导入jQuery自己出了很多bug，先总结一下：当时$.post一直报undefined自己明明确确的是导入了jquery的配置文件但是就是一直报错，最后花了接近3个小时解决了这个bug，细节看图：首先引入jque
复制链接

扫一扫

专栏目录