ajax+php+jquery+json 跨域实例

<html>
<head>
    <meta charset="UTF-8">
    <title>JQueryAjax+PHP</title>
    <script src="jquery-2.2.0.min.js"></script>
</head>
    <body>
    <button type="button" class="butn">ajax提交</button><br>
    <span class="con"></span>
    <script type="text/javascript">
	$(document).ready(function() {
	    $(".butn").click(function() {
		var myJson = {
			"name": "yc",
			"pwd": 1024
		};
	        $.post('ajax.php', myJson, function(data) {
			alert(data);
			$(".con").html(data);
		})
	    })
	})
</script>
</body>
</html>

PHP：

<?php  
	if($_SERVER["REQUEST_METHOD"] === "POST"){
		echo '用户名:',$_POST['name'],',密码：',$_POST['pwd']."<br>"; 
	}
?>

上面是：传一个json到php 返回一个字符串的例子

下面是：传一个json到php 返回一个json对象的例子

<?php  
	 header('Content-Type:application/json');//这个类型声明非常关键 ,不然返回的json对象读取不了值
	if($_SERVER["REQUEST_METHOD"] === "POST"){
		$arr=array("name" => $_POST["name"],"pwd" => $_POST["pwd"]); //要返回json格式，要先创建一个键值数组，再转化为json格式
		echo json_encode($arr);
	}
?>

除了$.post 还有$.get方法都是比较方便的方式

$.get(url,function(){
//回调函数处理
})

<?php  
	 header('Content-Type:application/json');
	if($_SERVER["REQUEST_METHOD"] === "GET"){
		$newArr=array();
		$newArr["name"]="qqqqq";
		echo json_encode($newArr);
	}
?>

$.ajax 方法功能比较强，参数也多点

var json={
	"name":"余成",
	"age":22
}
var url="demo.php"
$.ajax({
	type:"post",
	url:url,
	async:true, 
	data:json,
	success:function(date){
		alert(date.name);
		$("#showDate").html(date.name);
	},
	error:function(){
		alert("出错了！")
	}
});

 var data1 = $("#form1").serializeArray(); //自动将form表单封装成json

解决跨域问题的方法：

XHR2

HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持

只需要在服务端填上响应头：

1

2

3

 
          header("Access-Control-Allow-Origin:*"); 
         

 
          /*星号表示所有的域都可以接受，*/ 
         

2.jsonp 实例

<?php  
$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需  
$date = array("age"=>$_GET['age'], "name"=>$_GET['name']);  
$date["msg"]="err";  
$date["info"]="因人品问题，发送失败";  
$tmp= json_encode($date); //json 数据  
echo $callback . '(' . $tmp .')';  //返回格式，必需  
?>

$(document).ready(function() {
	$("#btn").click(function(k) {
		var myData={"name":"yc","age":18};
		$.ajax({
			type: 'POST', //这里用GET  
			url: 'http://172.19.11.165:8082/',
			dataType: 'jsonp', //类型  
			data: myData,
			jsonp: 'callback', //jsonp回调参数，必需  
			async: false,
			success: function(result) { //返回的json数据  
				alert(result.name+" "+result.age); //回调输出  
			},
		})
	});
});

3.代理

ajax+php+jquery+json 跨域实例

解决跨域问题的方法：

猜你喜欢