ajax实例
通过jQuery ajax实现从服务器查询数据，返回给前端并显示到html页面
html文件
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>使用 jQuery validate 表单验证</title>
<script th:src="@{/scripts/jquery-3.3.1.min.js}"></script>
<script th:src="@{/scripts/jquery.validate.min.js}"></script>
<script th:src="@{/scripts/messages_zh.min.js}"></script>
<script th:src="@{/scripts/user/login.js}"></script>
</head>
<body>
<form id="form1" action="/userLogin">
<input type="text" id="userName" class="userName" name="userName"><br>
<input type="email" id="email" name="email"><br>
<select id="depertmentId" name="departmentId">
</select><br>
<input type="password" id="password" class="password" name="password"><br>
<input type="submit" value="login">
</form>
</body>
</html>
login.js文件
function findAllDepts() {
$.ajax({
async : false, //表示请求是否异步处理
type : "post", //请求类型
url : "/getDepts",//请求的 url地址
dataType : "json",//返回的数据类型
success: function (data) {
console.log(data); //在控制台打印服务器端返回的数据
for(var i=0;i<data.length;i++){
console.log(data[i].deptId+" "+data[i].deptName);
}
$("select[name='depertmentId']").empty();
$("select[name='depertmentId']").APPend('<option value="">——请选择——</option>');
for(var i=0;i<data.length;i++){
var html ='<option value="'+data[i].deptId+'">';
html +=data[i].deptName + '</option>';
$("select[name='departmentId']").append(html); //将数据显示在html页面
}
},
ERROR:function (data) {
alert(data.result);
}
});
};
$(document).ready(function () {
findAllDepts(); //页面加载完成就执行该方法
});
package com.njxz.demo.controller;
import com.njxz.demo.domain.Department;
import com.njxz.demo.domain.User;
import com.njxz.demo.service.IUserService;
import org.apache.iBATis.annotations.Param;
import org.springframework.web.bind.annotation.requestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
@RestController
public class UserController {
@Resource
private IUserService userService;
@RequestMapping("/getDepts")
public List<Department> getDepts(){ //查找所有部门
List<Department> depts=userService.findAllDepts();
return depts;
}
}
后端返回的对象类
package com.njxz.demo.domain;
public class Department {
private integer deptId;
private String deptName;
public Integer getDeptId() {
return deptId;
}
public void setDeptId(Integer deptId) {
this.deptId = deptId;
}
public String getDeptName() {
return deptName;
}
public void setDeptName(String deptName) {
this.deptName = deptName == null ? null : deptName.trim();
}
}
控制台打印的数据信息
html页面显示效果
相关阅读
压缩 压缩文件 语法 gzip 源文件 1 如压缩 b.txt 使用命令 gzip b.txt 即可 注意 压缩为 .gz 文件 源文件会消失 如果想保留源
前言 笔者从学校做兼职到工作这些年已经开发了或者参与开发了十多套后台管理系统（后面简称BMS），而使用过的BMS就不计其数了。多数情
创建一个最简单的win32应用程序 使用的是vs2013 中文版 首先创建一个win32 应用程序 工程 也可以使用快捷键 Ctrl+Shift +N 创
一、layer的icon样式 以上样式测试代码： layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){
ROM制作工具使用介绍一、准备ROM包说明：本工具支持ROM卡刷包和线刷包，支持常规,dat和img格式的刷机包如果找不到ROM，也可以 选择线上