浅谈JQuery+ajax+jsonp 跨域访问

前端技术 2023/09/07 JavaScript

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”，可以让网页从别的网域获取资料。

一. 客户端

<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"> 
<html> 
<head> 
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"> 
<title>Insert title here</title> 
<script type=\"text/javascript\" src=\"resource/js/jquery-1.7.2.js\"></script> 
</head> 
<script type=\"text/javascript\"> 
$(function(){   
  /* 
  //简写形式，效果相同 
  $.getJSON(\"http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?\", 
      function(data){ 
        $(\"#showcontent\").text(\"Result:\"+data.result) 
  }); 
  */ 
  $.ajax({ 
    type : \"get\", 
    async:false, 
    url : \"http://app.example.com/base/json.do?sid=1494&busiId=101\", 
    dataType : \"jsonp\",//数据类型为jsonp 
    jsonp: \"jsonpCallback\",//服务端用于接收callback调用的function名的参数 
    success : function(data){ 
      $(\"#showcontent\").text(\"Result:\"+data.result) 
    }, 
    error:function(){ 
      alert(\'fail\'); 
    } 
  });  
}); 
</script> 
<body> 
<div id=\"showcontent\">Result:</div> 
</body> 
</html>

二. 服务器端

import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.HashMap; 
import java.util.Map; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import net.sf.json.JSONObject; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
 
@Controller 
public class ExchangeJsonController { 
  @RequestMapping(\"/base/json.do\") 
  public void exchangeJson(HttpServletRequest request,HttpServletResponse response) { 
    try { 
    response.setContentType(\"text/plain\"); 
    response.setHeader(\"Pragma\", \"No-cache\"); 
    response.setHeader(\"Cache-Control\", \"no-cache\"); 
    response.setDateHeader(\"Expires\", 0); 
    Map<String,String> map = new HashMap<String,String>();  
    map.put(\"result\", \"content\"); 
    PrintWriter out = response.getWriter();    
    JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json 
    String jsonpCallback = request.getParameter(\"jsonpCallback\");//客户端请求参数 
    out.println(jsonpCallback+\"(\"+resultJSON.toString(1,1)+\")\");//返回jsonp格式数据 
    out.flush(); 
    out.close(); 
   } catch (IOException e) { 
    e.printStackTrace(); 
   } 
  } 
}

以上就是小编为大家带来的浅谈JQuery+ajax+jsonp 跨域访问全部内容了，希望大家多多支持phpstudy~

本文地址：https://www.stayed.cn/item/18630

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案