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>

这是receive.php。当我查看此页面时显示{"formToShow":"show2"}

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

Answer 1

检查JQuery Load Function

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 个答案: