这个BUG 我花了一个半小时， 还是看不出哪里的问题，  于是就百度到这么一段话，我需要记住

<======================================================================================================================>

　　　使用tabs标签， 本身这个标签就在一个html里面,

　　　easyui中加载外部界面的组件，例如：panel,window，dailog,tabs等。请确保你引入的界面是一个html片段。

　　　html片段正确的写法再次提醒不要出现<html><head><body>三个标签：

<======================================================================================================================>

标准的html 结构是

  1. <html>
  2. <head>
  3.     <title>这是完整的html结构</title>
  4.     <script></script>
  5. </head>
  6. <body>
  7. <div>内容</div>
  8. </body>
  9. </html>

本身tabs 就在标准的html  中， 一般我们写html代码都应该遵循此此结构。而所谓的html片段就是上面完整结构中的内容部分。

虽然我们也会建立一个文件如b.html来保存html片段，但是在这个b.html中我们只需要编写<body>里面的内容不需要在把html的标准结构写出来。

详情请看：http://www.cnblogs.com/summer_adai/p/3548252.html

百度地址

下面是我的代码

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%@ include file="/common/page.jsp" %>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5.  
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.     <title>Insert title here</title>
  8.     <meta http-equiv="pragma" content="no-cache">
  9.     <meta http-equiv="cache-control" content="no-cache">
  10. <body>
  11. <script type="text/javascript" src="${pageContext.request.contextPath }/easyui/datagrid-detailview.js"></script>
  12.      <script type="text/javascript">
  13.      $(function(){
  14.                $("#dg").datagrid({
  15.             title:'汽车列表',
  16.             singleSelect:true,
  17.             fitColumns:true,
  18.             pagination:true,
  19.             rownumbers:true,
  20.             toolbar:'#toolbar',
  21.             url:'cars/findAllCars.action',
  22.             columns:[[
  23.                 {field:'carnumber',title:'车牌号',width:100},
  24.                 {field:'cartype',title:'类型',width:100},
  25.                 {field:'color',title:'颜色',width:100},
  26.                 {field:'price',title:'价格',width:80},
  27.                 {field:'rentprice',title:'租金',width:100},
  28.                 {field:'deposit',title:'押金',width:100}
  29.             ]],
  30.             view: detailview,
  31.             detailFormatter:function(index,data){
  32.                     //alert(index+"----------"+data.carnumber);
  33.                     return "<table class='tbls' style='width:100%' border='1'>"+
  34.                             "<tr><td rowspan='2' class='tds' width='34.6%'><img src='"+data.carimg+"'/></td>"+
  35.                             "<td class='tds'>租赁状态:"+data.isrenting+"</td></tr>"+
  36.                             "<tr><td class='tds'>描述:"+data.cardesc+"</td></tr>"+
  37.                             "</table>";
  38.                 } /*  ,
  39.             onExpandRow:function(index,data){
  40.                     alert(index+"----------"+data.carnumber);
  41.                 }  */
  42.             });
  43.            });
  44.  
  45.         </script>
  46.  
  47. </head>
  48.  
  49.           <table id="dg" class="easyui-datagrid" style="width:700px;height:450px;" align="center">
  50.  
  51.    </table>
  52.     <!-- 添加工具栏 -->
  53.      <div id="toolbar">
  54.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"
  55.             plain="true" onclick="newCars()">添加车辆</a>
  56.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit"
  57.             plain="true" onclick="editCars()">编辑车辆</a>
  58.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove"
  59.         plain="true" onclick="destroyRole()">删除角色</a>
  60.  
  61.     </div>
  62.     <!-- 指定添加角色信息需要的对话框 -->
  63.     <div id="dlg" class="easyui-dialog" style="width:600px"
  64.             closed="true" buttons="#dlg-buttons">
  65.  
  66.               <!-- 添加div层显示上传的图片 -->
  67.               <div style="position: absolute;width: 180px;
  68.               height: 180px;border: red solid 1px;left:65%;top: 20%" id="img">
  69.                   <img  src="" id="carImg">
  70.               </div>  
  71.  
  72.         <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
  73.             <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">车辆信息</div>
  74.             <div style="margin-bottom:10px">
  75.                 <input name="carnumber" class="easyui-textbox" required="true"
  76.                 label="车牌号:" style="width:60%">
  77.             </div>
  78.             <div style="margin-bottom:10px">
  79.                 <input name="cartype" class="easyui-textbox" required="true"
  80.                 label="类型:" style="width:60%">
  81.             </div>
  82.             <div style="margin-bottom:10px">
  83.                 <input name="color" class="easyui-textbox" required="true"
  84.                 label="颜色:" style="width:60%">
  85.             </div>
  86.             <div style="margin-bottom:10px">
  87.                 <input name="price" class="easyui-textbox" required="true"
  88.                 label="价格:" style="width:60%">
  89.             </div>
  90.             <div style="margin-bottom:10px">
  91.                 <input name="rentprice" class="easyui-textbox" required="true"
  92.                 label="租金:" style="width:60%">
  93.             </div>
  94.             <div style="margin-bottom:10px">
  95.                 <input name="deposit" class="easyui-textbox" required="true"
  96.                 label="押金:" style="width:60%">
  97.             </div>
  98.              <div style="margin-bottom:10px">
  99.                 <input name="isrenting" class="easyui-textbox" required="true"
  100.                 label="状态:" style="width:60%">
  101.             </div>
  102.  
  103.             <div style="margin-bottom:10px">
  104.                 <input name="cardesc" class="easyui-textbox" required="true"
  105.                 data-options="label:'描述:',multiline:true"
  106.                  style="width:100%;height:100px">
  107.             </div>
  108.             <input type="hidden" id="cimg" name="carimg">
  109.             </form>
  110.             <form id="fm2" method="post" enctype="multipart/form-data"
  111.                 novalidate style="margin:0;padding:1px 50px">
  112.                 <div style="margin-bottom:10px">
  113.                     <input name="mf" class="easyui-filebox"
  114.                     label="图片:" style="width:60%">
  115.                     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"
  116.                 plain="true" onclick="uploadCarsImg()">上传图片</a>
  117.                 </div>
  118.             </form>
  119.  
  120.     </div>
  121.     <!-- 指定提交表单的按钮 -->
  122.      <div id="dlg-buttons">
  123.         <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveCars()" style="width:90px">Save</a>
  124.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
  125.     </div>
  126.  
  127.     <!-- --------------------------授权的对话框------------------------ -->
  128.     <!-- 指定添加角色信息需要的对话框 -->
  129.     <div id="mdlg" class="easyui-dialog" style="width:400px;height: 400px"
  130.             closed="true" buttons="#mdlg-buttons">
  131.              <div id="treePrivilege" class="ztree"></div>
  132.     </div>
  133.  
  134.   <script type="text/javascript">
  135.           /***
  136.           发送异步上传图片的请求
  137.           **/
  138.           function uploadCarsImg(){
  139.               //获得页面的表单多对象
  140.               var formData = new FormData($("#fm2")[0]);
  141.               $.ajax({
  142.                   url:'uploadCarImg.action',
  143.                   type:'POST',
  144.                   data:formData,
  145.                   async:false,
  146.                   cache:false,
  147.                   contentType:false,
  148.                   processData:false,
  149.                   success:function(path){
  150.                       $("#carImg").attr({src:path});
  151.                       $("#cimg").val(path);
  152.                   },
  153.                   error:function(rv){
  154.                       alert(rv);
  155.                   }
  156.               });
  157.           }
  158.  
  159.         var url;
  160.         //打开添加角色信息的对话框
  161.         function newCars(){
  162.             //打开对话框
  163.             $('#dlg').dialog('open').dialog('center').dialog('setTitle','新增车辆');
  164.             $('#fm').form('clear');//清空对话框的表单
  165.              $('#fm2').form('clear');//清空对话框的表单
  166.             $('#carImg').attr({src:''});
  167.             url = 'addCars.action';
  168.         }
  169.  
  170.         /*
  171.         打开修改角色信息的对话框
  172.         */
  173.         function editCars(){
  174.             //获得list列表中被选中的行
  175.             var row = $('#dg').datagrid('getSelected');
  176.             if (row){
  177.                 $('#dlg').dialog('open').dialog('center').dialog('setTitle','修改角色');
  178.                 $('#fm').form('load',row);//将选中的行的数据（json），在表单中进行回显
  179.                 url = 'updateCars.action';
  180.                 //情况表单二
  181.                 $('#fm2').form('clear');
  182.                 //回显图片
  183.                 $('#carImg').attr({src:row.carimg});
  184.                 //将车辆图片原来的路径保存到隐藏域
  185.                 $('#cimg').val(row.carimg);
  186.  
  187.             }
  188.         }
  189.         //发送异步请求，保存输入的角色信息
  190.         function saveCars(){
  191.             //发送ajax请求提交表单
  192.             $('#fm').form('submit',{
  193.                     url: url,
  194.                     onSubmit: function(){
  195.                         return $(this).form('validate');
  196.                     },
  197.                     //异步请求发送后，处理响应结果的回调函数
  198.                     success: function(result){
  199.                         //var result = eval('('+result+')');
  200.                         if (result.errorMsg){
  201.                             $.messager.show({//显示错误消息的消息框
  202.                                 title: 'Error',
  203.                                 msg: result.errorMsg
  204.                             });
  205.                         } else {//后台没有异常，正常响应，状态200
  206.                             $('#dlg').dialog('close');        // close the dialog
  207.                             $('#dg').datagrid('reload');    // 重新加载datagrid控件
  208.                         }
  209.                     }
  210.             });
  211.         }
  212.  
  213.     </script>
  214.  
  215. </body>

