使用Ajax请求servlet返回json数据

朴灿烈づ我的快乐病毒、 2022-03-28 03:26 294阅读 0赞

在上一篇博客当中使用Ajax提交请求至servlet，得到的是String字符串，同样，js对于json的支持不用说，自然是最好的，也可以从servlet返回json格式的数据。

在Java中提供了将数据封装为json格式的jar包，json.jar和json\_simple-1.1.jar，这两个包都可以百度下载到，比较好找。

jsp代码中只写了一个按钮用来触发点击事件从而调用Ajax获取数据，并将获取到的数据显示到id为showjson的段落中。 使用了jquery调用Ajax和解析json数据。

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    
    <title>Insert title here</title>
    <link href="default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/ajaxfileupload.js"></script>
    
    <script type="text/javascript">
    	$(document).ready(function(){
    		$("#btn").click(function(){ 
    			console.log("ajax");
    		    $.ajax({
    		        url : "${pageContext.request.contextPath}/JsonTest", //后台查询验证的方法
    		        dataTpye : "json",
    		        data : {
    		           
    		        }, 
    		        type : "post",
    		        success : function(msg) {
    		            var parsedJson = jQuery.parseJSON(msg);
    		            $("#showjson").html(msg+"<br/>姓名"+parsedJson.name+"<br/>年龄"+parsedJson.age);
    		        },
    		        error:function(){  //请求失败的回调方法
    		        	alert("请求失败，请重试");
    		        }
    		    });
    			});
    		});
    </script>
    
    </head>
    <body>
    
    <body>
    
    <button id="btn">Ajax 返回json</button>
    <p id="showjson">
    
    </p>
    </body>
    
    </body>
    </html>

servlet中为了简单直接返回了一个json数据，也就是这样一个数据 \{"name":"tom","age":15\}，使用JSONObject类的对象将键值对封装到json当中。

package cn.test;
    
    import java.io.IOException;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.json.JSONObject;
    
    /**
     * Servlet implementation class JsonTest
     */
    public class JsonTest extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public JsonTest() {
            super();
            // TODO Auto-generated constructor stub
        }
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		JSONObject object = new JSONObject();
    	    object.put("name", "tom");
    	    object.put("age", 15);
    	    System.out.println(object);
    	    response.getWriter().print(object);
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		doGet(request, response);
    	}
    
    }

效果图，点击按钮即可得到返回的数据，至于这个字体，我有一个css文件没有删掉，不要在意这些细节。

![20190109144700745.png][]

[20190109144700745.png]: /images/20220328/a730dfd93d99453da94a1cbd369ee848.png