Question

我是jQuery，ajax和JavaScript的小新手。我需要一些帮助来了解如何将数据发布到隐藏的iframe，然后display将其发布到相同的button。

以下是我迄今为止所做的尝试：

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

感谢您的帮助。

Answer 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>

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

1 个答案: