easyUi 学习笔记 （二 ） 使用tabs 里datagridview 发送ajax请求 不访问后台的问题
这个BUG 我花了一个半小时， 还是看不出哪里的问题， 于是就百度到这么一段话，我需要记住
<======================================================================================================================>
使用tabs标签， 本身这个标签就在一个html里面,
easyui中加载外部界面的组件，例如：panel,window，dailog,tabs等。请确保你引入的界面是一个html片段。
html片段正确的写法再次提醒不要出现<html><head><body>三个标签：
<======================================================================================================================>
标准的html 结构是
<html> <head> <title>这是完整的html结构</title> <script></script> </head> <body> <div>内容</div> </body> </html>
本身tabs 就在标准的html 中， 一般我们写html代码都应该遵循此此结构。而所谓的html片段就是上面完整结构中的内容部分。
虽然我们也会建立一个文件如b.html来保存html片段，但是在这个b.html中我们只需要编写<body>里面的内容不需要在把html的标准结构写出来。
详情请看：http://www.cnblogs.com/summer_adai/p/3548252.html
百度地址
下面是我的代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/page.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <body> <script type="text/javascript" src="${pageContext.request.contextPath }/easyui/datagrid-detailview.js"></script> <script type="text/javascript"> $(function(){ $("#dg").datagrid({ title:'汽车列表', singleSelect:true, fitColumns:true, pagination:true, rownumbers:true, toolbar:'#toolbar', url:'cars/findAllCars.action', columns:[[ {field:'carnumber',title:'车牌号',width:100}, {field:'cartype',title:'类型',width:100}, {field:'color',title:'颜色',width:100}, {field:'price',title:'价格',width:80}, {field:'rentprice',title:'租金',width:100}, {field:'deposit',title:'押金',width:100} ]], view: detailview, detailFormatter:function(index,data){ //alert(index+"----------"+data.carnumber); return "<table class='tbls' style='width:100%' border='1'>"+ "<tr><td rowspan='2' class='tds' width='34.6%'><img src='"+data.carimg+"'/></td>"+ "<td class='tds'>租赁状态:"+data.isrenting+"</td></tr>"+ "<tr><td class='tds'>描述:"+data.cardesc+"</td></tr>"+ "</table>"; } /* , onExpandRow:function(index,data){ alert(index+"----------"+data.carnumber); } */ }); }); </script> </head> <table id="dg" class="easyui-datagrid" style="width:700px;height:450px;" align="center"> </table> <!-- 添加工具栏 --> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newCars()">添加车辆</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editCars()">编辑车辆</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyRole()">删除角色</a> </div> <!-- 指定添加角色信息需要的对话框 --> <div id="dlg" class="easyui-dialog" style="width:600px" closed="true" buttons="#dlg-buttons"> <!-- 添加div层显示上传的图片 --> <div style="position: absolute;width: 180px; height: 180px;border: red solid 1px;left:65%;top: 20%" id="img"> <img src="" id="carImg"> </div> <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px"> <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">车辆信息</div> <div style="margin-bottom:10px"> <input name="carnumber" class="easyui-textbox" required="true" label="车牌号:" style="width:60%"> </div> <div style="margin-bottom:10px"> <input name="cartype" class="easyui-textbox" required="true" label="类型:" style="width:60%"> </div> <div style="margin-bottom:10px"> <input name="color" class="easyui-textbox" required="true" label="颜色:" style="width:60%"> </div> <div style="margin-bottom:10px"> <input name="price" class="easyui-textbox" required="true" label="价格:" style="width:60%"> </div> <div style="margin-bottom:10px"> <input name="rentprice" class="easyui-textbox" required="true" label="租金:" style="width:60%"> </div> <div style="margin-bottom:10px"> <input name="deposit" class="easyui-textbox" required="true" label="押金:" style="width:60%"> </div> <div style="margin-bottom:10px"> <input name="isrenting" class="easyui-textbox" required="true" label="状态:" style="width:60%"> </div> <div style="margin-bottom:10px"> <input name="cardesc" class="easyui-textbox" required="true" data-options="label:'描述:',multiline:true" style="width:100%;height:100px"> </div> <input type="hidden" id="cimg" name="carimg"> </form> <form id="fm2" method="post" enctype="multipart/form-data" novalidate style="margin:0;padding:1px 50px"> <div style="margin-bottom:10px"> <input name="mf" class="easyui-filebox" label="图片:" style="width:60%"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="uploadCarsImg()">上传图片</a> </div> </form> </div> <!-- 指定提交表单的按钮 --> <div id="dlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveCars()" style="width:90px">Save</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a> </div> <!-- --------------------------授权的对话框------------------------ --> <!-- 指定添加角色信息需要的对话框 --> <div id="mdlg" class="easyui-dialog" style="width:400px;height: 400px" closed="true" buttons="#mdlg-buttons"> <div id="treePrivilege" class="ztree"></div> </div> <script type="text/javascript"> /*** 发送异步上传图片的请求 **/ function uploadCarsImg(){ //获得页面的表单多对象 var formData = new FormData($("#fm2")[0]); $.ajax({ url:'uploadCarImg.action', type:'POST', data:formData, async:false, cache:false, contentType:false, processData:false, success:function(path){ $("#carImg").attr({src:path}); $("#cimg").val(path); }, error:function(rv){ alert(rv); } }); } var url; //打开添加角色信息的对话框 function newCars(){ //打开对话框 $('#dlg').dialog('open').dialog('center').dialog('setTitle','新增车辆'); $('#fm').form('clear');//清空对话框的表单 $('#fm2').form('clear');//清空对话框的表单 $('#carImg').attr({src:''}); url = 'addCars.action'; } /* 打开修改角色信息的对话框 */ function editCars(){ //获得list列表中被选中的行 var row = $('#dg').datagrid('getSelected'); if (row){ $('#dlg').dialog('open').dialog('center').dialog('setTitle','修改角色'); $('#fm').form('load',row);//将选中的行的数据（json），在表单中进行回显 url = 'updateCars.action'; //情况表单二 $('#fm2').form('clear'); //回显图片 $('#carImg').attr({src:row.carimg}); //将车辆图片原来的路径保存到隐藏域 $('#cimg').val(row.carimg); } } //发送异步请求，保存输入的角色信息 function saveCars(){ //发送ajax请求提交表单 $('#fm').form('submit',{ url: url, onSubmit: function(){ return $(this).form('validate'); }, //异步请求发送后，处理响应结果的回调函数 success: function(result){ //var result = eval('('+result+')'); if (result.errorMsg){ $.messager.show({//显示错误消息的消息框 title: 'Error', msg: result.errorMsg }); } else {//后台没有异常，正常响应，状态200 $('#dlg').dialog('close'); // close the dialog $('#dg').datagrid('reload'); // 重新加载datagrid控件 } } }); } </script> </body>
仔细发现 我的datagridview 发送ajax请求 是在<body>标签里， 这个问题一定要注意，包括学习别的前端框架 也是一样的道理
