Divnenkiy

Асинхронный запрос и возврат результата

Recommended Posts

Здравствуйте.

Мучаюсь не первый день с такой проблемой.

Есть jquery, есть модальная форма, сначала мне нужно выполнить GET запрос на сервер, и в зависимости от того, что сервер ответит решить можно ли открывать форму или нет.

Если использоваться асинхронный запрос, то понятно, что форма откроется в любом случае. А если использовать синхронный то всё хорошо, но консоль браузера ругается, что я не правильно поступаю и мои методы Deprecated.

Как сейчас правильно поступать в современных тенденциях?

Для понимания что я хочу, изображу это примерно так:

function getAccess(){

  ... запрос GET на сервер

return ответ

}

function showModalWindow(){

если getAccess() то открываем форму

}

Не представляю как это вырулить асинхронно :(

Share this post


Link to post
Share on other sites

и

пример то приведите что сделано

16 минут назад, Divnenkiy сказал:

Если использоваться асинхронный запрос, то понятно, что форма откроется в любом случае.

с чего это

Share this post


Link to post
Share on other sites
var csrf_token = "";

function getToken() {
    $.ajax({
        url:'/admin/csrf-token/',
        type:'GET',
        dataType:'json',
        data: '',
        async: false,
        cache: false,
        timeout: 5000,
        success: function (data) {
            csrf_token = data['csrf-token'];
        },
        error: function(error) {
            console.log('Ошибка получения токена: ' + error.responseText);
        }
    });
}

$("#myModal").on("show.bs.modal", function(event) {

    getToken();
    var form = $("#myForm").serialize()

    $.ajax({
        url:'/admin/secretform',
        type:'POST',
        dataType:'json',
        data: form,
        async: true,
        cache: false,
        timeout: 5000,
        beforeSend: function(request) {
            return request.setRequestHeader('X-CSRF-TOKEN', csrf_token);
        },
        success: function (data) {
            $("#myModalLabel").text(data['title']);
            $("#name").val(data['name']);
            $("#email").val(data['email']);
        },
        error: function(error) {
            $(".modal-body").html('Ошибка обработки данных: ' + error.responseText);
        }
    });
});

В этом варианте работает. Но консоль говорит, что не по феншую поступаю. В JS живу всего неделю, поэтому сознание ещё не прижилось, сильно не ругайте.

Эм.. код немного не совпадает с задачей из 1 поста, но суть в том, что при открытии формы мне нужно обязательно дождаться завершения функции getToken(), чтобы в переменную csrf_token гарантированно встало значение.

Share this post


Link to post
Share on other sites

сори - я временно в больнице лежу)) поэтому  баги сами отлавливайте если будут.  самое главное уловите как эта хрень работать должна

Скрытый текст

var csrf_token = "";

function getToken(foo) {
    $.ajax({
            url:'/admin/csrf-token/',
            type:'GET',
            dataType:'json',
            data: '',
            cache: false,
            success: function (data) {
                csrf_token = data['csrf-token'];

                //проверяем передана ли функция. если да - выполняем её. ну и естественно сунем в неё полученные данные
                if (typeof foo == 'function') {
                    foo(data)
                }

            },
            error: function(error) {
                console.log('Ошибка получения токена: ' + error.responseText);
            }
        });
}
// клик по кнопке, а не при открытии
$("#myModal-btn").on("click", function(event) {

        $callback  = function(dataToken) {
            var form = $("#myForm").serialize(),
            modal  = $("#myModal");
            $.ajax({
                    url:'/admin/secretform',
                    type:'POST',
                    dataType:'json',
                    data: form,
                    cache: false,
                    beforeSend: function(request) {
                        return request.setRequestHeader('X-CSRF-TOKEN', csrf_token);
                    },
                    success: function (data) {
                        // здесь уже условия проверяйте и вызывайте окно когда надо
                        // modal.modal('show')
                        $("#myModalLabel").text(data['title']);
                        $("#name").val(data['name']);
                        $("#email").val(data['email']);
                    },
                    error: function(error) {
                        $(".modal-body").html('Ошибка обработки данных: ' + error.responseText);
                    }
                });
        }


        getToken($callback);

    });

 

