在表单提交上创建事件处理程序

Question

我具有提交表单的功能：

function submit_form(form) {
            $( form ).submit(function(e) {
                // Prevent form submission
                e.preventDefault();

                // Get the form instance
                var $form = $(e.target);

                // Use Ajax to submit form data
                $.ajax({
                    url : '/section' + $form.attr('action'),
                    type: "POST",
                    data: $form.serialize(),
                    mimeType: "multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData:false,
                    success:function(data, textStatus, jqXHR) {
                        console.log(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        //if fails
                    }
                });
            });
        }

它将POST请求发送到PHP页面。

在我的PHP页面中

if($_POST)
    echo 'form posted';
    exit();
}

此过程正常，但“数据”未返回“已发布的表单”

我在表单标签中调用该函数：

<form id="edit_group" method="post" action="page.php" onsubmit="submit_form(\'#edit_group\');">

进一步的评论/讨论，请在下面查看我使用的代码：

我的代码如下：

<?php
if($_POST) {
    echo 'post';
    exit();
}
?>

<form id="edit_group" class="ajax_form" method="post" action="/page.php">

</form>

<script type="text/javascript">
$('.ajax_form').submit(function(e) {
    // Prevent form submission
    e.preventDefault();

    // Get the form instance
    var $form = $(e.target);

    // Use Ajax to submit form data
    $.ajax({
        url : '/section' + $form.attr('action'),
        type: "POST",
        data: $form.serialize(),

        contentType: false,
        cache: false,
        processData:false,
        success:function(data, textStatus, jqXHR) {
            console.log("hi");
            console.log(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            //if fails
        }
    });
});
</script>

Answer 1

尝试一下。

摆脱函数submit_form(form)的束缚，只需离开提交处理程序即可。

        $( form ).submit(function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Use Ajax to submit form data
            $.ajax({
                url : '/section' + $form.attr('action'),
                type: "POST",
                data: $form.serialize(),
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData:false,
                success:function(data, textStatus, jqXHR) {
                    console.log(data);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    //if fails
                }
            });
        });

此外，将您的html标记更改为此。（删除onsumbit属性）

<form id="edit_group" method="post" action="page.php" >

Answer 2

通过对问题的评论，解决了一些问题。

在表单提交上创建事件处理程序

该逻辑最初具有用于表单的内联onsubmit，其逻辑上在表单上创建了一个提交事件处理程序。但是，要让事件处理程序处理事件，它必须在事件发生之前就存在。因此，这将导致处理第一次不会发生。取消onsubmit，并执行一次该方法以创建逻辑事件绑定将使其在第一次（而不是多次）提交表单时起作用。

contentType：假

默认情况下，jQuery将ContentType设置为application/x-www-form-urlencoded，这是标准形式提交给请求的内容。这告诉服务器以特定方式处理url查询字符串和/或正文。在这种情况下，它应该期望它采用查询字符串格式，并且可以将请求自动解析为您的语言期望的任何构造。对于PHP，这将是$ _GET / $ _ POST / $ _ REQUEST变量。

通过将其设置为false，您将告诉jQuery不要在其中放置该标头。因此，如果没有标题，PHP将不知道需要从主体加载$ _GET或$ _POST，因为它不知道数据的结构。

从ajax请求中删除此选项将使jQuery成为默认值，这将使PHP加载$ _POST变量，这将导致条件函数按预期的方式运行。

未检测到Ajax POST至PHP

2 个答案:

在表单提交上创建事件处理程序

contentType：假