使用jQuery / AJAX用新的表單/內容重新填充div

Question

是否存在任何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>

這是receiveing.php。 當我查看此頁面時，將顯示{"formToShow":"show2"}

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

Answer 1

檢查JQuery加載功能

Answer 2

這是個人喜好，但我絕不會通過響應發送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'

Answer 3

嘗試這個

$('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>

使用jQuery / AJAX用新的表單/內容重新填充div

問題描述

3 個解決方案

解決方案1
1 2013-04-12 11:23:20

解決方案2
1 2013-04-12 11:25:16

解決方案3
1 2013-04-12 11:29:29

使用jQuery / AJAX用新的表單/內容重新填充div

問題描述

3 個解決方案

解決方案1 1 2013-04-12 11:23:20

解決方案2 1 2013-04-12 11:25:16

解決方案3 1 2013-04-12 11:29:29

解決方案1
1 2013-04-12 11:23:20

解決方案2
1 2013-04-12 11:25:16

解決方案3
1 2013-04-12 11:29:29