JSON的简单使用_向前台发送JSON数据

转自：http://www.cnblogs.com/digdeep/p/5574366.html

1.前台页面

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <script type="text/javascript"
 8     src="${pageContext.request.contextPath}/resource/js/jquery-1.8.2.min.js"></script>
 9 <title>Insert title here</title>
10 </head>
11 <body>
12     
13     <form action="">
14         <input type="button" onclick="getJson()">
15     </form>
16     
17 </body>
18 
19 <script type="text/javascript">
20     function getJson(){
21         $.ajax({
22             url:'${pageContext.request.contextPath}/SendJsonToFrantServlet',
23             type:"get",
24             success:function(value){
25                 alert(value.username);
26             },dataType:"json" 
27         });
28     }
29 </script>
30 
31 </html>

2.后台类准备数据

 1 package cn.rocker.json;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 
 9 import net.sf.json.JSONObject;
10 
11 /**  
12 * @ClassName: SendJsonToFrantServlet  
13 * @Description: 向前台发送json数据
14 * @author 112  
15 * @date 2018年4月28日 上午10:11:54 
16 */ 
17 public class SendJsonToFrantServlet extends HttpServlet {
18     private static final long serialVersionUID = 1L;
19        
20     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
21         JSONObject jsonObject = new JSONObject();
22         jsonObject.put("username", "xiaoerhei");
23         String string = jsonObject.toString();
24         System.out.println(string);
25         //response.setContentType("application/json;charset=utf-8");　　　　 //1
26         //response.setContentType("text/json;charset=utf-8");　　　　　　　　 //2
27         //response.setContentType("text/javascript;charset=utf-8");　　　　　//3
28         response.setContentType("application/javascript;charset=utf-8");　　//4
29         response.getWriter().write(string);
30     }
31 
32     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
33         doGet(request, response);
34     }
35 
36 }

设置ContentType时　　

　　3、4用于返回js代码，1、2专门用于返回 json 格式的数据

　　3、4 返回的 js 代码，会自动在浏览器中进行执行，就像返回的结果被 eval(result) 调用了一样。也就是说返回的字符串，会被当做 js 代码，被浏览器的js引擎进行执行。而不是当做普通的　　字符串显示在浏览器中。

　　1、2专门用于返回 json 格式的数据，而 json 格式是 js 代码的一个子集。也就是说 json 格式的数据，也是 js 代码，也会被浏览器的js引擎执行，而生成 json 对象。

　　所以如果返回的是 json 格式，那么用以上四种ContentType都是可以的。

注意

　　如果不在后台设置ContentType，而直接在前台用eval解析返回的json串，或者在前台指定dateType为"json"来解析后台返回的json串时，会有XML报错

JSON的简单使用_向前台发送JSON数据

猜你喜欢