jQuery ajax 簡單的例項
阿新 • • 發佈：2018-12-13
通過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(); //頁面載入完成就執行該方法 });
後端對應的請求方法（專案為springboot專案）
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頁面顯示效果
