Ajax异步请求数据下拉框
在做项目的时候，时常需要在后台获取一些数据，但是在若是在不刷新页面的前提下，就需要使用Ajax技术实现异步数据的请求。就比如：现在在页面上有一个下拉框，下拉框中的数据是需要来自数据库的，所以，我总不能每一次请求该页面时，都需要先执行controller中的处理，这样的话，会发现就是死情况、死代码，所以需要使用Ajax异步请求后台数据。
先看最终的结果显示：
如图中的下拉框就是我使用ajax实现请求的。那是如何做的呢？具体的执行，直接上代码：
第一、既然是数据库信息，就先查询数据库
mapper.xml
<select id="getAllStudentGradeMapper" resultType="com.hui.pojo.StudentType"> select * from splitpage.studenttype; </select>
mapper接口
/** * 返回所有的学生信息（用于返回所有的学生年级类型） */ List<StudentType> getAllStudentGradeMapper();
dao层的作用就是返回需要查询的数据（这个简单无需多言）
第二、service业务层
接口与接口实现类的代码：
import java.util.List; public interface StudentTypeService { List<StudentType> getAllStudentTypeService(); }
import java.util.List; @Service public class StudentTypeServiceImpl implements StudentTypeService{ @Autowired private StudentsMapper studentsMapper; public List<StudentType> getAllStudentTypeService() { return studentsMapper.getAllStudentGradeMapper(); } }
现在业务层的作用就是调用dao层的代码（简单，无需多言）
第三、controller层
import java.util.List; @RestController @RequestMapping("/admin") public class StudentTypeController { @Autowired private StudentTypeService studentTypeService; @RequestMapping("/listType") public List<StudentType> getStudentTypeController() { System.out.println("异步的ajax请求数据"); List<StudentType> typeService = studentTypeService.getAllStudentTypeService(); System.out.println("返回的学生数据类型 ： " + typeService); return typeService; } }
注意：@RestController注解的作用：
controller层的作用就是调用service层的代码，然后将list集合返回给前端。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
前端部分实现：
在后端controller类中，会仔细看到请求路径：/admin/listType
先将上面显示的图片的所有的jsp代码展示出来：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
</head>
<body>
<%-- 搜索区域的设计 --%>
<form class="layui-form" action="">
<div class="layui-form-item" style="margin-top: 30px">
<label class="layui-form-label">输入关键字</label>
<div class="layui-input-inline">
<input type="text" name="title" style="width: 450px" required lay-verify="required" placeholder="请输入关键字搜索..." autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择年级</label>
<div class="layui-input-inline">
<select name="studentType" lay-verify="required">
<option value="">请选择...</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!-- 表头工具栏 -->
<script type="text/html" id="headbar">
<a class="layui-btn layui-btn-xs" lay-event="select"><i class="layui-icon layui-icon-file">新增</i></a>
<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">修改</i></a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">删除</i></a>
</script>
<%--数据表格主体--%>
<table id="demo" lay-filter="test"></table>
<!-- 表行工具栏 -->
<script type="text/html" id="hangbar">
<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">编辑</i></a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">删除</i></a>
</script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
layui.use(['table','form'], function(){
var table = layui.table;
var form = layui.form;
var $ = layui.$;
//第一个实例
table.render({
elem: '#demo'
,height: 380
,url: '/admin/splitByMap' //数据接口
,page: true //开启分页
,toolbar:"#headbar"
,limit:6
,limits:[10,15,20,30,40,50,100]
,cols: [[ //表头
{field: 'studentID', title: '学号', width:140,align:"center"}
,{field: 'studentName', title: '姓名', width:140,align:"center"}
,{field: 'studentSex', title: '性别', width:140,align:"center"}
,{field: 'studentPhone', title: '手机号', width:140,align:"center"}
,{field: 'studentAddress', title: '地址', width:140,align:"center"}
,{field: 'studentProfession', title: '专业', width:140,align:"center"}
,{field: 'studentGrade', title: '年级', width:140,align:"center"}
,{title: '年级',toolbar:'#hangbar', width:160,align:"center"}
]]
});
//发送异步Ajax请求查询账单类型
$.get("/admin/listType",function (result) {
console.log(result);
var html = "";
for (let i = 0; i < result.length; i++) {
html += "<option value=' "+ result[i].id +"'>" + result[i].studentType + "</option>";
}
//将网页代码追加到下拉列表中
$("[name='studentType']").append(html);
//更新渲染select下拉框
form.render("select");
},"json");
});
</script>
</body>
</html>
我使用颜色圈起来的都是需要注意的，首先分别介绍：
这是一个异步请求的核心前端代码：
//发送异步Ajax请求查询账单类型 $.get("/admin/listType",function (result) { console.log(result); var html = "";
这里使用for循环是因为后台返回的是List<>集合 for (let i = 0; i < result.length; i++) { html += "<option value=' "+ result[i].id +"'>" + result[i].studentType + "</option>"; } //将网页代码追加到下拉列表中 $("[name='studentType']").append(html); //更新渲染select下拉框 form.render("select"); },"json");
会发现里面的form需要引入from的变量。
浙公网安备 33010602011771号