framework7实现跨域取得json格式数据

最新推荐文章于 2023-01-17 08:00:54 发布

原创最新推荐文章于 2023-01-17 08:00:54 发布 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#json #jsonp #framework7

Jquery小技巧专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用Framework7通过JSONP技术实现跨域获取JSON格式的数据，重点在于设置`Access-Control-Allow-Origin`头部和JavaScript的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做搞一个webapp项目，采用的是framework7的框架，在跨域获取json数据的时候，老是获取不到数据，采用jquery的jsonp的话，服务端需要对数据进行处理，后来发现framework7本身有jsonp选项，能直接获取json数据，非常方便。
重点是，在服务器端，需要设置访问域名，需要在php文件头设置：
header('Access-Control-Allow-Origin:*');这个非常重要，不然获取不到数据。这个是允许跨域访问的域名授权，星号表示允许所有域名，
当然也可以设置成某个域名。

header("Access-Control-Allow-Origin:g005.com");

废话少说，献上代码。

js:

 function get_json()
{
var jurl="http://www.g1005.com/shanwang/j.php";
$$.ajax({
    url:jurl,
    contentType: "OPTIONS",
    crossDomain: true,//这个一定要设置成true，默认是false，true是跨域请求。
    dataType:"json",
    data: {
     age: "19",
     message: "good！"
    },
     beforeSend:function(e)
    {
    	//alert("ddddd");//发送数据过程，you can do something,比如:loading啥的
    },
    success: function( response ) {
    alert( response.age);//返回数据
    }
});

j.php

<?php
header('Access-Control-Allow-Origin:*');//very very very important!重要的事情重复三遍，这里非常重要，如果不设置，无法获得数据。
header('Content-Type:text/html;Charset=utf-8');
$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需
$date = array("age"=>$_GET['age'], "message"=>$_GET['message']);

$tmp= json_encode($date); //json 数据
echo $tmp;  //返回格式，必需
?>