jquery - 如何使用jquery从模态框中通过ajax提交表单

Question

我很难从模态框中使用 ajax 提交表单。

        $( "#modal" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Submit Form": function() {

                    $("#my-form").submit(function(event) {
                        event.preventDefault();
                            $.post('myurl', function(data) {
                                $('.result').html(data);
                            });
                    });

            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });     

当我尝试通过单击“提交表单”按钮提交表单时，实际上没有任何反应。

我要做的就是使用 modalbox 按钮通过 ajax 提交表单。然后控制器将返回一个简单的文本“表单已处理”，然后.result将使用控制器的响应进行更新。

编辑

我的 html 表单如下所示：

<form id="my-form" action="myurl" method="post" enctype="multipart/form-data">
    <fieldset>
        <legend>Upload file</legend>
        <p>
                            <label for="fileData">File</label>
            <br />
            <input id="fileData" name="fileData" type="file" value=""/>
        </p>
    </fieldset>
</form>

Answer 1

您可以使用具有 .ajaxSubmit() 函数的 jQuery 表单插件。应该是这样的：

$("#my-form").ajaxSubmit({
  success: function(response) {
    $('.result').html(response);
  }, error: function(e) {
    $('.result').html(e);
  }
});

beforeSubmit- 预提交回调

success- 提交后回调

error- 失败响应回调

Answer 2

请更改这些行以包含您的<form>数据：

$.post($(this).parent('form').attr('action'), $(this).parent('form').serialize(), function(data) {
    $('.result').html(data);
});

PS：我不确定在 AJAX 上发送文件是否有效。从逻辑上讲，它应该可以工作。

Answer 3

尝试使用以下标记

<form id="my-form" method="post" enctype="multipart/form-data" action='myurl'>
           <fieldset>
    <legend>Upload file</legend>
    <p>
                        <label for="fileData">File</label>
        <br />
        <input id="fileData" name="fileData" type="file"/>
    </p>
</fieldset>
                    </form>

尝试避免 VALUE="" 文件类型的属性

然后你的 jquery 将使用ajaxForm()

像

$(document).ready(function(){ 
$('#fileData').live('change', function(){ 
$("#my-form").ajaxForm({}).submit();
});
});