将数据发布到隐藏的 iframe，然后在同一页面中显示，无需重新加载

Posted 2023-05-09

【中文标题】将数据发布到隐藏的 iframe，然后在同一页面中显示，无需重新加载

【英文标题】：Post data to hidden iframe then show it in the same page wtihout reload

【发布时间】：2017-05-31 18:59:13

【问题描述】：

我是 jQuery、ajax 和 javascript 的新手。我需要一点帮助来了解如何将数据发布到隐藏的iframe，然后使用相同的buttondisplay。

这是我迄今为止尝试过的：

<form id="testform" name="testform" class="form-horizontal" action="testing/index.php" method="post" target="mydata">
    <div class="form-group">
        <div class="col-sm-6 col-sm-offset-3">
            <input class="form-control" placeholder="please enter test name" name="test-input">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
        </div>
    </div>
</form>
<div class="row">
    <div class="col-md-12" id="target">
        <script>
            $(document).ready(function() 

                $('#testform').on('submit', function() 
                    $("#target").show();
                );
                $("#target").hide();
            );

            $("#target").html('<object name="mydata" data="http://testurl.com/testing"></object>');

        </script>
    </div>
</div>

感谢您的帮助。

【参考方案1】：

如果你真的需要这样做，你应该做的是：

<form id="testform" name="testform" class="form-horizontal" action="testing/index.php" method="post" target="mydata">
    <div class="form-group">
        <div class="col-sm-6 col-sm-offset-3">
            <input class="form-control" placeholder="please enter test name" name="test-input">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
        </div>
    </div>
</form>
<iframe id="mydata" style="border:0; height:0;"></iframe>
<script>
    $(document).ready(function() 
        $('#testform').on('submit', function() 
            $("#mydata").css("height", 300);
        );
    );
</script>

我建议你看看 jQuery 的 $.post() documentation 和 .serialize() documentation。你可以改成这样：

<form id="testform" name="testform" class="form-horizontal">
    <div class="form-group">
        <div class="col-sm-6 col-sm-offset-3">
            <input class="form-control" placeholder="please enter test name" name="test-input">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
        </div>
    </div>
</form>
<div id="succesResult"></div>
<script>
    $(document).read((function()
        $('#testform').on('submit', function() 
            var data = $( this ).serialize();
            $.post("http://target.url", data, function(resultFromServer)
                //success callback
                $("#succesResult").html(resultFromServer); <--result could be html 
            )
        );    
    
</script>