java：jsonp前后端实例演示

最新推荐文章于 2023-01-20 19:53:12 发布

Ming-code

最新推荐文章于 2023-01-20 19:53:12 发布

阅读量318

点赞数

分类专栏： Jquery

原文链接：https://blog.csdn.net/superit401/article/details/78439581

版权

Jquery 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1.后端用servlet，放在tomcat中启动。

jsonpServlet.java:

package test;
 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
//@WebServlet("/jsonpServlet")
public class jsonpServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public jsonpServlet() {
        super();
    }
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		response.getWriter().append("Served at: ").append(request.getContextPath());
		
		String callback = (String)request.getParameter("callback");  
		String jsonData = "{\"id\":\"3\", \"name\":\"zhangsan\", \"telephone\":\"13612345678\"}";//为了演示效果，json数据是写死的  
		String retStr = callback + "(" + jsonData + ")"; 
		response.getWriter().append(retStr);
	}
 
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
 
}

2.前端测试页面testjsonp.html：

<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>测试页面</title>
  <script type="text/javascript" src="jquery.js"></script>
 </head>
 <body>
 
<input type="button" value="点我测试本地" οnclick="r()" />
 
 
<script>
var tt=null;
 
function r(){
	rds();
	console.log("第1次tt："+tt);
	d();
	console.log("第2次tt："+tt);
}
 
function rds(){
	var url="http://localhost:8080/demoProj/jsonpServlet";
	$.ajax({
		url: url,                              
		type:'get',
		dataType:'jsonp',
		async: false,
		jsonp:'callback',
		jsonpCallback:"cb",
		data:"",
		success:function(rs) {
			tt=rs;
			console.log("我是rds()里面的tt:"+tt);
			console.log("我是rds的方法："+rs);
			
		}
		
	});
 
}
function d(){
	tt="ddfdd";
}
	function cb(r){  
		tt=r;	
		console.log("我是rds()里面的tt:"+tt);
        console.log("我是cb方法！ "+r);  
     }
</script>
 </body>
</html>

前端更精简的jsonp写法,不需要写回调方法，也不需传回调函数名做参数到后端：

$.ajax({
type: “get”,
url:url,
dataType: ‘jsonp’,
crossDomain: true,

success: function(data) {

)}

$.ajax({
async : true,
url : “https://api.douban.com/v2/book/search”,
type : “GET”,
dataType : “jsonp”, // 返回的数据类型，设置为JSONP方式
jsonp : ‘callbackName’, //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: ‘handleResponse’, //设置回调函数名
data : {
q : “javascript”,
count : 1
},
success: function(response, status, xhr){
console.log(‘状态为：’ + status + ‘,状态是：’ + xhr.statusText);
console.log(response);
}

});

解释：

jsonp是不支持POST方式的

2.不加jsonp、jsonpCallback时默认调用的window.callback，传到后端的形式：&callback=jQueryxxxxxxxxxxx

2.jsonpCallback: ‘handleResponse’,中handleResponse是写在页面上的回调函数名。（不加此项时默认调用的window.callback，加了就调用指定的handleResponse）,传到后端的形式：&callback=handleResponse

3.jsonp : 'callbackName’中的是传到后端的回调函数参数名，后端通过request.getParameter(“callbackName”)获取。（不加此项时）

传到后端的形式：&callbackName=handleResponse，

4.调用回调函数的时候，先调用了指定的handleResponse，然后再调用success

参考：https://www.cnblogs.com/chiangchou/p/jsonp.html

Ming-code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java：jsonp前后端实例演示

1.后端用servlet，放在tomcat中启动。jsonpServlet.java:package test; import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;
复制链接

扫一扫

专栏目录