Question

我有一个带有表格的div。用户提交表单后，我想将新内容加载到div中，替换表单。

新内容将是静态的。

我需要AJAX吗？

Answer 1

你没有必须使用ajax，在提交表单后，你可以发送重定向到没有表单的静态页面（post-redirect-get pattern）。

但请注意，在这种情况下，整个页面会在提交时刷新，
如果提交可能由于某种原因而失败（谁说验证），点击F5会弹出丑陋的“你想发送废话......”

所以不，你不必使用ajax，but it is so easy with the form plugin不要犯罪。
如果你确实使用了表单插件，那么在成功回调时会隐藏带有静态内容的表单

Answer 2

你确实需要Ajax :(我会像SimpleCoder一样说，但是使用ajax调用）

$('#myForm').submit(function(){
   var field1 = $("#field1").serialize(); // If this doesn't work just remove the serialize()
   var field2 = $("#field2").serialize();
   $.ajax({
      type: "POST",
      url : "???",     //your processing page URL instead of ???
      data: "&field1="+field1+"&field2="+field2,
      success: function(){
         $("#formHolder").html("Your static content");
      }
   });
});

（您应该将field1，field2替换为您的字段，如果它不起作用，请删除 serialize（）函数。）

您所要做的就是 .html（） ajax调用成功函数中的静态内容。

Answer 3

假设您的HTML看起来像这样：

<div id="formHolder">
<form id="myForm">
...
</form>
</div>

做这样的事情：

$("#myForm").submit(function(){
    $("#formHolder").html("Your static content");
});

Answer 4

你可以在这里找到一个例子

https://www.write-about-property.com/seo-services/处理表单提交的代码使用form.js中创建的对象的实例

如果您对此有所了解，那么我们将帮助您完善它以达到您的目的。你可以在toupdate var

中放置你想要更新的div

ajform.toupdate = $（“＃update”）

Answer 5

你可以简单地使div不可见，而提交按钮只是一个带有js动作的按钮，使div可见

<script type="text/javascript" language="javascript">
function step2() {
        document.getElementById('step1_container').style.display = 'none';
        document.getElementById('step2_container').style.display = 'block';
}

function step3() {
        document.getElementById('step2_container').style.display = 'none';
        document.getElementById('step3_container').style.display = 'block';
}
</script>

...

<form action="validate.php" method="post">

<div id="step1_container">
PAGE 1 here

<input type="button" onclick="javascript:step2();" value="submit"/>
</div>

<div id="step2_container" style="display: none;">
Page 2 here
<input type="button" onclick="javascript:step3();" value="submit"/>
</div>

<div id="step3_container" style="display: none;">
Page 3 here
<input type="button" onclick="javascript:step4();" value="submit"/>
</div>

</form>

等等

Answer 6

你没有需要 ajax，只使用页面上的javascript就足够了。

但是，使用ajax，您可以显示您提交表单的页面中的内容。

尝试jQuery From plugin以获得优雅的ajax解决方案：

<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript" src="jquery.form.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
        $('#myForm').ajaxForm({ 
            target:     '#divToUpdate', 
            url:        'comment.php', 
            success:    function() { 
                alert('Thanks for your comment!'); 
            } 
        }); 
    }); 
</script>

表单提交后替换div内容

6 个答案: