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', ' ')的函数 ...
随机推荐
- poj2991 Crane
思路: 线段树每个节点维护第一条线段起点指向最后一条线段终点的向量,于是每一个操作都是一次区间更新.使用成段更新的线段树即可.实现: #include <cstdio> #include ...
- html----有关图像
这一节内容可概括为:网页上插入图片,调整图片大小,使用缩略图链接至大图. 图片的三种格式:jpeg png gif 照片.复杂图像使用jpeg,单色图像.logo.几何图形使用png以及 ...
- react学习文档
转自http://www.ruanyifeng.com/blog/2015/03/react.html,阮一峰老师的博客. 最近想学习react,官方文档的例子不是那么浅显易懂,看了相关博客,觉得阮一 ...
- 如需在APP中使用腾讯QQ登陆，需提前申请获取腾讯QQ的APPKEY和APPSecret。
如需在APP中使用腾讯QQ登陆,需提前申请获取腾讯QQ的APPKEY和APPSecret. 申请流程如下: 步骤1:登陆腾讯开放平台.链接地址: http://open.qq.com/ . 步骤2:填 ...
- CAS4.0 server 环境的搭建
1.上cas的官网下载cas server 官网地址:https://github.com/Jasig/cas/releases,下载好后 解压下载的 cas-server-4.0.0-release ...
- 关于docker入门教程
简介:docker入门教程 docker入门教程翻译自docker官方网站的Docker getting started 教程,官方网站:https://docs.docker.com/linux/s ...
- Redis缓存Object，List对象
一.到目前为止(jedis-2.2.0.jar),在Jedis中其实并没有提供这样的API对对象,或者是List对象的直接缓存,即并没有如下类似的API jedis.set(String key, O ...
- （一）Redis for Windows正确打开方式
目录 (一)Redis for Windows正确打开方式 (二)Redis for 阿里云公网连接 (三)Redis for StackExchange.Redis 下载地址 官网.中文网1 及 中 ...
- C++学习随笔
今天试着变了下实验二里边的有关面向对象的实验,深深地觉得我对面向对象的编程的理解还是很浅显,以至于对于对象的调用也是瞎整.居然直接就去调用继承来的函数,连生成一个对象这种基础应用都不知道.对自己的基础 ...
- jQuery 冒泡事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...