jQuery - 在模式窗口中加載遠程HTML表單，並在同一個模式窗口上提交它

Question

我需要加載包含窗體的HTML頁面。當模式窗口打開並按下提交按鈕時，我需要在同一個遠程HTML頁面提交數據，然後關閉模態窗口。這裏是我的代碼： 我用這個代碼（page.html中）打開模態窗口：

$(".genbutton-options, .ajax-edit").click(function(){                                         
    var id = $(this).attr("id").replace('edit-', '');                                         
    var xtraParam = "";                                                
    if($(this).attr("rel") == "profile"){                                           
     var xtraParam = "&r=sm";                                              
    }                                                     
    if($(this).attr("rel") == "set"){                                            
     var xtraParam = "&r=s";                                              
    }                                                     
    if($(this).attr("rel") == "stream"){                                           
     var xtraParam = "&r=stream";                                             
    }                                                     
    var dialogOpts = {                                                
     modal: true,                                                 
     bgiframe: true,                                                
     autoOpen: false,                                                
     width: 716,                                                 
     buttons: {                                                 
      "Save": function() {                                              
       $("#content-dialog").hide();                                           
       $(this).append("<div class=\"preloader-ajax\">Hold on...</div>");                                  
       $(".ui-button").addClass("ui-state-disabled");                                      
       $("form[name='edit-ajax-form']").submit();                                       
      },                                                  
      "Cancel": function() {$(this).dialog("close");}                                       
     },                                                   
     open: function() {                                               
      $("#ed-"+id+"").load("edit.php?media="+id+""+xtraParam+"");                                  
      $("#edit-loader-"+id+"").show();                                           
     }                                                    
    };                                                    
    $("#ed-"+id+"").dialog(dialogOpts);                                            
    $("#ed-"+id+"").dialog("open");                                             
    return false;                                                  
});                                                     

這裏是模態窗口（edit.php）打開網頁：

<div id="content-dialog"> 
    <form action="<?php echo $PHP_SELF;?>" enctype="multipart/form-data" method="post"> 
    <div class="dialog-td1">Title</div> 
    <div class="dialog-td2"> 
     <input type="text" name="title" value="Suitcase Chair?" class="dialog-inputtext" id="inputPicTitle" /> 
     <p class="dialog-help" style="visibility:hidden">Some cool, sexy or funny title is required. Min 3 chars.</p> 
    </div> 
    <input type="submit" name="save" id="buttonSignup" class="dialog-button right" value="Save" /> 
    <div class="preloader-signup right">Hold On</div> 
    <a href="javascript:history.back(1)" class="dialog-button-grey right" id="buttonCancel">Cancel</a> 
    </form> 
</div> 
<?php 
if(isset($_POST)){ 
    //do something 
    echo "data submitted"; 
} 

？>

的問題是，當我點擊提交按鈕，數據被保存，但瀏覽器重定向到edit.php（即在模態窗口中打開同一個頁面）。笏我想要做的是，當我點擊提交按鈕時，要保存的數據，然後模式窗口關閉，沒有任何瀏覽器重定向或刷新。我怎樣才能做到這一點？

Answer 1

你必須改變你的代碼位：

$("form[name='edit-ajax-form']").submit(); 

到：

 $.ajax(
     {type:'POST', 
     url: $("form[name='edit-ajax-form']").attr('action'), 
     data:$("form[name='edit-ajax-form']").serialize(), 
     success: function(response) { 
       alert(response); 
     }) 
     }); 

這併發送了請求Ajax和獲得響應。你可以多處理一點。如果響應成功，只關閉模態窗口。

編輯：

類似的東西：

"Save": function() { 


      $("#content-dialog").hide();                                           
      var preloader = $(this).append("<div class=\"preloader-ajax\">Hold on...</div>"); 
      $(".ui-button").addClass("ui-state-disabled"); 
      var dialog = $(this); 
      $.ajax(
        {type:'POST', 
        url: $("form[name='edit-ajax-form']").attr('action'), 
        data:$("form[name='edit-ajax-form']").serialize(), 
        success: function(response) { 
          $(preloader).remove(); 
          dialog.close(); 
        }, 
        error: function() { 
         $(preloader).remove(); 
         alert('something bad happend pls fill out again'); 
         $(".ui-button").addClass("ui-state-enabled"); 
        } 
        });                                 


     },