星空网 > 软件开发 > Java

最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回

首先导入jar

最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回

上面的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='/images/loading.gif' data-original="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.

返回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 }

跑一下:

最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回

服务器端返回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='/images/loading.gif' data-original="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>

跑起来看看:

最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回




原标题:最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

企耳ERP:https://www.ikjzd.com/w/1573203956390944770
亚马逊​启航计划:https://www.ikjzd.com/w/1573203958093832193
齐亮科技:https://www.ikjzd.com/w/1573203958600998913
清单:https://www.ikjzd.com/w/1573203962413965313
青岛爱搜:https://www.ikjzd.com/w/1573203962934059009
青岛通达全球供应链:https://www.ikjzd.com/w/1573203963445764098
千岛湖绿城度假酒店的简介:https://www.vstour.cn/a/363185.html
深圳大湾区游轮夜景 深圳大湾区游轮夜景图:https://www.vstour.cn/a/363186.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流