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

时间 2019-11-13

原文原文链接

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

1.前台页面html

 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.后台类准备数据java

 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时　　jquery

　　三、4用于返回js代码，一、2专门用于返回 json 格式的数据ajax

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

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

　　因此若是返回的是 json 格式，那么用以上四种ContentType都是能够的。app

注意ui

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