使用jQuery/AJAX重新填充新窗體/內容的div

當按下按鈕時，包含原始窗體的div被替換爲新的窗體（或任何其他事物）時，是否存在任何jQuery/AJAX函數形成？基本上，不需要重新加載頁面的多部分表單。使用jQuery/AJAX重新填充新窗體/內容的div

我可以使用類似的東西嗎？

$('form#myForm').submit(function(event) { 
    event.preventDefault(); 
     $.ajax({ 
      type: '', 
      url: '', 
      data: $(this).serialize(), 
      success: function(response) { 
       $('#divName').html(response); 
       //somehow repopulate div with a second form? 
      } 
     }) 
     return false; 
});

我已經使用過這個功能將項目添加到列表中，但我從來沒有用它來完全重新填充不同的內容。我怎樣才能把它指向第二種形式？

編輯 - 我得到它的工作，但只有當我寫'＃form2'的替換。我提醒了答覆，我得到了{"formToShow":"show2"}。我嘗試做response.formToShow但它是未定義的。

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
</head> 


<div id="divName"> 
    <form method="POST" action = "#" id="form1"> 
     <input type="textbox" name="textbox1" value="1"/> 
     <input type="submit" name="submit1"/> 
    </form> 

    <form method="POST" action = "#" id="form2" style="display: none"> 
     <input type="textbox" name="textbox2" value="2"/> 
     <input type="submit" name="submit2"/> 
    </form> 
</div> 

<script> 
$('form#form1').submit(function(event) { 
    event.preventDefault(); 
     $.ajax({ 
      type: 'JSON', 
      url: 'receiving.php', 
      data: $(this).serialize(), 
      success: function(response) { 
       $('#form1').hide(); //hides 
       //$('#form2').show(); //this will show 
       $(response.formToShow).show(); //this does not display form 2 
      } 
     }) 
     return false; 
    }); 
</script>

這裏是receiving.php。當我瀏覽這個頁面{"formToShow":"show2"}顯示

<?php 
echo json_encode(array("formToShow" => "#form2")); 
?>

來源

2013-04-12 user1104854

看起來你有正確的想法... $（ '＃divName'）HTML（putformhere）。 –

@DavidHoude我是否參考了表單的ID，你有什麼「putformhere」？ – user1104854

你會真的把你的表單代碼放在那裏，假設這是舊窗體的div。當你使用jQuery.html（字符串）時，它會用新內容替換該div中的任何內容。在這裏，我假設你的ajax響應是另一種形式（由服務器響應你的第一個表單發送） –

檢查JQuery Load Function

來源

2013-04-12 11:23:20 Nathan

這是個人喜好，但我從來沒有過的響應發送HTML和這樣顯示出來，我會做的是：

從服務器發送JSON陣列背，如{ formToShow: "#form1" }

然後，你可以簡單地這樣做：

success: function(response) { 
    $('form').hide(); 
    $(response.formToShow).show(); 
}

顯然，使用這種方法，你還必須在你類似這樣的標記第二種形式：

<form method="POST" action = "#" id="form2" style="display: none"> 
<input type="textbox" name="textbox2"/> 
<input type="submit" name="submit2"/> 
</form>

你也不得不改變（皮卡數組）：

$.ajax({ 
     type: 'JSON'

來源

2013-04-12 11:25:16

這不是他所要求的，雖然... – Nathan

也許我看錯了，但它好像我想要甚至添加第三部分，這是行不通的。我怎麼能說成功的第二種形式，加載第三種形式？ – user1104854

僅僅回答「什麼人問」並不是處理場景的最佳方式。我習慣於每天做這些操作，這是做這件事的理想方式。 –

試試這個

$('form#myForm').submit(function(event) { 
    event.preventDefault(); 
    $.ajax({ 
     type: '', 
     url: '', 
     data: $(this).serialize(), 
     success: function(response) { 
     $('#divName').html(response); 
     $('#form1').hide(); 
     $('#form2').show(); 
     } 
    }) 
    return false; 
}); 


<form method="POST" action = "#" id="form1"> 
    <input type="textbox" name="textbox1"/> 
    <input type="submit" name="submit1"/> 
</form> 

<form method="POST" action = "#" id="form2" style="dispay:none;"> 
    <input type="textbox" name="textbox2"/> 
    <input type="submit" name="submit2"/> 
</form>

來源

2013-04-12 11:29:29

這兩種形式將被包裹在div id =「divName」中，對嗎？我將類型設置爲POST和url到我創建的php頁面。它同時顯示文本框和按鈕。 – user1104854

你能提供你成功後得到的迴應嗎？ –

我更新了我的代碼。 Form1消失但form2不出現。 – user1104854

使用jQuery/AJAX重新填充新窗體/內容的div

回答

相關問題