如何使用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（）函数的the jQuery Form Plugin。应该是这样的：

$("#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>

尝试避免价值=“”文件类型的属性

然后你的jquery会使用ajaxForm()

像

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