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 that you have read and understand our privacy policy and code of conduct.

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