就实现简单表单验证:
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../JQuery/3.3.1/dist/jquery.min.js"></script>
<script src="jsonp.js"></script>
<style>
#txtName{
margin-right: 10px;
}
span{
color: red;
}
</style>
<script>
$(function () {
$('#txtName').blur(function () {
$.get({
url:"http://localhost:8080/ajax/a1",
data:{
"name":$(this).val()//这个name必须和后端的名称一样
},
success:function (data) {
$('span').text(data)
}
})
})
})
</script>
</head>
<body>
<input type="text" id="txtName"><span></span>
</body>
</html>
关于JQuery的AJAX请求分析,在我的JQuery笔记中已经介绍了几种方法(有需要学习的我帮你们定位过去):
https://blog.csdn.net/m0_57249797/article/details/119817107?spm=1001.2014.3001.5501#jquery07
然后就是后端代码SpringBoot:
启动类:
@SpringBootApplication
public class HelloWorldMainApplication {
public static void main(String[] args) {
SpringApplication.run(HelloWorldMainApplication.class,args);
}
}
Controller类:
@RestController
@RequestMapping("/ajax")
public class AjaxController {
@RequestMapping("/a1")
//这个name必须和前端请求发送数据的name名称一样
public void ajax(String name, HttpServletResponse response, HttpServletRequest request) throws IOException {
if ("admin".equals(name)){
response.getWriter().println("输入正确");
}else {
response.getWriter().println("输入错误");
}
}
}
这些都挺简单的,这里我主要是想记录一下这个问题:
跨源请求解决方案1:
添加以下代码,来设置相关响应头:
//response.setContentType("application/json;charset=UTF-8");
response.setContentType("application/String;charset=UTF-8");
//response.setContentType("text/plain;charset=UTF-8");
//上面的代码为响应的数据类型设置代码
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("P3P", "CP=CAO PSA OUR");
if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
response.addHeader("Access-Control-Max-Age", "120");
}
最终我封装成方法:
@SpringBootApplication
public class HelloWorldMainApplication {
public static void main(String[] args) {
SpringApplication.run(HelloWorldMainApplication.class,args);
}
public static void lan(HttpServletResponse response, HttpServletRequest request){
//response.setContentType("application/json;charset=UTF-8");
response.setContentType("application/String;charset=UTF-8");
//response.setContentType("text/plain;charset=UTF-8");
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("P3P", "CP=CAO PSA OUR");
if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
response.addHeader("Access-Control-Max-Age", "120");
}
}
}
然后调用即可:
@RestController
@RequestMapping("/ajax")
public class AjaxController {
@RequestMapping("/a1")
public void ajax(String name, HttpServletResponse response, HttpServletRequest request) throws IOException {
HelloWorldMainApplication.lan(response,request);//调用
if ("admin".equals(name)){
response.getWriter().println("输入正确");
}else {
response.getWriter().println("输入错误");
}
}
}
跨源请求解决方案2:
利用jquery的jsonp插件
跨源请求解决方案3:
写一个springMVC的拦截器