0

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

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

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

3 回答 3

1

检查JQuery 加载函数

于 2013-04-12T11:23:20.930 回答
1

这是个人喜好，但我永远不会通过响应发送 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-12T11:25:16.373 回答
1

尝试这个

$('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-12T11:29:29.603 回答