Question

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

这就是我所拥有的：

ZendForm - ＆gt; FormController - ＆gt;图

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

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

这里是使用Javascript发送简单表单的an answer。以下代码来自该答案。

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应用程序的正确位置。

接下来，在Controller中处理类似的数据：

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（完全限定类名），你应该将它们包含在文件的顶部。

如何从AJAX请求获取JSON响应

2 个答案: