Jquery ajax 访问Servlet 处理 Json 数据

最新推荐文章于 2019-01-07 02:19:27 发布

银河缘木

最新推荐文章于 2019-01-07 02:19:27 发布

阅读量1w

点赞数 4

分类专栏： java js 文章标签： servlet json ajax jquery html function

本文链接：https://blog.csdn.net/www314599782/article/details/7648724

版权

java 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

前台jsp页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<title>My JSP 'jqueryajax.jsp' starting page</title>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
	function  kk(){
		//得到ajax获取到的数据,返回一个object
		 var htmlobj=$.ajax({url:"servlet/JsonServlet",async:false});
		 //将 ajax object 转换为json object,第二种转换
		// htmlobj = jQuery.parseJSON(htmlobj.responseText);
		  htmlobj = eval(htmlobj.responseText);
		  //清空class 为 sj 的标签内容
			 $(".sj").empty();  
		     var html = '<table border="1"><tr><td>ID</td><td>用户名</td><td>密码</td></tr>';
		     //循环获取数据并且拼接成html
		     $.each(htmlobj,function(entryIndex,entry){  
		    	 html += '<tr><td>'+entry['id']+'</td><td>'
		    	 +entry['username']+'</td><td>'
		    	 +entry['password']+'</td></tr>';
		     });
		     
		     html += '</table>';
		     //附加内容到class 为 sj的标签                   
		     $(".sj").append(html);  
	}
</script>
	</head>

	<body>
		<div>
			Jquery 动态获取数据 ，演示..
		</div>

		<div class="sj">

		</div>
		<input type="button" οnclick="kk()" value="点击" />
	</body>
</html>

后台一个Servlet 负责从mysql中获取数据并且将其处理成JSONArray

package com.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class JsonServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
 
		Toto toto = new Toto();
		toto.selectAllUsers();
		
		JSONArray json = JSONArray.fromObject(toto.getUsers());

	 response.setCharacterEncoding("utf-8");
		PrintWriter pw = response.getWriter();
		
		pw.print(json);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);
	}

}

运行后的效果:

附加：对于jquery异步获取数据还可以写成这样，如下：(推荐用这种写法，个人觉得比较标准)

 $.getJSON("servlet/JsonServlet",function(htmlobj){
	 $(".sj").empty();  
     var html = '<table>';
     
     $.each(htmlobj,function(entryIndex,entry){  
    	 html += '<tr><td>'+entry['id']+'</td></tr>';
     });
     
     html += '</table>';                   
     $(".sj").append(html);  
	 });
}

还可以这样写:

$.ajax({
			url:'servlet/JsonServlet',
			type:'post',
			success:function(msg){
				var htmlobj = jQuery.parseJSON(msg);

				var html = '<table>';
				$.each(htmlobj,function(entryIndex,entry){  
			    	 html += '<tr><td>'+entry['id']+'</td></tr>';
			    });
				html += '</table>';   
				                
			     $(".sj").html(html);  
			}


		});

银河缘木

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Jquery ajax 访问Servlet 处理 Json 数据

前台jsp页面:<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%> "> My
复制链接

扫一扫