基于springboot和ajax的简单项目 05 日志界面的查找功能

01.这个是基于input标签的查找功能。
02.修改更新table标签的函数,把username这个参数,加到getjson函数的params中,实现依靠username来查询数据。

	var username=$("#searchNameId").val();
		//如下语句的含义是什么?动态在json格式的js对象中添加key/value,
		if(username) params.username=username;//查询时需要

其中的jQuery函数val()通常是和表单元素进行使用的,也就是input标签。可以理解为是input标签获取这个标签内容的专门的函数。
#searchNameId 是一个class是searchNameId 的input标签。

全部的代码是:

function doGetObjects() {
        //发送json请求,接受数据
		//1.定义url和参数
		var pageCurrent=$("#pageId").data("pageCurrent");
		//为什么要执行如下语句的判定,然后初始化pageCurrent的值为1
		//pageCurrent参数在没有赋值的情况下,默认初始值应该为1.
		if(!pageCurrent) pageCurrent=1;
		var params={"pageCurrent":pageCurrent};//pageCurrent=2
        //为什么此位置要获取查询参数的值?
		//一种冗余的应用方法,目的时让此函数在查询时可以重用。
		var username=$("#searchNameId").val();
		//如下语句的含义是什么?动态在json格式的js对象中添加key/value,
		if(username) params.username=username;//查询时需要
		var url="log/doFindPageObjects";
		//2.发起异步请求,getjson方法
		$.getJSON(url,params,function (result) {
			//请问result是一个字符串还是json格式的js对象?对象
		console.log(result);
		dohandlerresult(result);
		})

	}

03.给查找按钮写一个点击事件。
使用到的jQuery的函数on
在上次的page.html文件中的分页点击事件也是用这个写的,on函数。

基于springboot和ajax的简单项目 05 日志界面的查找功能_第1张图片
在自动加载函数中添加代码:

$(".input-group-btn").on("click",".btn-search",doQueryObjects)
  $(function(){
	   //在log_list.html页面的pageId位置,加载page.html,合二为一。
	   $("#pageId").load("doPageUI",function(){//资源加载完成执行
		   doGetObjects();//异步加载日志信息
		   $(".input-group-btn").on("click",".btn-search",doQueryObjects)
	   });
   }) 

其中的id属性是input-group-btn的是一个div,.btn-search 表示id属性为btn-search的标签(元素),doQueryObjects是要执行的函数。

04.完成点击函数doQueryObjects

因为直接使用更新table的函数,有一个问题就是,pageCurrent的值,不会一直是1,如果是大于1的数,根据sql语句,table中不会显示内容。
相关的sql:

 <sql id="querrybywhere">
    from sys_logs
        <where>
            <if test="username!=null and username!=''">
                username like concat("%",#{username},"%")
            if>
        where>
    sql>
<select id="findPageObjects" resultType="com.cy.pojo.sysLog">
       select *
       <include refid="querrybywhere">include>
       order by createdTime desc limit #{startIndex},#{pageSize}
    select>

需要写一个函数使得pageCurrent的值为1:


   function doQueryObjects(){
	   //为什么要在此位置初始化pageCurrent的值为1?
	   //数据查询时页码的初始位置也应该是第一页
	   $("#pageId").data("pageCurrent",1);
	   //为什么要调用doGetObjects函数?
	   //重用js代码,简化jS代码编写。
	   doGetObjects();
   }

你可能感兴趣的:(spring,boot,ajax,javascript)