如何将外部JSON文件传递到可以在任何地方访问的javascript变量中

时间:2018-02-06 08:02:07

标签: javascript jquery json ajax

我有一个json文件,我一直在我的项目中使用这个结构

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

$response = function ($data = []) {
    header('Content-Type: application/json');
    exit(json_encode($data));
};   

$con = mysqli_connect('localhost', 'root', '', 'qc_artwork');

if (!$con) {
    http_response_code(500);
    $response(['error' => 'could not connect database']);
}

// auto complete search term 
if (isset($_GET['term'])) {
    //get search term
    $searchTerm = isset($_GET['term']) ? '%'.$_GET['term'].'%' : null;

    //get matched data from name table
    $stmt = $con->prepare("SELECT * FROM artwork WHERE name LIKE ? ORDER BY name ASC");
    $stmt->bind_param('s', $searchTerm);

    $result = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);

    foreach ($result as $row) {
        $data[] = [
            'id' => $row['id'],    
            'label' => $row['name'],    
            'value' => $row['id'],    
        ];
    }
    $response($data);
}

// result item
if (!empty($_GET['id'])) {
    //get matched data from name table
    $stmt = $con->prepare("SELECT * FROM artwork WHERE id = ? LIMIT 1");
    $stmt->bind_param('i', $searchTerm);
    $response($stmt->get_result()->fetch(MYSQLI_ASSOC));
}
?>

从上面的示例中可以看出,json文件已经传递给了一个数据变量...我在其中放置了其他外部javascript文件。

同时,现在可以从链接生成/访问json文件,并且我被告知使用ajax将json数据放入项目中。

我在<script src="js/main.js"></script> <script> var data = {"bills":[{"id":1,"name":"DStv","reference":"SmartCard Number","logo":"bill\/logo\/24Io6IqObQ8ddi5.jpg","active":1,"lifestyle":0},{"id":3,"name":"GOtv","reference":"IUC Number","logo":"bill\/logo\/mCNl5X1ZCfph4kg.jpg","active":1,"lifestyle":0},{"id":6,"name":"Startimes"... </script> <script src="js/bill.js"></script> <script src="js/airtime.js"></script> 文件中有此代码,我有以下代码,但无法在main.js文件中访问

bills.js

2 个答案:

答案 0 :(得分:1)

如果它是静态变量并且只拉一次,那么你可以使用Javascript cookie 而不是在同一个文件中创建全局变量,以便在需要的地方获取值

 $.ajax({
       type: "GET",
       url: "http://bills.payit.ng/bills/resources",
       success: function(result)
       {
           data = result;
           setCookie("myStaticDataPerDay",data,1)
           loadData(result);

       }
   });
});

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

你应该能够通过

检索它
console.log(getCookie("myStaticDataPerDay"));
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

您也可以将其保存在jquery cookie中

$.ajax({
       type: "GET",
       url: "http://bills.payit.ng/bills/resources",
       success: function(result)
       {
           data = result;
           $.cookie('myStaticData', data);
           loadData(result);

       }
   });
});

你将需要通过

获得价值
var data=JSON.parse($.cookie("MyStaticData"))

<强>更新 如果您有IOS用户,也可以使用localStorage,因为ios不接受cookie

答案 1 :(得分:0)

您可以使用事件传递数据:

// in ajax success
var event = new CustomEvent("custom-event", {data: result});
window.dispatchEvent(event);

然后在您的bill.js脚本或您需要数据的任何地方:

window.addEventListener("custom-event", function(e) {
  console.log("custom-event", e.data);
});