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>标签里, 这个问题一定要注意,包括学习别的前端框架 也是一样的道理
easyUi 学习笔记 (二 ) 使用tabs 里datagridview 发送ajax请求 不访问后台的问题的更多相关文章
- easyUI学习笔记二
1. 拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...
- angular学习笔记(二十四)-$http(2)-设置http请求头
1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Django学习笔记二
Django学习笔记二 模型类,字段,选项,查询,关联,聚合函数,管理器, 一 字段属性和选项 1.1 模型类属性命名限制 1)不能是python的保留关键字. 2)不允许使用连续的下划线,这是由dj ...
- muduo学习笔记(二)Reactor关键结构
目录 muduo学习笔记(二)Reactor关键结构 Reactor简述 什么是Reactor Reactor模型的优缺点 poll简述 poll使用样例 muduo Reactor关键结构 Chan ...
- python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法
python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...
- python3.4学习笔记(二十) python strip()函数 去空格\n\r\t函数的用法
python3.4学习笔记(二十) python strip()函数 去空格\n\r\t函数的用法 在Python中字符串处理函数里有三个去空格(包括'\n', '\r', '\t', ' ')的函数 ...
随机推荐
- html5移动端适配- media query
iPad部分css适配 - media query 代码如下图: 注: @media要放在css最下方,防止被覆盖.
- .NET 出现参数化查询 需要参数但未提供该参数的错误
1.问题的来源 在.NET或者C#中,我们一般执行sql语句的话,推荐使用参数化查询,这样可以避免sql注入的攻击,但是,我在使用参数化查询的时候 出现了以下的错误,详细如下图: 图一这是写sql语句 ...
- debian设置英文模式
Ubuntu太臃肿了,遂换回debian系统.在虚拟机上装debian,发现console下中文不显示. 各种export方法试过,始终无效.废了一个小时终于找到方法了.记录之. debian设置语言 ...
- qt查找框设置
转载请注明出处:http://www.cnblogs.com/dachen408/p/7229129.html 主界面弹出查找框方法,查找框显示在主界面上层,并还可以点击主界面,非模态. class ...
- 【My First Blog】评近期国产烂片-《何以笙箫默》
昨晚,我脑抽去看了[何以笙箫默],看完后我的感觉就是被这部片子恶心到了,现在想起来我还是想说:何以笙箫默是烂片烂片烂片!重要的是说三遍.以前,我问电视剧版<何以笙箫默>何以这么LOW,看了 ...
- 最小生成树Prim算法 Kruskal算法
Prim算法(贪心策略)N^2 选定图中任意定点v0,从v0开始生成最小生成树 树中节点Va,树外节点Vb 最开始选一个点为Va,其余Vb, 之后不断加Vb到Va最短距离的点 1.初始化d[v0]=0 ...
- Vue之x-template(2)
将html结构写在一对script标签中,设置type=“x-template” <!DOCTYPE html> <html> <head lang="en&q ...
- SpringMVC+ajax返回JSON串
一.引言 本文使用springMVC和ajax做的一个小小的demo,实现将JSON对象返回到页面,没有什么技术含量,纯粹是因为最近项目中引入了springMVC框架. 二.入门例子 ①. 建立工程, ...
- NOIP2016玩具迷题
题目大意就不说了,反正水水就过了. 主要在于找01关系. 代码: #include<cstdio> int n,m; struct node { ]; int f; }a[]; int m ...
- <Redis> 入门五 持久化RBD/AOF
RDB RDB持久化是指在指定的时间间隔内将内存中的数据集快照写入磁盘(默认是 dump.rdb). 默认持久化机制,就是将内存中的数据以快照的方式写入二进制文件dump.rbd中. 触发快照的条件 ...