Home > Article > Web Front-end > Detailed explanation of Ajax using jsonp method to obtain data across domains (with code)

Detailed explanation of Ajax using jsonp method to obtain data across domains (with code)

php中世界最好的语言Original: 2018-04-04 14:37:171265browse

This time I will bring you a detailed explanation of how Ajax uses jsonp to obtain data across domains (with code). What are the precautions for Ajax using jsonp to obtain data across domains. The following is a practical case. Let’s take a look. take a look.

I came across the jsonp call today and just sorted it out.

<!DOCTYPE html>
<html>
<head>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
	$(document).ready(function(){
	 $("#b01").click(function(){
	 	$.ajax({//danielinbiti.txt文件内容：getAInfo(["<input type=&#39;text&#39; value=&#39;1222&#39;/>"])
    url: 'http://192.168.12.21:8080/systemr/danielinbiti.txt',
    dataType: 'jsonp',//跨域设置jsonp
    processData: false,
    jsonpCallback:'getAInfo',//与文件中的getAInfo对应
    type: 'get',
    success: function(data) {
      $("#myp").html(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert('error');
      alert(XMLHttpRequest.status);
      alert(XMLHttpRequest.readyState);
      alert(textStatus);
    }
   });
	 });
	 $("#b02").click(function(){// 需要在后台根据request获取callback，然后才callback(需要返回的json内容)的方式返回，getJSON是ajax的简化，只支持json格式
	 	 $.getJSON("http://192.168.12.21:8080/systemr/b.do?jsoncallback=?",function(result){
		   $("#myp").html(result);
		  });
	 });
	});
</script>
</head>
<body>
<p id="myp"><h2>通过 AJAX 改变文本</h2></p>
<button id="b01" type="button">改变内容01</button>
<button id="b02" type="button">改变内容02getJSON</button>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed explanation of Ajax using jsonp method to obtain data across domains (with code)

Related articles