关于整理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/>
<!-- <!– 视图解析器 –>-->
<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"/><!–类似于进入请求到这个servlet页面–>-->
</beans>