最最基層的ajax交互代碼jquery+java之間的json跨域傳遞以及java的json代碼返回

2019-11-15 00:39:36

字體：大中小

來源：轉載

供稿：網友

最最基層的Ajax交互代碼jquery+java之間的json跨域傳遞以及java的json代碼返回 Posted on 2015-06-22 16:24 思思博士閱讀(...) 評論(...) 編輯收藏

首先導入jar包

上面的jar包主要是用來將map或list數據轉換成json字符串,傳遞到前臺使用.

靜態頁面的代碼:2.html

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="utf-8"> 5         <title>ajax</title> 6           <script type="text/Javascript" src="js/jquery-1.7.2.min.js"></script> 7         <script type="text/javascript"> 8         function ajax(){ 9             $.ajax({10                 url:"http://192.168.6.21:8080/jsonp/servlet/Ajax",11                 data:"data=guoyansi",12                 type:"get",13                 dataType:"jsonp",14                 jsonpCallback:"jsonpCallback",//自定義的jsonp回調函數名,默認為jQuery自動生成的隨機函數15                 jsonp:"callbackparam",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(默認為callback)16                 error:function(){alert("服務器連接失敗");},17                 success:function(data){18                     data=eval(data);19                     for(var i=0;i<data.length;i++){                        20                         alert(data[i])21                     }22                 }23             });24     }        25 </script>26     </head>27     <body>28          <input type="button" value="提交" onclick="ajax()" /> 29          30     </body>31 </html>

新建servlet,服務器端的servlet---ajax.java代碼:

這里的web.xml就省略了.

返回list集合(數組)

 1 package servlet; 2  3 import java.io.IOException; 4 import java.io.PRintWriter; 5 import java.util.ArrayList; 6 import java.util.List; 7  8 import javax.servlet.ServletException; 9 import javax.servlet.http.HttpServlet;10 import javax.servlet.http.HttpServletRequest;11 import javax.servlet.http.HttpServletResponse;12 13 import net.sf.json.JSONArray;14 15 public class Ajax extends HttpServlet {16     public void doGet(HttpServletRequest request, HttpServletResponse response)17             throws ServletException, IOException {18         doPost(request, response);19     }    20     public void doPost(HttpServletRequest request, HttpServletResponse response)21             throws ServletException, IOException {        22         //response.setHeader("access-Control-Allow-Origin", "*");23         response.setContentType("text/plain");24         response.setCharacterEncoding("utf-8");25         String jsonp=request.getParameter("callbackparam");26         String name=request.getParameter("data");27         System.out.println("param:"+name);        28         List<String> list=new ArrayList<String>();29         list.add("abc");30         list.add("dcc");31         list.add("1");32         list.add("2");33         list.add("3434");34         list.add("retr");        35         JSONArray jsonArray=JSONArray.fromObject(list);36         String result=jsonArray.toString();37         PrintWriter writer=response.getWriter();38         writer.write(jsonp+"("+result+")");39     }40 41 }

跑一下:

服務器端返回map數據(json)

修改ajax.java代碼

 1 package servlet; 2  3 import java.io.IOException; 4 import java.io.PrintWriter; 5 import java.util.ArrayList; 6 import java.util.HashMap; 7 import java.util.List; 8 import java.util.Map; 9 10 import javax.servlet.ServletException;11 import javax.servlet.http.HttpServlet;12 import javax.servlet.http.HttpServletRequest;13 import javax.servlet.http.HttpServletResponse;14 15 import net.sf.json.JSONArray;16 import net.sf.json.JSONObject;17 18 public class Ajax extends HttpServlet {19     public void doGet(HttpServletRequest request, HttpServletResponse response)20             throws ServletException, IOException {21         doPost(request, response);22     }    23     public void doPost(HttpServletRequest request, HttpServletResponse response)24             throws ServletException, IOException {25         response.setContentType("text/plain");26         response.setCharacterEncoding("utf-8");27         String callbackparam=request.getParameter("callbackparam");28         System.out.println("callbackparam:"+callbackparam);29         String name=request.getParameter("data");30         System.out.println("param:"+name);    31         Map<String, String> map=new HashMap<String, String>();32         map.put("1", "a");33         map.put("2", "b");34         map.put("3", "c");35         map.put("4", "d");        36         JSONObject jsonObject=JSONObject.fromObject(map);37         String result=jsonObject.toString();        38         PrintWriter writer=response.getWriter();39         writer.write(callbackparam+"("+result+")");40     }41 42 }

修改頁面代碼:

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="utf-8"> 5         <title>ajax</title> 6           <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 7         <script type="text/javascript"> 8         function ajax(){ 9             $.ajax({10                 url:"http://192.168.6.21:8080/jsonp/servlet/Ajax",11                 data:"data=guoyansi",12                 type:"get",13                 dataType:"jsonp",14                 jsonp:"callbackparam",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(默認為callback)15                 jsonpCallback:"success_jsonpCallback",//自定義的jsonp回調函數名,默認為jQuery自動生成的隨機函數16                 17                 error:function(){alert("服務器連接失敗");},18                 success:function(data){19                     for(var key in data){20                         alert(key+":"+data[key]);21                     }                    22                 }23             });24     }        25 </script>26     </head>27     <body>28          <input type="button" value="提交" onclick="ajax()" /> 29          30     </body>31 </html>

跑起來看看: