jQuery ajax 简单的实例

红太狼 2022-05-09 10:33 172阅读 0赞

通过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>

后端对应的请求方法（项目为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();
        }
    }

控制台打印的数据信息

![70][]

html页面显示效果

![70 1][]

[70]: /images/20220509/00606555570b46c9aa968e28566726de.png
[70 1]: /images/20220509/85e933f0814545a3b5d8b0b35453a651.png