使用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

回答

相关问题