jquery ajax结合thinkphp的getjson实现跨域的方法

下面是详细讲解“jquery ajax结合thinkphp的getjson实现跨域的方法”的完整攻略。

什么是跨域

跨域是指浏览器不能执行其他网站的脚本，是由同源策略造成的。同源策略是浏览器最核心也最基本的安全功能，是由Netscape提出的一个著名的安全策略。

什么是Ajax

Ajax：Asynchronous JavaScript and XML，指的是通过 JavaScript 对象的异步的 HTTP 通信， Ajax 的典型应用就是和服务器交换数据，更新部分网页而不是整个网页，这也是其名称的由来。

什么是jQuery

jQuery 是一个快速、简洁的 JavaScript 库，封装了HTML DOM遍历和操作、事件处理、Ajax API、动画、样式等常用操作。它使得客户端 JavaScript 的编写更加容易，同时也简化了对HTML文档的操作和事件的处理。

什么是ThinkPHP

ThinkPHP 是一个开源的、快速、简单的面向对象的（OOP）PHP 框架，具有轻量级和高性能的特点，实现了 MVC 架构和 RESTful 设计模式，是国内使用较为广泛的 PHP 框架之一。

实现跨域的方法

JSONP

JSONP（JSON with Padding）是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。JSONP其实就是一个callback的函数名，然后后端解析数据以后，直接输出函数调用，使得前端可以直接接收到数据并进行处理，这样就绕开了浏览器的同源策略限制。

CORS

CORS（Cross-Origin Resource Sharing），即跨域资源共享，是 W3C 标准，它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。

代理转发解决跨域问题

代理转发是将客户端的请求转发给另一台服务器处理，并将得到的结果返回给客户端。常用的场景有客户端请求服务器的图标、手机代理请求境外服务器等。

jQuery Ajax 请求

jQuery 为 Ajax 定义了几个 API，简化了AJAX请求的操作。

jQuery.ajax()

jQuery.ajax() 函数是 jQuery 的最底层的 API，可以灵活处理所有的可配置选项。下面是一个简单的 Ajax 调用的例子：

$.ajax({
  url: "/some/url",
  type: "POST",
  data: {
    name: "John",
    location: "Boston"
  }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

jQuery.get()

jQuery.get() 函数是 jQuery 的一个简便的 API，用来发送 GET 请求。与 $.ajax() 相比，它的接口参数要简单得多，下面是一个简单的示例：

$.get("/test.php", {param1: "value1"}, function(data) {
  console.log(data);
});

jQuery.post()

jQuery.post() 函数是 jQuery 的一个简便的 API，用来发送 POST 请求。与 $.get() 相比，它发送POST请求并不会改变接口，而是使用 data 发送数据。下面是一个简单的示例：

$.post("/test.php", {param1: "value1"}, function(data) {
  console.log(data);
});

在ThinkPHP中通过Ajax获取JSON数据的方法

控制器编写

在控制器中编写方法，将结果返回给前端，并使用 json_encode 将结果格式化为 JSON 格式。

public function getJson()
{
    $data = array('name' => 'John', 'age' => 18);
    $this->ajaxReturn($data, 'json');
}

异步加载JSON数据

通过jQuery.ajax() 或 jQuery.get() 函数，向控制器请求 JSON 数据。

$.get('/index.php/Home/Index/getJson', function(response) {
    console.log(response);
});

使用jQuery.getJSON()跨域请求JSON数据

如果接口支持 JSONP 请求方式，则可以使用 jQuery.getJSON() 函数来跨域请求 JSON 数据。

$.getJSON('http://example.com/data.php?callback=?', function(data) {
    console.log(data);
});

总结

通过本文，我们了解了跨域、Ajax、jQuery 和 ThinkPHP 的概念，并讲解了实现 Ajax 跨域请求 JSON 数据的三种方法。对于跨域问题，在实际开发中，需要根据实际情况进行选择使用。