如何从 AJAX 请求获得 JSON 响应

Question

我正在研究 Zend，我的 objective 是使用 AJAX 获取表单的返回内容（这样我就不必重新加载所有页面）。

这是我的资料：

ZendForm -> FormController -> View

在 FormController 上，我检查是否有 post :

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

在我看来，我用 echo $this->smartForm($Form);

显示表单

我的问题出在视图上，我不知道如何使用 AJAX 在不重新加载页面的情况下转储数组。

我的表单视图和控制器工作正常，我的问题只在方法上。如果有人能给我一段代码或一个例子，那就太好了。

谢谢

Answer 1

我使用 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

的更多信息，请参阅 here

我希望这能为您指明正确的方向

Answer 2

你没有标记 jQuery，所以我给你一个 JavaScript 唯一的答案。

Read this on sending Forms from Mozzila

这里 an answer 仅使用 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);
});

确保您通过 ZF2 在 PHTML 部分中呈现的表单包含正确的操作 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() ?: '',
    ];
}

这个答案显然遗漏了一些东西，例如使用工厂为控制器创建表单、路由配置以及对象水合作用和处理。

这是因为这些东西超出了问题的范围。

P.S。 - 我使用了 FQCN（完全合格的 Class 名称），您应该将它们包含在文件的顶部。

如何从 AJAX 请求获得 JSON 响应

How to get JSON response from AJAX request

php

ajax

json

zend-framework2