ajax增删改查

最新推荐文章于 2022-05-18 11:56:21 发布

Runix小胖子

最新推荐文章于 2022-05-18 11:56:21 发布

阅读量263

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/m0_49136595/article/details/107208978

版权

ajax

$.ajax() 万能用法

function doajax(	){
	$.ajax({
		"url":"dofingAl",
		"type":"GET:,
		"dataType":"Json".
		"success":function(result){
			console.log("ajax",result)
		}	
	})
}

$.get() 负责查询

function doGet(	){
	var url = "dofindAll";
	var params = "";
	$.get(url,params,function(result){
		console.log("Get",result)
	}
}

3.$.post() 表单数据提交

function doPost(	){
	var url = "dofindAll";
	var params = "";
	$.Post(url,params,function(result){
		console.log("Post",result)
	}
}

4.$.getJSON() 查询获取json数据

function doPost(	){
	var url = "dofindAll";
	var params = "";
	$.getJSON(url,params,function(result){
		console.log("getJSON",result)
	}
}

JS 问题如何解决? console.log(),debugger,排除

<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId" type="cgb" ccc="100">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100" 
			     th:include="common/page.html :: pageFragement">
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>

   $(function(){
	//$("#pageId").load("doPageUI",doGetObjects);
	  //debugger
	  doGetObjects(); 
	 
	  //事件注册
	  $(".input-group-btn")
	  .on("click",".btn-search",doQueryObjects)
	  .on("click",".btn-delete",doDeleteObjects)
	  //thread中checkbox对象(全选)事件注册
	  $("#checkAll").change(doChangeTBodyCheckBoxState);
	  //tbody中checkbox对象事件注册
	  $("#tbodyId")
	  .on("change","input:checkbox",doChangeTHeadCheckBoxState);
   })
   //处理tbody中checkbox对象的事件
   function doChangeTHeadCheckBoxState(){
	  //1.定义一个初始状态，默认值true.
	  var flag=true;
	  //2.获得所有tbody中的checkbox对象并与flag变量的初始状态进行逻辑与操作
	  $("#tbodyId input:checkbox")
	  .each(function(){
		  flag=flag&&$(this).prop("checked");
	  });
	  //3.修改thead中checkbox状态
	  $("#checkAll").prop("checked",flag);
   }
   //处理thead中checkbox对象的事件
   function doChangeTBodyCheckBoxState(){
	   //1.获得head中checkbox对象的状态
	   var flag=$(this).prop("checked");
	   //2.修改tbody中checkbox对象状态
	   $("#tbodyId input:checkbox").prop("checked",flag);
   }
   //获取选中的记录id
   function doGetCheckedIds(){
	   //1.定义数组
	   var idArray=[];
	   //2.迭代所有选中的checkbox对象，并获取value属性的值，然后存储到数组
	   $("#tbodyId input:checkbox:checked")
	   .each(function(){
		   idArray.push($(this).val());
	   });
	   //3.返回数组
	   return idArray;
   }
   //定义日志删除事件处理函数
   function doDeleteObjects(){
	   //1.获取选中记录id
	   var idArray=doGetCheckedIds();//通过此函数返回一个数组，数组中存储的是选中的记录id
	   if(idArray.length==0){
		   alert("请先选择");
		   return;
	   }
	   if(!confirm("确认删除吗"))return;
	   //2.并构建参数对象
	   var params={"ids":idArray.toString()};//[1,2,3]-->1,2,3
	   //3.定义删除操作的url
	   const url="log/doDeleteObjects";
	   //4.发送异步请求执行删除操作，并刷新页面
	   $.post(url,params,doHandleDeleteResult)
   }
   //处理删除结果
   function doHandleDeleteResult(result){
	   if(result.state==1){
		   alert(result.message);
		   //doGetObjects();//刷新
		   doRefreshAfterDeleteOK();
	   }else{
		   alert(result.message);
	   }
   }
   //执行删除操作以后的刷新操作
   function doRefreshAfterDeleteOK(){
	   var checkAll=$("#checkAll").prop("checked");
	   var pageCurrent=$("#pageId").data("pageCurrent");
	   var pageCount=$("#pageId").data("pageCount")
	   if(checkAll&&pageCurrent==pageCount&&pageCount>1){
		   pageCurrent--;
		   $("#pageId").data("pageCurrent",pageCurrent);
	   }
	   doGetObjects();
   }
   //基于参数查询日志信息
   function doQueryObjects(){
	   //初始化当前页码值
	   $("#pageId").data("pageCurrent",1);
	   //执行查询
       doGetObjects();
   }
   //通过此函数异步加载服务端的日志信息
   function doGetObjects(){
	 //初始化全选checkbox对象状态
	 $("#checkAll").prop("checked",false);
	 //1.定义请求参数
	 var pageCurrent=$("#pageId").data("pageCurrent");
	 if(!pageCurrent)pageCurrent=1;
	 var uname=$("#searchNameId").val();
	 //参数封装：方法1
	 //let params="pageCurrent="+pageCurrent;
	 //if(uname)params=params+"&username="+uname;
	 //参数封装：方法2
	 let params={"pageCurrent":pageCurrent};//json格式的js对象
	 if(uname)params.username=uname;
	 //2.定义请求url
	 const url="log/doFindPageObjects";
	 //3.发送异步请求并处理响应结果
	// $.getJSON(url,params,function(result){//JsonResult
	//	 doHandleQueryResult(result);
	 //});
	 //也可以按照如下结构进行异步请求
	 $.getJSON(url,params,doHandleQueryResult)
   }
   function doHandleQueryResult(result){//JsonResult
	   //debugger
	   //console.log("result",result);
	   if(result.state==1){//正常数据
		   //第一步:将当前页的日志记录信息更新到页面上
		   //console.log(result.data.records)
		   doSetTableBodyRows(result.data.records);
		   //第二步:将分页信息更新到页面上
		   doSetPagination(result.data);
	   }else{
		   //alert(result.message);
		   doSetQueryErrors(result.message);
	   }
   }
   function doSetQueryErrors(message){
	   $("#tbodyId").html(`<tr><td colspan='7'>${message}</td></tr>`);
   }
   
   function doSetTableBodyRows(records){//List<SysLog>
	   //1.获取tbody对象并清空内容
	   var tBody=$("#tbodyId");
	   tBody.empty();
	   //2.遍历records并将结果更新到页面上。
	  //for(var i=0;i<records.length;i++){
		   //1.构建一行tr对象
		   //var tr=doCreateRow(records[i]);
		   //2.将tr追加tbody中
		   //tBody.append(tr);
	  //}
	   records.forEach(record=>tBody.append(doCreateRow(record)))
   }
   function doCreateRow(record){
	   return `<tr>
	            <td><input type='checkbox' class='cItem' value=${record.id}></td>
	            <td>${record.username}</td>
	            <td>${record.operation}</td>
	            <td>${record.method}</td>
	            <td>${record.params}</td>
	            <td>${record.ip}</td>
	            <td>${record.time}</td>
	       </tr>`;
   }
</script>

分页

<div th:fragment="pageFragement">
  <ul class="pagination pagination-sm no-margin pull-right">
    <li><a class="first">首页</a></li>
	<li><a class="pre">上一页</a></li>
	<li><a class="next">下一页</a></li>
	<li><a class="last">尾页</a></li>
	<li><a class="rowCount">总记录数(0)</a></li>
	<li><a class="pageCount">总页数(0)</a></li>
	<li><a class="pageCurrent">当前页(1)</a></li>
  </ul>
  <script type="text/javascript">
      function doSetPagination(pageObject){
    	  //1.初始化总记录数
    	  $(".rowCount").html(`总记录数(${pageObject.rowCount})`);
    	  //2.初始化总页数
    	  $(".pageCount").html("总页数("+pageObject.pageCount+")");
    	  //3.初始化当前页
    	  $(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");
    	  
    	  //4.存储当前页码值和总页数
    	  //data函数为jquery中的对象的数据绑定函数
    	  //data函数语法结构data(key[,value]);
    	  $("#pageId").data("pageCurrent",pageObject.pageCurrent);
    	  $("#pageId").data("pageCount",pageObject.pageCount);
      }
      $(function(){
    	  //事件注册
    	  //当点击pageId对象内部的子元素(.first,.pre,.next,.last)时执行doJumpToPage函数
    	  $("#pageId")
    	  .on("click",".first,.pre,.next,.last",doJumpToPage)
      })
      function doJumpToPage(){
    	 //debugger
    	 //1.确定被点击的对象是谁 ?
    	 //基于$(this)获取被点击的对象
    	 //prop(属性名[,属性值])为html元素属性赋值或者获取属性的值
    	 var cls=$(this).prop("class");//first,pre,next,last
    	 //2.修改当前页码值
    	 //0)获取当前页码值
    	 var pageCurrent=$("#pageId").data("pageCurrent");
    	 var pageCount=$("#pageId").data("pageCount");
    	 //1)点击首页时当前页码值应该修改为1
    	 if(cls=="first"){
    		 pageCurrent=1;
    	 }
    	 //2)点击尾页时当前页码值应该为pageCount
    	 else if(cls=="last"){
    		 pageCurrent=pageCount;
    	 }
    	 //3)点击上一页时，假如当前页码值是大于1的则减一。
    	 else if(cls=="pre"&&pageCurrent>1){
    		 pageCurrent--;
    	 }
    	 //4)点击下一页时，假如当前页码值小于pageCount则加一。
    	 else if(cls=="next"&&pageCurrent<pageCount){
    		 pageCurrent++;
    	 }
    	 //5)已经是第一页还在点上一页或已经最后一页还在点下一页。
    	 else{
    		 return;
    	 }
    	 //3.基于新的页码值查询当前页数据并更新到页码上
    	 //3.1重新存储新的页码值
    	 $("#pageId").data("pageCurrent",pageCurrent);
    	 //3.2执行新的查询
    	 doGetObjects();
      }
      
  </script>
</div>