1
$.ajax({   
    url: 'http://atom-web.github.io/wattson/style-components/sity.json',
    success: function(data){
        var test = data;
    },
});
console.log(test);

Нужно загрузить json и записать его данные в переменную, что бы я смог вытаскивать разную информацию из переменной в любой момент. Не могу понять как это сделать!

4 ответа 4

0
var test = JSON.parse( data );

И консоль должна быть внутри success, а не под запросом, потому что запрос не синхронный

2
  • В том то и дело, мне нужно данные забрать из success и использовать их вне ajax 5 апр 2020 в 13:11
  • 2
    JavaScript так не работает. Если код стал асинхронным, то его уже нельзя привести в синхронный вид. Так что у вас либо всё далее будет идти в другой функции а не снизу, либо как вариант через async-await через промисы, но там тоже только видимость синхронности.
    – user347472
    5 апр 2020 в 13:13
0

Т.к. ajax - асинхронная операция, то она может длиться и 2 секунды и 22 секунды, хотя в это время может и страницу прогрузиться и пользователь что-то понажимать.

Если я правильно разглядел, то никакая работа не предполагается, пока не будет загружен json. Отсюда есть минимум один выход: вешать картинку "loading" перед запросом и убирать после получения ответа. Можно это сделать на весь экран, чтоб пользователь ничего не трогал.

let test = null;

$.ajax({   
    url: 'http://atom-web.github.io/wattson/style-components/sity.json',
    beforeSend: function( xhr ) {
        // Здесь включаем какой-то loader.gif чтобы дать пользователю понять,
        // что идёт загрузка данных
    },
    success: function(data){
        test = data;
        // Здесь выключаем loader.gif и разблокируем элементы,
        // чтобы пользователь мог начать работать
    },
});

Также можно обратить внимание на async/await функции, что позволит дождаться загрузки аякса и тоже выполнять функции далее.

0

Нашел ответ, всем спасибо

function getFileSity(fileName){
    let  request = new XMLHttpRequest();
    request.open('GET', fileName, false);
    request.send(null);
    return  JSON.parse(request.responseText);
}
let sityData = getFileSity('http://atom-web.github.io/wattson/style- 
components/sity.json');

console.log(sityData);
1
  • Так вы полностью блокируете страницу на время пока не придёт ответ. Вкладка становится нерабочей. Не стОит делать из асинхронного кода синхронный - вам удобнее писать код, но клиентам обычно боль.
    – user347472
    5 апр 2020 в 18:36
0

Крайне рекомендую использовать этот код

const wAjax=(_url)=>{
    return new Promise((resolve)=>{
        $.ajax({
            url: _url,
            type: 'GET',
            async: true, // Асинхронно!
        }).done((r)=>{
            if(!r)r = false;
            resolve(r);
        }).catch((e)=>{
            console.log(e.status, e.responseText, e);
            resolve(false);
        });
    });
};

// Три запуска на выбор (из клика можно запускать func() и убрать async)

(async()=>{
    let x = await wAjax('http://atom-web.github.io/wattson/style-components/sity.json');
    console.log(x);
})(); // autostart by ()

$('#mybutton').click(async()=>{
    let x = await wAjax('http://atom-web.github.io/wattson/style-components/sity.json');
    console.log(x);
});

const func=async()=>{
    let x = await wAjax('http://atom-web.github.io/wattson/style-components/sity.json');
    console.log(x);
};
// func(); // start

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.