jquery easui datagrid detailview 动态加载不调用 ajax前端动态加载

转载

西门吹雪 2023-12-16 22:59:55

文章标签 ajax javascript 前端数据数据库 文章分类 jQuery 前端开发

下一篇jquery,ajax动态从数据库加载数据并自动选中复选框

要被前端逼疯了

收获了一些前端小技巧,学起来

js代码

总结的最近接触到的ajax中的小技巧,不会前端真的好痛苦

小技巧1----请求前的斜杠(/)

url: “/user/list”,ajax路径最前面加上/表示从根目录开始,不加会自动拼接上当前目录例如/html/User/user/list

小技巧2----接受表单中大量参数发送ajax时

$("#myForm").serialize()方式是id为myForm的表单中接收的所有键值对

小技巧3----下拉框动态获取数据库中的值(下面有详细的)

success: function (list) {//list为后台传过来的数据
               $("#role").empty();//重点1,第一步,把id为role的标签置空
               for (var i = 0; i < list.length; i++) {//重点2,第二步,for循环追加
                   //把数据库中的数据追加到id为role的标签中
                   $("#role").append('<option value=' + list[i].rId + '>' + list[i].rName + '</option>');
               }
       		}

小技巧4----增加修改的请求类型也是POST

type: "POST",//这里必须写POST不然后端会接收不到数据
url: "/user/"+uId,
data: $("#myForm").serialize()+"&_method=PUT",//后台用PUT
//data: $("#myForm").serialize()+"&_method=DELETE",//后台用DELETE

小明在写代码时遇到这样一个需求,新增用户时有一个角色下拉框,角色是数据库中的角色表中的数据,即数据是动态从数据库中获取的

想像成功图

jquery easui datagrid detailview 动态加载不调用 ajax前端动态加载_数据

下拉框代码

jquery easui datagrid detailview 动态加载不调用 ajax前端动态加载_javascript_02

<tr>
            <td class="tableleft">角色</td>
            <td>
                <!--一个普通的下拉框-->
            	<select name="role" id="role">
        			<option value="">--请选择--
       			 </select>
        	</td>
        </tr>

下拉框动态获取数据的ajax,精简版在最上面

<script>
	$(function () {
	 $.ajax({
            type: "GET",//请求类型,get和post都可,但必须前后端一致,之前我写的post后端接收的是get,报405
            url: "/user/role",//请求地址前后端一致
            dataType: "json",//参数类型是json,不过没有参数
            data: "",//参数可以用""和{参数1:值1,参数2:值2}或者$("#myForm").serialize()三种方式
            //$("#myForm").serialize()方式是id为myForm的表单中接收的所有键值对,形如方式2
            success: function (vo) {//返回的vo是小明封装的结果类型(不是重点)
                if(vo.code==200) {
                    var list = vo.pageInfo.list;//从返回的结果对象中得到角色(看个人返回值类型,这个一定要看自己的)
                    $("#role").empty();//重点1,第一步,把id为role的标签置空
                    //前端要让用户必须选择身份,即必须有value,太麻烦直接不要这行(怎么简单怎么来)
                    //$("#role").append("<option value=''>--请选择--</option>");
                    for (var i = 0; i < list.length; i++) {//重点2,第二步,for循环追加
                        //把数据库中的数据追加到id为role的标签中
                        $("#role").append('<option value=' + list[i].rId + '>' + list[i].rName + '</option>');
                    }
                }else{
                    alert("添加失败！"+vo.msg);
                }

            }
        });
	});
</script>