Опубликовать данные в скрытый iframe, а затем показать его на той же странице с перезагрузкой

Я немного новичок в 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>

Спасибо за помощь.

1 ответ

  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>
    

    However I do recommend you to have a look at jquery’s $.post () documentation and .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>