Как получить ответ JSON от AJAX-запроса - PullRequest
Новая
       10

Как получить ответ JSON от AJAX-запроса

0 голосов
/ 05 июня 2018

Я работаю над Zend, и моя цель - получить возвращенное содержимое формы с помощью AJAX (чтобы мне не пришлось перезагружать всю страницу).

Вот что у меня есть:

ZendForm -> FormController -> View

В FormController я проверяю, есть ли сообщение: 

if(isPost) {$this->sendJson($data);}
else {return $From;}

На мой взгляд, я отображаю форму с echo $this->smartForm($Form);

Моя проблема в том, что я не мог понять, как использовать AJAX для выгрузки массива без перезагрузки страницы.

Мой Form View и контроллер работают нормально, моя проблема только в методе.Если бы кто-то мог дать мне снимок кода или пример, который был бы великолепен.

Спасибо

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Вы не пометили jQuery, поэтому я даю вам ответ только на JavaScript.

Прочтите это при отправке форм из Mozzila

Вот ответ об отправке простой формы с использованием только Javascript.Приведенный ниже код взят из этого ответа. 

const form = document.querySelector("#debarcode-form");
form.addEventListener("submit", e => {
    e.preventDefault();
    const fd = new FormData(form);
    const xhr = new XMLHttpRequest();
    xhr.addEventListener("load", e => {
        console.log(e.target.responseText);
    });
    xhr.addEventListener("error", e => {
        console.log(e);
    });
    xhr.open("POST", form.action);
    xhr.send(fd);
});

Убедитесь, что форма, созданная вами в части PHTML через ZF2, содержит правильный URL-адрес действия (поэтому вы использовали URL ViewHelper следующим образом: <?= $this->url('name/of/path') ?>).Это сделано для того, чтобы JavaScript отправлял данные в правильное место вашего приложения Zend Framework.

Затем обработайте данные в вашем контроллере следующим образом: 

public function handleFormAction()
{
    /** @var \Zend\Http\Request $request */
    $request = $this->getRequest();

    /** @var \Some\Namespace\Of\CustomForm $form */
    $form = $this->getCustomForm(); // You've created this using a Factory of course
    if ($request->isPost()) {
        $form->setData(\Zend\Json\Json::decode($request->getContent(), Json::TYPE_ARRAY));

        if ($form->isValid()) {
            $object = $form->getObject();

            // object handling, such as saving

            // Success response
            // Redirect to success page or something
            $this->redirect()->toRoute('success/route/name', ['id' => $object->getId()]);
        }

        // Fail response, validation failed, let default below handle it ;-) 
    }

    if ($request->isXmlHttpRequest()) {
        return new \Zend\View\Model\JsonModel([
            'form'               => $form,
            'validationMessages' => $form->getMessages() ?: '',
        ]);
    }

    // Default response (GET request / initial page load (not async) )
    return [
        'form'               => $form,
        'validationMessages' => $form->getMessages() ?: '',
    ];
}

В этом ответе явно не хватает таких вещей, как создание формы для контроллера с использованием фабрики, конфигурации маршрутизации игидратация и обработка объекта.

Это потому, что эти вещи не входят в сферу вопроса.

PS - я использовал FQCN (полное имя класса), вы должны включить их в начало файла.

0 голосов
/ 09 июня 2018

Я использую jQuery для выполнения ajax-запросов, поскольку он довольно прост в использовании.Вот фрагмент кода, который я использовал в своем последнем проекте. 

$('#category_form').on('click', 'input[type="submit"]', function (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    var form = $('#category_form').find('form');
    form.find('img.loadingSquares').css('visibility', 'visible');
    $('#overlay').css('display', 'block');
    clearMessage();
    var formData = new FormData(form[0]);
    formData.append('submit', $(this).val());
    $.ajax({
        method: "POST",
        url: "/author/categories/get-products",
        dataType: "json",
        processData: false,
        contentType: false,
        data: formData,
    }).done(function (json) {
        if (json.message) {
            displayMessage(json.message);
        }
        if (json.products) {
            console.log(json.products);
            $('#category_form').find('#products-container').empty().html(json.products);
        }
    }).fail(function () {
        displayMessage(ajaxFailGenericError);
    }).always(function () {
        $('#overlay').css('display', 'none');
        $('img.loadingSquares').css('visibility', 'hidden');
    });
});

См. здесь для получения дополнительной информации о jQuery

Я надеюсь, что это указывает вам верное направление

...