Web1.0时代
-
早期网站,登录,如果登录失败,需要刷新页面,才能重新登录;不点击提交按钮,就不知道自己密码错了;
-
现在大多数网站,都是局部刷新,不刷新整个页面的情况下,实现页面更新;
-
注册的时候,发现手机号已经注册过了,但是你只是输入了,没有提交,然后他就提示了。
Web2.0时代,最重要的一个因素就是Ajax
Ajax
异步无刷新请求
jQuery是一个库;js的大量函数(方法)
首先新建一个普通module的ajax,然后添加web项目
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
version="5.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>
applicationContext.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: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="com.liang.controller"/>
<!--记得配置静态资源过滤-->
<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>
</beans>
如果实在照不出问题配置和代码都没错,去看配置文件,有没有问题
导入静态资源3.14.min.js
使用第三方东西,记得配置静态资源过滤
<!--记得配置静态资源过滤-->
<mvc:default-servlet-handler/>
是双闭合,谨记!
void无返回值
data键值对,我们是从data取数据,而不是表单
流程
JavaScript属性
alert:弹窗
console.log:控制台打印
如果有问题记得检查相对应代码有没有写错啊
index.jsp代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery.3.14.js"></script>
<script>
function a(){
$.post({
url:"${pageContext.request.contextPath}/a1",
data:{'name':$("#username").val()},
success: function (data,status){
console.log("data=>"+data);
console.log("status=>"+status);//200 400 500
alert(data);
}
});
}
</script>
</head>
<body>
<%--失去焦点的时候,发起一个请求(携带信息)到后台--%>
用户名:<input type="text" id="username" onblur="a()">
</body>
</html>
controller api代码
package com.liang.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@RestController
public class AjaxController {
@RequestMapping("/t")
public String test(){
return "hello";
}
@RequestMapping("a1")
public void a1(String name, HttpServletResponse response) throws IOException {
System.out.println("a1:param=>"+name);
if ("liangwh".equals(name)){
response.getWriter().print("true");
}else {
response.getWriter().print("false");
}
}
}
确定后台能打印数据后,再下一步请求数据
.2.然后建一个建一个pojo包。User实体类
package com.liang.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private String name;
private int age;
public String sex;
}
controller
@RequestMapping("a2")
public List<User> a2(){
List<User> userList=new ArrayList<User>();
//添加数据
userList.add(new User("梁伟浩1",1,"男"));
userList.add(new User("梁伟浩2",2,"男"));
userList.add(new User("梁伟浩3",3,"女"));
return userList;
}
test2.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<script src="${pageContext.request.contextPath}/statics/js/jquery.3.14.js"></script>
<script>
$(function (){
$("#btn").click(function (){
/*
$.post(url,param[可以省略],success)
*/
$.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>
<input type="button" value="加载数据" id="btn">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
<%--数据:后台--%>
</tbody>
</table>
</body>
</html>
Ajax验证用户名体验
#取值不要漏了啊
login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery.3.14.js"></script>
<script>
function a1(){
$.post({
url: "${pageContext.request.contextPath}/a3",
data:{"name":$("#name").val()},
success:function (data){
if (data.toString()==='ok'){
$("#userInfo").css("color","green");
}else {
$("#userInfo").css("color","red");
}
$("#userInfo").html(data);
}
})
}
function a2(){
$.post({
url: "${pageContext.request.contextPath}/a3",
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>
<p>
用户名:<input type="text" id="name" onblur="a1()"><%--失去焦点事件--%>
<span id="userInfo"></span>
</p>
<p>
密码:<input type="text" id="pwd" onblur="a2()">
<span id="pwdInfo"></span>
</p>
</body>
</html>
controller
@RequestMapping("/a3")
public String a3(String name,String pwd){
String msg = "";
if (name != null){
//admin 这些数据应该都在数据库中查
if ("admin".equals(name)){
msg="ok";
}else {
msg="用户名有误";
}
}
if (pwd != null){
//admin 这些数据应该都在数据库中查
if ("123321".equals(pwd)){
msg="ok";
}else {
msg="密码有误";
}
}
return msg;
}
Json
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
前后端分离,数据交互变得异常重要;json就是王者!
首先创建一个springmvc项目,创建一个index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//编写一个对象
var user = {
name: "liangwh",
age: 18,
sex: "男"
}
//输出一下这个对象
console.log(user);
//将js对象转为json字符串;
var str = JSON.stringify(user);
console.log(str); //{"name":"liangwh","age":18,"sex":"男"}
//将一个字符串转换变成对象
var obj = JSON.parse(str);
console.log(obj);
</script>
</body>
</html>
pom.xml依赖
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>springmvc-ajax-json</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>springmvc-ajax-json Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>springmvc-ajax-json</finalName>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
将js对象转为json字符串;
var str = JSON.stringify(user);console.log(str); {“name”:“liangwh”,“age”:18,“sex”:“男”}最后那里不用逗号
将一个字符串转换变成对象 var obj = JSON.parse(str); console.log(obj);