仔细发现   我的datagridview 发送ajax请求 是在<body>标签里，   这个问题一定要注意，包括学习别的前端框架 也是一样的道理

easyUi 学习笔记 （二 ） 使用tabs 里datagridview 发送ajax请求 不访问后台的问题的更多相关文章

  1. easyUI学习笔记二

    1．  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  2. angular学习笔记(二十四)-$http(2)-设置http请求头

    1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain       ...

  3. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  4. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  5. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  6. Django学习笔记二

    Django学习笔记二 模型类,字段,选项,查询,关联,聚合函数,管理器, 一 字段属性和选项 1.1 模型类属性命名限制 1)不能是python的保留关键字. 2)不允许使用连续的下划线,这是由dj ...

  7. muduo学习笔记(二)Reactor关键结构

    目录 muduo学习笔记(二)Reactor关键结构 Reactor简述 什么是Reactor Reactor模型的优缺点 poll简述 poll使用样例 muduo Reactor关键结构 Chan ...

  8. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

  9. python3.4学习笔记(二十) python strip()函数 去空格\n\r\t函数的用法

    python3.4学习笔记(二十) python strip()函数 去空格\n\r\t函数的用法 在Python中字符串处理函数里有三个去空格(包括'\n', '\r', '\t', ' ')的函数 ...

