Solve the problem that ajax cannot access local files (using js cross-origin principle), ajaxjs

Solve the problem that ajax cannot access local files (using js cross-origin principle), ajaxjs

The blogger encountered a difficulty in developing a non-Background query system with only the front-end. How to Use Ajax to read his local json file, Baidu and Google, I found that most of the articles are about modifying browser parameters, but I think that users need to modify browser parameters while using them, which obviously reduces the user experience. After a while, I found that the cross-origin principle of javascript can be used to solve this bottleneck. Convert the json file to a js object file to read the file, and then write a function to parse the js object.

First, describe the js cross-origin principle and jsonp Technology (if not detailed, Baidu and Google can be used on their own)

Src can be used for cross-origin requests, but this resource cannot be parsed as js. The resource is not js, So errors may occur when parsing json.

There is an object in the middle. Call fun to pass this object in,

The defined function fun can be regarded as a callback function after the request is successful.

Jsonp essence: uses the script tag to cross-origin to break through the cross-origin restriction request. The returned data is packaged with a function.

Jsonp is used to solve the problem of js cross-origin request data. Its principle is to indirectly request data through the script tag.

Jsonp must meet three conditions:

1. Request resources through script src

2. Use the callback function to package data in the requested resource.

3. The caller must define the callback function.

Paste the demo below to demonstrate how to use Ajax to read local files. ps: without a server

Below is the html page opened above (to show that the local file is successfully read)

Added test.html code

<Script type = "text/javascript" src = "js/jquery-easyui-1.3.2/jquery-1.8.0.min.js"> </script> <script> function fun (data) {// var dataj = JSON. parse (data. pro); // converts a json string to a json object alert (data. pro); var obj = eval (data. pro); // alert (obj. name); // $. each (obj, function (index, position) {// alert (+ position ['name']); // html + = "<option value = '" + position ['name'] + "'>" + position ["name"] + "</option> "; //}); for (var I = 0; I <obj. length; I ++) {alert (obj [I]. name) ;}alert (1) ;}</script>

/* The following code is the code that previously used ajax to read local json files. It cannot be implemented. during runtime, do not paste the following code */<script type = "text/javascript" src = "json/abc. json "> </script> <script >$ (function () {alert ($);/* $. ajax ({type: "GET", url: "json/positionMenu. json ", dataType:" json ", success: function (data) {alert (data) ;}}); */}) </script>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.