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

洪琦

2023-12-01

这个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>标签里，这个问题一定要注意，包括学习别的前端框架也是一样的道理

转载于:https://www.cnblogs.com/bignew/p/7280903.html

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

相关阅读

相关文章

相关问答

相关文档

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

相关阅读

相关文章

相关问答

相关文档

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