javascript - jQuery 对话框 : how to prevent closing the dialog + an extra get request!

Question

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

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

   1. 对话框关闭后不久，就会向服务器发送一个获取请求。自行关闭对话框后，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
       });
   });     
   

Answer 1

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

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

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

希望有帮助!