项目中利用Ajax发送请求1

欢迎大家来到IT世界,在知识的湖畔探索吧!

<%@page isELIgnored="false" contentType="text/html; UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="path"/>
<script>
 $(function () {
 $("#banner-table").jqGrid({
 url : '${path}/img/selectAll',
 //url : '\${path}/statics/json/banner.json',
 type:'post',
 datatype : "json",//指定渲染格式
 //cellEdit:true,//单元格内编辑
 colNames : [ 'ID','标题','封面','创建日期','最后修改日期','状态'],
 colModel : [
 {name : 'id',width : 20},
 {name : 'title',editable:true,width : 50}, //editable:true 指定可编辑
 {name : 'cover',editable:true,width : 100,edittype:"file",//编辑类型 改为文件类型
 formatter:function (cellvalue,options,rowObject){
 //cellvalue：当前字段的名字
 console.log(cellvalue);
 //options：表格所有的信息 console.log(options)
 //rowObject：当前行的所有信息 console.log(rowObject)
 return "<img style='width:100px; height:70px'src='${path}/img/"+cellvalue+"'></img>"
 }
 },
 {name : 'createDate',width : 80},
 {name : 'lastUpdate',width : 80},
 {name : 'status',editable:true,width : 30}
 ],
 styleUI:'Bootstrap', // 引入bootstrap样式
 autowidth:true,//自适应父容器宽度
 height:330, //高度
 pager : '#banner-pager', //引入分页栏 引到第表格下的div上
 page:1, //默认展示第几页
 rowNum : 4, //每页几条
 rowList : [4, 10, 20, 30 ],//默认条数
 multiselect:true, //添加多选框
 viewrecords : true, //右下角展示总页数
 caption : "轮播图详情", //表标题 右上角可收起
 editurl : "${path}/img/edit" //点击提交走的url
 }).jqGrid('navGrid','#banner-pager',//navGrib : 固定的 ，第二个参数 分页栏的id
 { //处理按钮的展示与否或者样式
 edit : true,add : true,del : true
 },{ //编辑工具修饰 在编辑之前或之后进行的额外操作 如之前: beforShowForm:function(){alert(555)},
 closeAfterEdit:true, //提交或取消后关闭
 afterSubmit:function (response) {// 上次请求结束后的响应信息
 // 得到返回的id 通过id传给controller 修改文件名
 var bid = response.responseJSON.data;
 if (bid!=null){
 $.ajaxFileUpload(
 {
 url: '${path}/img/upload', //用于文件上传的服务器端请求地址
 secureuri: false, //是否需要安全协议，一般设置为false
 fileElementId: 'cover', //文件上传域的ID 上传字段的name 默认name就是id
 dataType: 'json', //返回值类型 一般设置为json 指定与否效果相同
 async:true, //是否是异步
 data:{bid:bid},
 success: function (data) //服务器成功响应处理函数
 {
 console.log(111111);
 $("#banner-table").trigger("reloadGrid") //刷新页面

 },
 error: function (data)//服务器响应失败处理函数
 {
 console.log(22222);
 // alert(e);
 $("#banner-table").trigger("reloadGrid") //刷新页面
 }
 })
 }
 return "sss"; //函数需要返回值 任意字符串
 //console.log(response.responseJSON.data)
 }
 },{ // 添加工具的修饰
 closeAfterAdd:true,
 afterSubmit:function (response) {// 上次请求结束后的响应信息
 // 得到返回的id 通过id传给controller 修改文件名
 var bid = response.responseJSON.data;
 $.ajaxFileUpload(
 {
 url: '${path}/img/upload', //用于文件上传的服务器端请求地址
 secureuri: false, //是否需要安全协议，一般设置为false
 fileElementId: 'cover', //文件上传域的ID 上传字段的name 默认name就是id
 dataType: 'json', //返回值类型 一般设置为json 指定与否效果相同
 async:true, //是否是异步
 data:{bid:bid},
 success: function (data) //服务器成功响应处理函数
 {
 $("#banner-table").trigger("reloadGrid")
 },
 error: function (data, status, e)//服务器响应失败处理函数
 {
 //alert(e);
 $("#banner-table").trigger("reloadGrid")
 }
 });
 return "sss"; //函数需要返回值 任意字符串
 //console.log(response.responseJSON.data)
 }
 },{ // 删除工具的修饰

 })
 })
</script>
<table id="banner-table"></table>
<div id="banner-pager"></div>

欢迎大家来到IT世界,在知识的湖畔探索吧!