php jq jquery getJSON跨域提交数据完整版

PHP、jQuery、JSONP、CORS 跨域请求

在 Web 开发中经常会遇到跨域请求的场景，比如一个 Web 页面上需要通过 AJAX 请求外部的数据，或者我们需要调用第三方提供的接口。在跨域请求中，后端常用的解决方案包括 JSONP 和 CORS，前端常用的解决方案包括 Ajax 和 Fetch。

一、JSONP

JSONP(JSON with Padding) 是 json 的一种“使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据是一种非正式传输协议。

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的 JSON 数据。

JSONP 的原理是动态添加 script 标签来进行跨域请求，使用 script 标签的时候浏览器会发出一次 GET 请求，这个 GET 请求会携带一个回调函数名，服务端需要根据这个回调函数名来返回对应的 JS 代码。

JSONP 的缺点在于只支持 GET 请求，不支持 POST 请求。

<?php
  $callback = $_GET['callback'];
  $data = array('name' => '张三', 'age' => 18);
  echo $callback . '('. json_encode($data) .')';
?>

$.ajax({
  url: 'http://localhost/data.php?callback=mycallback',
  dataType: 'jsonp',
  jsonpCallback: 'mycallback',
  success: function (data) {
    console.log(data);
  }
});

二、CORS

CORS(Cross-Origin Resource Sharing) 跨域资源共享，是一种机制，它使用额外的 HTTP 头来告诉浏览器，让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。

CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

服务端设置 Access-Control-Allow-Credentials: true 可以指定本次请求是否需要带上 cookie。

服务端设置 Access-Control-Expose-Headers: Authorization 可以让指定的 headers 可以被外部访问。

// PHP 后端示例
header('Access-Control-Allow-Origin: http://localhost:8000');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
header('Access-Control-Expose-Headers: Authorization');

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  exit; // finish preflight CORS requests here
}

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$username = $request->username;

header('Content-type: application/json');
echo json_encode(array('state' => 'ok'));

// jQuery 前端示例
$.ajax({
  type: 'POST',
  url: 'http://localhost:8080/api/login',
  crossDomain: true,
  xhrFields: {
    withCredentials: true
  },
  headers: {
    Authorization: 'Bearer ' + token
  },
  data: { username: 'test' },
  success: function (result) {
    console.log(result);
  }
});

三、POST 请求示例

$.ajax({
  type: 'POST',
  url: 'http://localhost:8080/api/login',
  crossDomain: true,
  xhrFields: {
    withCredentials: true
  },
  headers: {
    Authorization: 'Bearer ' + token
  },
  data: { username: 'test' },
  success: function (result) {
    console.log(result);
  }
});

其中，withCredentials 表示是否允许携带 cookie。

四、GET 请求示例

$.ajax({
  type: 'GET',
  url: 'http://localhost:8080/api/users',
  crossDomain: true,
  xhrFields: {
    withCredentials: true
  },
  headers: {
    Authorization: 'Bearer ' + token
  },
  data: { page: 1, limit: 10 },
  success: function (result) {
    console.log(result);
  }
});

五、总结

以上就是关于 PHP、jQuery、JSONP、CORS 跨域请求的相关内容。根据需求选择不同的解决方案，确保数据的安全和有效传输。