如何将数据从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>