随机推荐

  1. html5移动端适配- media query

    iPad部分css适配 - media query 代码如下图:   注:  @media要放在css最下方,防止被覆盖.  

  2. .NET 出现参数化查询 需要参数但未提供该参数的错误

    1.问题的来源 在.NET或者C#中,我们一般执行sql语句的话,推荐使用参数化查询,这样可以避免sql注入的攻击,但是,我在使用参数化查询的时候 出现了以下的错误,详细如下图: 图一这是写sql语句 ...

  3. debian设置英文模式

    Ubuntu太臃肿了,遂换回debian系统.在虚拟机上装debian,发现console下中文不显示. 各种export方法试过,始终无效.废了一个小时终于找到方法了.记录之. debian设置语言 ...

  4. qt查找框设置

    转载请注明出处:http://www.cnblogs.com/dachen408/p/7229129.html 主界面弹出查找框方法,查找框显示在主界面上层,并还可以点击主界面,非模态. class ...

  5. 【My First Blog】评近期国产烂片-《何以笙箫默》

    昨晚,我脑抽去看了[何以笙箫默],看完后我的感觉就是被这部片子恶心到了,现在想起来我还是想说:何以笙箫默是烂片烂片烂片!重要的是说三遍.以前,我问电视剧版<何以笙箫默>何以这么LOW,看了 ...

  6. 最小生成树Prim算法 Kruskal算法

    Prim算法(贪心策略)N^2 选定图中任意定点v0,从v0开始生成最小生成树 树中节点Va,树外节点Vb 最开始选一个点为Va,其余Vb, 之后不断加Vb到Va最短距离的点 1.初始化d[v0]=0 ...

  7. Vue之x-template(2)

    将html结构写在一对script标签中,设置type=“x-template” <!DOCTYPE html> <html> <head lang="en&q ...

  8. SpringMVC+ajax返回JSON串

    一.引言 本文使用springMVC和ajax做的一个小小的demo,实现将JSON对象返回到页面,没有什么技术含量,纯粹是因为最近项目中引入了springMVC框架. 二.入门例子 ①. 建立工程, ...

  9. NOIP2016玩具迷题

    题目大意就不说了,反正水水就过了. 主要在于找01关系. 代码: #include<cstdio> int n,m; struct node { ]; int f; }a[]; int m ...

  10. <Redis> 入门五 持久化RBD/AOF

    RDB RDB持久化是指在指定的时间间隔内将内存中的数据集快照写入磁盘(默认是 dump.rdb). 默认持久化机制,就是将内存中的数据以快照的方式写入二进制文件dump.rbd中. 触发快照的条件 ...