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

Question

I have the following ajax jQuery code that on document.ready function downloads a file from ajaxFileDownload.php.

However, I would like it to instead of document.ready function use on submit of a form called reports. So when i click submit on my form name report, then it runs this, I would also like to parse the form field post variable called user_id to the php file.

Any ideas how this can be done?

I added: $('#reports').on('submit', function(e) {

How can I add the user_id post variable?

$(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!
    });
});

Answer 1

Try adding these two lines inside the $.fileDownload block:

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

like so:

$.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
        });
    }
});

That should send all form data to the PHP script.

If you want to send just the one field, you could use $('#user_id') in place of $(this) assuming the field in question has id="user_id" .