如何將數據從php傳遞到javascript

Question

我正在設計一個論壇，我希望它動態顯示。我已經成功地將表單細節存儲在ajax中。但我希望數據在存儲後顯示在頁面中。我不希望頁面重新加載。可能嗎？

這是點擊post.it被使用下面的腳本和烤麪包消息，將存儲會彈出張貼我的html代碼

<form class="col s12"> 
     <div class="row"> 
      <div class="input-field col s4"> 
       <i class="tiny material-icons prefix">subject</i> 
       <input type="text" id="icon_prefix2" name ="heading" required></input> 
       <label for="icon_prefix2">Heading for your discussion</label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="input-field col s8"> 
       <i class=" tiny material-icons prefix">mode_edit</i> 
       <input type="text" id="icon_prefix2" name ="discussion" required></input> 
       <label for="icon_prefix2">Start your discsussion</label> 
       <input type="submit" class="btn waves-effect waves-light right" value="post"> 
      </div> 

     </div> 
    </form> 
<div class="subheading"> 
    Posted Discussions 
</div> 

。代碼是

$(function() { 


    $('form').on('submit', function (e) { 

     e.preventDefault(); 

     $.ajax({ 
      type: 'post', 
      url: 'cardiosubmit.php', 
      data: $('form').serialize(), 
      success: function() { 
       myFunction() 

      } 

     }); 

    }); 

}); 

如何發佈表單後發佈頁面上的數據。

Answer 1

你可以從你的php腳本中返回你需要的所有數據並將其打印在你的頁面中。

在你的PHP文件：

//after saving data to db 
$html = '<div>'; 
$html .= '<span>Field:'.$valueOfFieldYouWantToDisplay.'</span>';//add more if needed. 
$html .= '</div>'; 
return json_encode($html); 


$(function() { 


$('form').on('submit', function (e) { 

    e.preventDefault(); 

    $.ajax({ 
     type: 'post', 
     url: 'cardiosubmit.php', 
     data: $('form').serialize(), 
     success: function (data) { 
      myFunction(); 
      $('.subheading).html(data.html); 
      // returnedHtml is Data/HTML from your php. It can be in form of a thread. 

     } 

    }); 

}); 

}）;

Answer 2

在這裏，你會得到一些想法，插入和無刷新頁面獲取數據

// Insert data 
$(function() { 
    $('form').on('submit', function (e) { 
     e.preventDefault(); 
     $.ajax({ 
      type: 'post', 
      url: 'cardiosubmit.php', 
      data: $('form').serialize(), 
      success: function() { 

       // Call function to get all the data. 
       getAll() 
      } 
     }); 
    }); 
}); 

// Get data 
function getAll() 
{ 
    $.ajax({ 
     type: 'post', 
     url: 'getcardiodata.php', 
     data: $('form').serialize(), 
     success: function() { 
     //Now, your all the data will get by ajax responce. which is appent in the html format. 
      $("#Responce").htlm(); 
     } 
    }); 
} 

getcardiodata.php

<?php 
    /* 
    * Your logic to get data from the database 
    * simple return/echo your database result 
    * its return in the ajax success responce 
    */ 

?> 
// Your result where you want to display data 
<div id="Responce"></div>