淺談JQuery+ajax+jsonp 跨域訪問
來源:易賢網 閱讀:718 次 日期:2016-07-12 15:52:33
溫馨提示:易賢網小編為您整理了“淺談JQuery+ajax+jsonp 跨域訪問”,方便廣大網友查閱!

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(); 

   } 

  } 

以上就是小編為大家?guī)淼臏\談JQuery+ajax+jsonp 跨域訪問全部內容了

更多信息請查看網絡編程
易賢網手機網站地址:淺談JQuery+ajax+jsonp 跨域訪問

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網