如何从 AJAX 请求中获取 JSON 响应答案

【问题标题】：How to get JSON response from AJAX request如何从 AJAX 请求中获取 JSON 响应
【发布时间】：2018-11-15 02:29:23
【问题描述】：

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

这是我所拥有的：

ZendForm -> FormController -> 视图

在 FormController 上，我检查是否有帖子：

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

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

我的问题在于我不知道如何使用 AJAX 转储数组而不重新加载页面。

我的表单视图和控制器工作正常，我的问题仅在于方法。如果有人可以给我一个代码或示例，那就太好了。

谢谢

【问题讨论】：

向我们展示你的 JS
@delboy1978uk 我没有...这就是我所要求的，我已经看过很多 Js 资源，但我不明白他们放弃了很好的意见。
那么你是如何调用控制器的？
@delboy1978uk 我已经编辑了这篇文章。我只是为表单本身使用 smartForm 但如果有一篇文章我不知道如何获取数据并使用 Ajax 显示它而不重新加载所有页面
你真的需要学习javascript或者像jquery这样的javascript库来实现你的目标。

标签： php json ajax zend-framework2

【解决方案1】：

你没有标记 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() ?: '',
    ];
}

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

这是因为这些事情超出了问题的范围。

附： - 我使用了 FQCN（完全合格的类名），您应该将它们包含在文件的顶部。

【讨论】：

【解决方案2】：

我使用 jQuery 来发出 ajax 请求，因为它使用起来相当简单。这是我在最新项目中使用的代码 sn-p。

$('#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

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

【讨论】：