Home >Web Front-end >JS Tutorial >Briefly understand JQuery+ajax+jsonp cross-domain access

Briefly understand JQuery+ajax+jsonp cross-domain access

怪我咯Original: 2017-04-01 09:36:591179browse

Jsonp (JSON with Padding) is a "usage mode" of the data format json, which allows web pages to obtain data from other domains.
1. Client

<!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(&#39;fail&#39;); 
    } 
  });  
}); 
</script> 
<body> 
<p id="showcontent">Result:</p> 
</body> 
</html>

2. Server side

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

The above is the detailed content of Briefly understand JQuery+ajax+jsonp cross-domain access. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example code for using JS to allow only numbers to be entered in the text boxNext article：Example code for using JS to allow only numbers to be entered in the text box

See more

Briefly understand JQuery+ajax+jsonp cross-domain access

Related articles