表单提交上的 jQuery 和 Ajax - 解析 POST 数据答案

【问题标题】：jQuery and Ajax on Form submit - parse POST data表单提交上的 jQuery 和 Ajax - 解析 POST 数据
【发布时间】：2014-02-24 00:50:25
【问题描述】：

我有以下 ajax jQuery 代码，它在 document.ready 函数上从 ajaxFileDownload.php 下载文件。

但是，我希望在提交名为报告的表单时使用它而不是 document.ready 函数。所以当我点击我的表单名称报告上的提交时，它会运行这个，我还想将名为 user_id 的表单字段 post 变量解析为 php 文件。

有什么想法可以做到这一点吗？

我加了：$('#reports').on('submit', function(e) {

如何添加 user_id post 变量？

$(function () {
    $('#reports').on('submit', function(e) {
        var $preparingFileModal = $("#preparing-file-modal");
        $preparingFileModal.dialog({
            modal: true
        });
        $.fileDownload('ajaxFileDownloader.php?' + Math.random(), {
            successCallback: function (url) {
                $preparingFileModal.dialog('close');
            },
            failCallback: function (responseHtml, url) {
                $preparingFileModal.dialog('close');
                $("#error-modal").dialog({
                    modal: true
                });
            }
        });
        return false; //this is critical to stop the click event which will trigger a normal file download!
    });
});

【问题讨论】：

您打算从哪里获得user_id？你也读过data withing jQuery.Ajax()吗？
@kingkero 我打算从同一个报告表单中获取 user_id，有一个隐藏字段，其值为 user_id

标签： javascript jquery ajax

【解决方案1】：

尝试在$.fileDownload 块内添加这两行：

httpMethod: 'POST',
data: $(this).serialize()

像这样：

$.fileDownload('ajaxFileDownloader.php?' + Math.random(), {
    httpMethod: 'POST',
    data: $(this).serialize(),
    successCallback: function (url) {
        $preparingFileModal.dialog('close');
    },
    failCallback: function (responseHtml, url) {
        $preparingFileModal.dialog('close');
        $("#error-modal").dialog({
            modal: true
        });
    }
});

这应该将所有表单数据发送到 PHP 脚本。

如果您只想发送一个字段，则可以使用$('#user_id') 代替$(this)，假设相关字段具有id="user_id"。

【讨论】：