正文
ajax 异步请求 代码
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setAttribute("path", request.getContextPath());
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="${path }/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("[name='name']").blur(
function(){
//获取文本框输入的内容
var name=$("#name").val();
//2.使用ajax发送用户名 select * from student where name=?如果存在提示用户名被占用
$.ajax({
type:"get",//提交方式
data:{name:name},//查询的参数
url:"${path}/dorm?method=ajaxname",//提交的路径
dataType:"text",//返回的类型 是Text文本
success:function(result){
if(result==0) {
$("#msg").html("用户名不可以使用");
}else{
$("#msg").html("用户名可以使用");
}
}
})
})
})
function getdormid() {
var id=$("#id").val();
$.get("${path}/dorm?method=JSONDormList",{id:id},function(data){
var str="";
$.each(data, function(i, obj) {
if(obj.remaining_number!=0){
str += "<option value="+obj.id+">" + obj.code + "</option>";
}
});
$("#dorm").html(str);
}, "json"); }
</script>
</head>
<body>
<form action="" method="post">
<table align="center">
<tr align="center">
<td colspan="8"><h2>宿舍管理</h2>
<td>
</tr>
<tr>
<td>姓名:</td><td><input type="text" name="name" id="name"><span id="msg"></span></td>
</tr>
<tr>
<td>年龄:</td><td><input type="text" name="age"></td>
</tr>
<tr>
<td>性别:</td><td><input type="radio" name="sex" value="0" checked="checked">男
<input type="radio" name="sex" value="1">女</td>
</tr>
<tr>
<td>地址:</td><td><input type="text" name="address"></td>
</tr>
<tr>
<td>电话:</td><td><input type="tel" name="tel"></td>
</tr>
<tr>
<td>宿舍编号:</td><td>
<select name="id" id="id" onchange="getdormid()">
<option value="11">请选择</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
<select name="dorm" id="dorm" >
<option></option>
</select>
</tr>
<tr><td><input type="submit" value="添加"></td></tr>
</table>
</form>
</body>
</html> ----------------------------------------------------------------------------------------
//异步请求 查询 用户名是否存在
private void getStudenName(HttpServletRequest request, HttpServletResponse response) {
// 获取参数
String name = request.getParameter("name");
// 调用方法
Student stu = studentService.ajaxname(name);
System.out.println(stu);
if (stu != null) {
// 如果对象不是null的 说明姓名已经占用
try {
response.getWriter().print(0);
} catch (IOException e) {
e.printStackTrace();
}
} else {
try {
response.getWriter().print(1);
} catch (IOException e) {
e.printStackTrace();
}
} } ----------------------------------------------------------------------------------------
// 查询宿舍集合 传入id 二级联动
private void getJSONDormList(HttpServletRequest request, HttpServletResponse response) {
//调用方法
String id= request.getParameter("id");
List<Dorms> dormList=studentService.getJSONDormList(id);
System.out.println(dormList.size()+"成都");
Object jsonList = JSON.toJSON(dormList);
PrintWriter out;
try {
out = response.getWriter();
out.print(jsonList);
} catch (Exception e) {
e.printStackTrace();
}
}
