Struts2+Jquery+Ajax实现不刷新浏览器改变jsp页面

欢迎访问我的个人博客：https://ddddddddd.top
搬运请注明
今天学会了Ajax的简单使用,就配合刚学过的struts2做一个小demo记录一下吧
遇到了很多问题在网上搜都不太全,就写一个步骤齐全的吧.

1. 配置struts2环境
2. 编写ajax请求
3. 解析响应数据(jsp)

配置struts2环境
jar包问题
jar包的话直接导入整个struts2jar包就好了

struts2.xml配置文件

<package name="defaule" namespace="/" extends="struts-default,json-default">

编写自己包的时候需要继承json-default这个包

发送ajax请求
需求是点击查询按钮发送请求返回数据显示在页面的表格中

jsp页面代码

		图书姓名:</span><input style="max-width: 100px;" type="text" id="bookname"/>
	  	图书类别:<input style="max-width: 100px"  type="text" id="typename"/>
	  	作者:<input style="max-width: 100px"  type="text" id="author"/>
	  	图书编号:<input style="max-width: 100px"  type="text" id="bookno"/>
	  	出版社:<input style="max-width: 100px"  type="text" id="publish"/>
	  	<div id="div3">查询</div>
	  	<table align="center" id="table1" cellpadding="0" cellspacing="0"> 
    		<tr style="height: 40px;">
    			<th>序列</th>
    			<th>图书编号</th>
    			<th>书名</th>
    			<th>所属分类</th>
    			<th>作者</th>
    			<th>出版社</th>
    			<th>价格</th>
    			<th>库存</th>
    			<th>借出情况</th>
    			<th>图书简介</th>
    			<th>操作</th>
    		</tr>

js代码
使用了jquery.js文件

$("#div3").click(function(){
				var bookname=$("#bookname").val();//获取jsp页面参数的值
				var typename=$("#typename").val();
				var author=$("#author").val();
				var bookno=$("#bookno").val();
				var publish=$("#publish").val();
				$.ajax({
						//请求类型
						type:"POST",
						//请求地址
						url:"BookAction_likeFindAllBooks",
						//请求参数
						data:{booknameajax:bookname,
							typenameajax:typename,
							authorajax:author,
							booknoajax:bookno,
							publishajax:publish},
						//返回数据类型
						dataType:"json",
						//回调函数
						success:function(data){createtable(data)},//请求成功后diaoyongcreatetable来创建表格
						error:function(){alert("没有查询到结果!")}
				});
			});
//动态创建表格
		function createtable(data){
		//data就是后台传过来的result 
		data是一个json数据
		不知道可以不可以把它看成一个多维数组
		data[0][0] 先取到第一个对象 然后再取这个对象的第一个属性
			//清空表格
				$("#table1").empty();//清空表格
				//插入表头
				$("#table1").append('<tr style="height: 40px;"><th min-width: 100px;>序列</th><th min-width: 100px;>图书编号</th><th min-width: 100px;>书名</th><th min-width: 100px;>所属分类</th><th min-width: 100px;>作者</th><th min-width: 100px;>出版社</th><th min-width: 100px;>价格</th><th min-width: 100px;>库存</th><th min-width: 100px;>借出情况</th><th min-width: 100px;>图书简介</th><th min-width: 100px;>操作</th></tr>');
				//动态插入行
				for(var i=0;i<data.length;i++){
					if(data[i][9]==1){
						$("#table1").append('<tr align="center"><td>'+data[i][0]+'</td><td>'+data[i][1]+'</td><td>'+data[i][2]+'</td><td>'+data[i][11]+'</td><td>'+data[i][			4]+'</td><td>'+data[i][5]+'</td><td>'+data[i][6]+'</td><td>'+data[i][8]+'</td><td>未借出</td><td>图书简介</td><td><a style="text-decoration: none;" 			href="LoanAction_jieshu?lo.book.bookid='+data[i][0]+'">借书</a></td></tr>');
						}else{
						$("#table1").append('<tr align="center"><td>'+data[i][0]+'</td><td>'+data[i][1]+'</td><td>'+data[i][2]+'</td><td>'+data[i][11]+'</td><td>'+data[i][4]+'</td><td>'+data[i][5]+'</td><td>'+data[i][6]+'</td><td>'+data[i][8]+'</td><td style="color: red">已借出</td><td>图书简介</td><td><a style="text-decoration: none;" href="LoanAction_jieshu?lo.book.bookid='+data[i][0]+'">借书</a></td></tr>');
					}
				}
			};

请求参数我直接使用了struts2封装在action里面了
BookAction.action代码

//ajax参数封装
	String booknameajax;
	String typenameajax;
	String authorajax;
	String booknoajax;
	String publishajax;
//get~~ set~~省略
	//ajax结果
	List<BookInfo> result;
//模糊查询（出版社，图书姓名，作者，图书编号，图书名称，图书类别）
	public String likeFindAllBooks(){
		if(booknameajax.equals("")){booknameajax="%";};
			if(typenameajax.equals("")){typenameajax="%";};
				if(authorajax.equals("")){authorajax="%";};
						if(booknoajax.equals("")){booknoajax="%";};
								if(publishajax.equals("")){publishajax="%";};
								//模糊查询
								list=bookimpl.likeFindAllBooks(booknameajax,typenameajax,authorajax,booknoajax,publishajax );//方法进行模糊查询会返回一个list<BookInfo>
		result=list;
		return "ajaxSUCCESS";
	}

struts.xml代码

<result name="ajaxSUCCESS" type="json">
				<param name="root">result</param> //这个result就是返回到前台的数据
</result>

解析响应数据

有点苦恼的时候返回值和取值的问题
在网上搜的都是在action里面定义result定义成String类型然后把集合转换为json数据返回出去 但是我的老是报错
所以我就直接返回集合,发现这样也可以.
取值的话我本以为可以data[0].bookid 这样直接获取属性 但是发现获取不到, 换成索引就可以获取到了.

还在学习,哪里错了希望大神指出来 或者可以为我解下我的疑惑