基于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函数。

在自动加载函数中添加代码：

$(".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();
   }