各类后端技术汇总点这里
编写前端代码
这里用的是jquery提供的ajax,所以需要先导入jquery文件。
导入方式如下:
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js" type="text/javascript">
这里由于是在springmvc的环境下写的,所以需要配置允许访问静态资源。在springmvc.xml中添加
<!--全部放行-->
<mvc:default-servlet-handler/>
目的是为了实现在浏览器文本框中输入账号以后,鼠标移开触发失去焦点事件。调用js中的方法:用ajax进行前后端数据交互后在浏览器中显示输入账号是否存在。
完整的代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function fun1() {
//这里用的是post方式访问的
$.post({
//访问地址,对应后端Controller中的位置
url:"${pageContext.request.contextPath}/demo1",
//获取文本框中内容,以json方式发出去
data:{"name":$("#name_id").val()},
//后端成功返回值后,调用回调函数,修改界面内容
success:function (data) {
if (data.toString() == "账号存在")
$("#nameInfo").css("color","green")
else
$("#nameInfo").css("color","red")
$("#nameInfo").html(data)
}
})
}
</script>
</head>
<body>
账号:<input id="name_id" name="name" type="text" onblur="fun1()"/><span id="nameInfo"></span><br/>
</body>
</html>
编写后端代码
注意:在RequestMapping中要指定用 produces来指定返回值类型和返回值编码。由于我们这里返回的是字符串,如果不添加会返回中文乱码,显示?。当然也有其他的一些方式来设置编码。这里的注解如下:
@RequestMapping(value = "/demo1", produces = "text/html;charset=UTF-8;")
完整代码:
package com.hhh.ajax;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@ResponseBody
public class AjaxTestController {
@RequestMapping(value = "/demo1", produces = "text/html;charset=UTF-8;")
public String demo1(String name ){
String msg="";
if (name!=null){
System.out.println("name");
//这里默认要输入存在的账号为aaa
if ("aaa".equals(name)) {
msg = "账号存在";
}
else {
msg = "账号不存在";
}
}
System.out.println(msg);
return msg;
}
}
结果展示
请求地址和页面如下:
输入aaa后,鼠标点击其他地方让文本框失去焦点
输入其他内容