隠しiframeにデータを投稿して同じページに表示するwtihout reload

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

、あなたが本当にそれをこのように行う必要がある場合は、次のとおりです。私はjQueryの$.post() documentationと.serialize() documentationを見てすることができお勧めします

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

どのように今までに。代わりに次のようなものにすることができます：

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