PHP json格式和js json格式 js跨域调用实现代码

2023年5月27日上午10:19 • JavaScript

下面是关于“PHP json格式和js json格式 js跨域调用实现代码”的攻略。

PHP与JSON格式

JSON格式介绍

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，主要用于前后端数据交互。JSON格式由键值对组成，数据之间用逗号分隔，键值对之间用冒号分隔。JSON格式支持数组和嵌套对象的格式，数据类型包括字符串、数字、布尔值、数组和对象。

以下是一个JSON格式的例子：

{
  "name": "张三",
  "age": 25,
  "hobby": ["篮球","游泳"],
  "address": {
    "province": "广东省",
    "city": "深圳市",
    "district": "南山区"
  }
}

PHP通过JSON格式传递数据

在PHP中，可以通过使用json_encode将数组转换成JSON格式数据，使用json_decode将JSON格式数据转换成数组。

例如，将PHP数组转换为JSON格式：

$data = array(
  "name" => "张三",
  "age" => 25
);

$json_data = json_encode($data);

将JSON格式数据转换为PHP数组：

$json_str = '{"name":"张三","age":25}';
$data = json_decode($json_str, true);

其中，json_decode函数的第二个参数为true时，表示将JSON数据转换为数组而不是对象。

JS与JSON格式

JSON格式介绍

同上。

JS通过JSON格式传递数据

在JS中，可以使用JSON对象的方法，将JS对象（数组也是一种对象）转换成JSON格式数据，也可以将JSON格式数据转换成JS对象。

例如，将JS对象转换为JSON格式：

var data = {
  name: "张三",
  age: 25
};

var json_data = JSON.stringify(data);

将JSON格式数据转换为JS对象：

var json_str = '{"name":"张三","age":25}';
var data = JSON.parse(json_str);

其中，JSON.parse方法将JSON格式数据转换为JS对象，JSON.stringify方法将JS对象转换为JSON格式数据。

JS跨域调用

同源限制

同源是指协议、主机名和端口号都相同的两个URL，同源限制是浏览器对JS发出跨域请求的安全限制策略。在非同源的情况下，浏览器会拒绝跨域请求。

JSONP跨域调用

为了解决JS跨域调用的问题，可以使用JSONP技术，JSONP（JSON with Padding）是一种非官方的跨域调用方式。它利用script标签的src属性不受同源限制的特性，将需要请求的数据通过JSON格式包装后，作为回调函数的参数动态插入到script标签的src属性中，然后通过回调函数处理返回的数据。

以下是一个JSONP的例子：

<script>
  function showData(data) {
    console.log(data);
  }
</script>

<script src="http://www.example.com/data.php?callback=showData"></script>

其中，data.php文件会返回一个将数据包装成JSON格式的JavaScript语句，并在最外层包裹一个回调函数调用，如下：

showData({"name":"张三","age":25});

CORS跨域调用

CORS（Cross-Origin Resource Sharing）跨域资源共享是W3C标准的一种跨域通信机制。它通过响应头中的Access-Control-Allow-Origin字段，来告知浏览器哪些网站可以访问资源，从而达到解决JS跨域的问题。

在服务端，需要设置响应头，例如PHP设置响应头的代码如下：

header('Access-Control-Allow-Origin: http://www.example.com');

在JS中，可以使用XMLHttpRequest对象访问跨域资源（需要浏览器支持CORS），代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/data.php', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

示例说明

示例1

PHP将数组转换为JSON格式，JS通过JSONP跨域调用获取数据。

PHP代码（data.php）：

<?php
header('Content-type: application/javascript');
$data = array(
  "name" => "张三",
  "age" => 25
);
$json_data = json_encode($data);
echo $_GET['callback'] . '(' . $json_data . ')';
?>

JS代码：

<script>
  function showData(data) {
    console.log(data);
  }
</script>

<script src="http://www.example.com/data.php?callback=showData"></script>

在浏览器中运行JS代码，可以看到控制台输出：

Object {name: "张三", age: 25}

示例2

JS通过XMLHttpRequest对象访问跨域资源。

PHP代码（data.php）：

<?php
header('Access-Control-Allow-Origin: http://www.example.com');
$data = array(
  "name" => "张三",
  "age" => 25
);
$json_data = json_encode($data);
echo $json_data;
?>

JS代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/data.php', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

在浏览器中运行JS代码，可以看到控制台输出：