JQuary 的 AJAX 拼接下拉框和表单

版权声明：A_芦瑞华_i_DO.欢迎转载 https://blog.csdn.net/weixin_43067223/article/details/84398062

需求

后台到数据库请求数据，显示到下拉框。

controller层

• 代码：
• springboot框架的RestController注解代替了Controller，下面所写的方法返回的都是json字符串
  

    /**
     * 部门列表方法
     * @return
     */
    @RequestMapping("/list")
    public Object list(){
        List<Map> list = deptService.getList();
        return list;
    }

• html
• 代码：

//获取车辆车牌号
	$(function(){
		//alert("111");
		var str="";
       	$.post(
 			//url
 			"autoOrder/getCarMsg.do",
 			//不携带参数
 			//回调函数
 			function(data){
 				if(data!=''){
 					for(var i = 0;i<data.length;i++){
	 					str += "<option  value = '"+data[i].number+"'>"+data[i].number+"</option>";	//拼接option
 					}
 					$("#number").append(str);
 				}
 			},
 			//数据类型
 			"json"
 		);

	});

需求：拼接表单

<center>

<h3>员工列表</h3>
<table border="1">
    <thead><th>员工编号</th><th>姓名</th><th> 工作 </th><th>薪水</th><th> 雇佣日期</th></thead>
    <tbody id="tb"></tbody>
</table>
</center>
<script>

    $(function(){
        $.ajax({
            url:"/sb/emp/proList",
            data:{deptNo:20},
            type:"post",
            dataType:"json",
            success:function(data) {
                var str = '';
                alert(data);
                for (var i = 0; i < data.length; i++) {
                    str += "<tr><td>"+data[i].empNo+"</td><td>"+data[i].ename+"</td><td>"+data[i].job+"</td><td>"+data[i].salary+"</td><td>"+data[i].hireDate+"</td></tr>"
                }
                $("#tb").append(str);
            }
        });

    });
</script>
</body>