jQuery 对话框：如何防止关闭对话框 + 额外的 get 请求！答案

【问题标题】：jQuery dialog: how to prevent closing the dialog + an extra get request!jQuery 对话框：如何防止关闭对话框 + 额外的 get 请求！
【发布时间】：2011-04-15 21:37:43
【问题描述】：

工作流程：用户单击该按钮，将打开一个带有搜索表单的对话框。一个ajax post请求被发送到服务器，并得到一个json响应。我得到了成功处理程序的回调。现在有两个问题。

对话框在成功回调 (successFn) 时关闭。我在成功回调中得到 json 响应，我希望用户看到结果并按关闭按钮终止对话框。

对话框关闭后不久，将向服务器发送一个获取请求。自行关闭对话框后，url 类似于 http://localhost:8080/search?query= 。我没有明确发送任何 GET 请求

jQuery(文档).ready(函数(){ jQuery("#myButton").click(showDialog);

        $myWindow = jQuery('#myDiv');

        $myWindow.dialog({ width: 400, autoOpen:false, title:'Hello World',
                overlay: { opacity: 0.5, background: 'black'},  
                modal: true,    
                /*open: function (type, data) {
                    // include modal into form
                    $(this).parent().appendTo($("form:first"));
                },      */          
                buttons: {
                    "Submit Form": function() { $('form#myform').submit();},
                    "Cancel": function() {$(this).dialog("close");}
                        }
                });
        });            


var showDialog = function() {
    $myWindow.show(); 
    $myWindow.dialog("open");    
    }

var closeDialog = function() {
    $myWindow.dialog("close");
}

var successFn = function (response) {   
        var obj = JSON.parse(response); 
        $("#result").html('').html(obj.name);
}
var errorFn =  function (xhr, ajaxOptions, thrownError){
            $("#myform").parent().html('').html(xhr.statusText);
            }
var query = $("input#query").val(); 
var dataString = 'query='+ query ;  

$('form#myform').submit(function(){
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: '/search',
        async: false,
        data: $("#myform").serialize(),
        success: successFn,
        error: errorFn
    });
});

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

最好将method="post" 添加到您的表单中，以避免发送任何意外的 GET 数据。

添加return false;到成功函数可能会阻止对话框关闭。如果可以的话，我会测试一下。

编辑：还要检查你的所有代码是否都在jQuery(document).ready( function(){ 中

希望有帮助！

【讨论】：

感谢您的帮助...您的两个建议都非常有帮助，但我仍然无法使其工作..我准备了一些外部文档..另外，我添加了方法= “发布”到表单..然后我可以看到它背靠背发送了两条发布消息..我认为这是我提交 ajax 表单的方式.. bot 确定如何解决它，仍在搜索.. 谢谢跨度>
我试图通过 beforeClose 事件阻止关闭.. 但对话框关闭.. 我认为这与第二个离开表单时的双重发布消息有关..
我将 urs 标记为最佳答案，因为它引导我找到了解决方案。我必须添加 return false;在 ajax 调用之后，在 $('form#myform').submit(function(){ ...} .. 再次感谢

【解决方案2】：

我想你只需要添加return false。

"Submit Form": function() { $('form#myform').submit(); return false;},

【讨论】：