servlet中PrintWriter对象的print()方法打印出数组对象，再jsp页面通过script将值写入表格出现的问题

跳过第一种，直接看第二种解决方案

第一种修改方案

实现功能：原本到servlet中查到的集合对象，想通过ajax写到jsp界面，但是进不到$.each(data1,function(index,dept){}代码块中，很是纠结，因为data本来就是一个数组中装的对象集合啊，为什么不能遍历呢？百度搜不到，只好发挥自己的主观能能动性了，还好我有加了几个是实用的交流群，大佬们都很友好，一般问题都会给解决的。在这当中我试着从success:function(data){}中通过alert()打印出来它，可以弹出来，但是就是不知道问题出在哪里了，原本以为是servlet中的问题或者是ajax参数的问题，都没毛病啊，接着就是尝试着各种无聊的骚操作，像是往DeptSer前前面加一个/，这样操作导致的结果是数据库连接不上了，通过和大佬的交流，他让我在script中通过console.lo(data instances Array)在后天打印看data是什么类型的数据，虽然我的后台没打印出来，但这却是解决问题的关键，大佬还贴心的给出了代码示例
在这里插入图片描述
其中大佬的这句话很重要：“将回值是json文本串，使用eval函数将文本转换为js对象试下”，是解决问题的关键，我试着搜了一下网上的案例添加链接描述感兴趣的同学可以点进去看一下没有深入的研究，大佬还贴心的帮我更改了我的代码：在这里插入图片描述
就是这句代码问题解决了
servlet代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
				request.setCharacterEncoding("utf-8");
				response.setContentType("text/html; charset=UTF-8");
				//获取部门名称关键字
				String key=request.getParameter("key");
				//调业务层dao方法
				DeptDaoImpl ddi=new DeptDaoImpl();
				try {
					List<Dept> depts=ddi.select(key);
					JSONArray js=JSONArray.fromObject(depts);
					PrintWriter ps=response.getWriter();
					ps.println(js);
					ps.flush();
					ps.close();
				} catch (Exception e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
				
	}

javascript代码

<script type="text/javascript">
	$(function(){
		$("#b1").click(function(){
			//获取用户输入的部门关键字
			var key=$("#t1").val();
			$.ajax({
				data:{"key":key},
				type:"get",
				datatype:"json",
				async:true,
				cache:false,//如果缺少了会出现servlet数据发送不要界面
				url:"Dept1Ser",
				success:function(data){
					//能进入，并且能打印出来数组集合，为什么进不到下面这个方法
					//var a=[{"did":1,"dname":"研发部","dtel":"1234562-455"},{"did":2,"dname":"市场部","dtel":"4545564-455"}];
					$.each(data1,function(index,dept){
						var x="<tr><td>"+dept.did+"</td><td>"+dept.dname+"</td><td>"+dept.dtel+"</td></tr>";
						$("#tb").append(x);
					});
				},
				error:function(){
					alert("服务器连接失败......");
				}
				
			})
		})
	})
</script>

jsp页面代码

</head>
<body>
	<form>
					<input type="text" id="t1" />
					<input type="button" value="查询" id="b1" />
		<table width="60%" align="center" border="1px">
			<thead>
				<tr>
					<th>部门编号</th>
					<th>部门名称</th>
					<th>部门电话</th>
				</tr>
			</thead>
			<tbody id="tb"></tbody>
		</table>
	</form>

实现从servlet中获取到的数组对象写到表格中的Ajax代码
重点是这个：var data1=eval(data)，可以参考我上面的代码

第二种修改方案
其实只需要动一个参数就可以了，原因是我写服务端发送给客户端的数据格式时，将类型大小写没搞对：我写的是datatype:“json”，而标准版的则是dataType:“json”,
注意：

我ajax中var x=""+dept.did+""+dept.dname+""+dept.dtel+"";写的有点问题因为用的是jquery，所以前面要放在这里面$(""+dept.did+""+dept.dname+""+dept.dtel+"")

第三种方案：如果传过来的值没设置成json对象，例如

dataType:“json”,

则通过这种方式设置也是可以成功的

JSON.parse(data)

servlet中PrintWriter对象的print()方法打印出数组对象，再jsp页面通过script将值写入表格出现的问题

猜你喜欢