Edited by Николя223

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By toplife
      Интернет-маркетинговое агентство Top-Life. Мы ищем в команду Junior Web разработчика.
       
      Что мы ожидаем от кандидата:
      Навыки HTML5, CSS3, JavaScript; Знания PHP5-7‚ MySQL‚ jQuery, ajax; Опыт в верстке; Наличие опыта разработки и знание различных CMS (1С Битрикс, UMI, ModX, WordPress и другие) будет плюсом; Опыт работы и наличие портфолио приветствуется; Умение и желание работать в команде; Аккуратность (осмысленность) в работе.  
      Задачи, которые вам предстоит решать:
      Современная адаптивная кроссбраузерная верстка (HTML5+CSS3); Применение готовой верстки к CMS (1С-Битрикс, Wordpress);  
      Условия:
      Оформление по ТК РФ Заработная плата: от 20 000 до 40 000 руб;  График работы: 5/2 с 10.00–19.00, обед с 14.00–15.00; На территории работодателя; Молодой‚ профессиональный коллектив; Корпоративные мероприятия; Чай, кофе и печеньки с нас; Мы даем возможность не просто работать‚ а создавать и развиваться. Для связи:
      Антон
      тел: 8(981)897-42-46
      mail: a.majstrenko@top-life.su
      hh: https://spb.hh.ru/vacancy/30397980
    • By Olesiy
      Здравствуйте дорогие форумчане! Сделала всплывающую форму обратной связи на своем сайте, все работает,нормально, вот только после отправки письма форма не закрывается, нужно нажимать на крестик для закрытия. Как сделать так , что бы после успешной отправки форма сама закрывалась.Если кому не трудно подскажите ПОЖАЛУЙСТА. P.S в js не буб бум.
      Вот форма:
      <div class="popup"> <div class="popup-dialog">  <div class="popup-content">  <button class="popup-close"> &times;</button> <form  class="top" action="smart.php" method="POST"> <h4>Submit your application</h4> <label for="name"> Your  name<input type="text" name="name" value="" placeholder="name"></label> <label for="emeil"> Your e-meil<input type="text" name="e-meil" value="" placeholder="emeil" required></label> <label for="phone">Your Phone<input type="text" name="phone"  id="phone" value="" placeholder="phone"></label> <textarea name="comment" id="comment-field"  rows="4">comment</textarea> <button class="button-block button-btn" type="submit">  to order</button> </form> </div> </div> </div>  
      Вот скрипт отправки:
      $('form').submit(function(event) { event.preventDefault(); var th = $(this); $.ajax({ type: "POST", url: "smart.php", data:$(this).serialize() }).done(function() { $(this).find("input").val(""); alert("Спасибо за заявку!"); $("form").trigger("reset"); }); return false; }); И на всякий случай скрипт всплытия окна
      $(document).ready(function() { $('.popup-btn').on('click', function (event) { $('.popup').fadeIn();// к тому что нужно показать, fadeIn с анимацией }); $('.popup-close').on('click', function (event) { event.preventDefault(); $('.popup').fadeOut(); }); })  
    • By Лелик
      Очень нужен фильтр товаров на ajax без БД. В интернете нашла подходящий пример. Могу провести всю рутинную работу (коей очень много) по наполнению фильтра. Есть проблемы:
      1. не знаю, как проверить его на ошибки, и
      2. не знаю, как встроить в сайт
      Прошу провести эти две работы. Для заинтересованного программиста пришлю более подробное описание ТЗ
  • Member Statistics

    46,698
    Total Members
    3,128
    Most Online
    Dmitry3258
    Newest Member
    Dmitry3258
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.