Retrieve data using ajax requests.

slug: 57
title: Using Ajax to Retrieve Data
date: 2021-03-19 13:01:00
updated: 2021-12-01 09:03:03
categories:
- Technology
tags:
- js
- ajax

Using jQuery to make an Ajax request for data is a convenient way. I have created a local data.json file and used the get method to request the data. Below is part of the code:

// Ajax request to retrieve data
function picShow(){
    var str = '';
    $.ajax({
        url:'./js/data.json',
        type:'get',
        dataType:'json',
        success:function(data){
            console.log('success')
        },
        error: function() {
            console.log('error')
        }
    })
}
picShow();

However, there is a drawback to doing this. It cannot be previewed locally because browsers prohibit clients from directly accessing local data, which can be considered a cross-origin issue. But this is also to ensure user security. Of course, this is very frustrating for front-end developers!

Actually, the solution is quite simple. By using a node server and running it locally with live server, Ajax can retrieve the data. Of course, there are other better solutions, such as running it directly on a server using JSONP, etc.

If you are not familiar with live server, you can search for it on Baidu. It is also a useful technique.