刷新从MySQL检索数据的特定HTML内容

Question

所以我有一个表单，它做一个简单的计算，取决于用户输入。如果结果是某个值，那么它将该值存储在数据库中，然后在页面上显示该值。但是我必须刷新整个页面，以便从数据库中检索最新更新的值并显示在页面上。

我知道如何编写代码来刷新整个页面，但在这种情况下，我只需要它显示刷新的部分。

计算的原始形式

<div class="formC">
<form action="" method="post">
<label>Base Amount</label>
<input type="text" name="base"</input>
<label>Select Currency</label>
<div class="custom-select">
<span></span>
<select name="cur_name">
<option value="" selected>Choose a Base Currency</option>
<option value="EUR">EUR</option>
<option value="USD">USD</option>
</select>
</div>
<button type="submit" value="Submit">SUBMIT</button>
</form>
</div>

从数据库获取新值的表单

<div class="formC">
<form action="test.php" method="post">
<label>Base Amount</label>
<input type="text" name="base" id="new_base" value="<?php
$results = mysqli_query($con, "SELECT * FROM contents_arr ORDER BY id DESC LIMIT 1");
while($row = mysqli_fetch_array($results)){
echo $row["new_base"];
} 
?>">
<div id="load_data"></div>
<label>Select Currency</label>  
<input type="text" name="cur_name" value="<?php 
$results = mysqli_query($con, "SELECT * FROM gain_name_table ORDER BY id DESC LIMIT 1");
while($row = mysqli_fetch_array($results)){
echo $row["gain_name"];
}
?>">
<button id="btn_submit" type="submit" value="Submit">SUBMIT</button>
</form>
</div>

计算

<?php 
$base = $_POST['base'];
$value = $_POST['val'];
$selected = $_POST['cur_name'];
if ($selected == 'EUR') {   
$results_eur = $base * $value;
// USD
}elseif ($selected == 'USD') {      
$results_usd = $base * $value;
}
if($selected == 'EUR'){
$sql = "INSERT INTO calculation(new_base) VALUES('".$results_eur."')";
mysqli_query($con,$sql);
}elseif($selected == 'USD'){
$sql = "INSERT INTO calculation(new_base) VALUES('".$results_usd"')";
mysqli_query($con,$sql);
}

Answer 1

我设法找到了使用Ajax和jQuery的解决方案:

$(document).ready(function(){
$('#btn_submit').click(function(){
var get_data = $('#new_base').val();

if($.trim(get_data) != '')
{
$.ajax({
url:"db2.php",
method:"POST",
data:{new_base:get_data},
dataType:"text",
success:function(data)
{
$('#new_base').val("");
}   
});     
}   
});         
setInterval(function(){
$('#load_data').load("fetch.php").fadeIn("slow")
}, 1000);
}); 

Answer 2

这可以通过创建一个单独的php文件并使用javascript将页面上的内容替换为其他php页面的内容来完成。这不是关于如何做到这一点的完整描述，只是关于如何做到这一点的提示。有很多资源对其进行了详细描述。一个地方可以从这里开始W3Schools Ajax & &;Php

getData.php

header('Content-Type: application/json; charset=utf-8');
// do your php database stuff here
$data = //...
$data = json_encode($data);
echo $data;

在主文件中，您可以在javascript中fetch()getData.php的内容以获得最新结果，然后使用document.getElementById('content').innerHTML = ...

将结果注入div中使用此方法，只刷新您的div，而不是整个页面。