Question

之前我在这里找到了div的解决方案Stackoverflow link

此页面讨论重新加载div但我的问题不同这是我的索引页

<?php
$message = "";
$minutes = "";
$limit = 2;
$effect = "";
$start = "";
$end = "";
require_once('db.php');
$query = mysql_query("SELECT message FROM kioskmessage where recNo = 1");
$row = mysql_fetch_assoc($query);
$message = $row['message'];
?>

<?php
$query = mysql_query("SELECT effect FROM kioskmessage where recNo = 1");
$row = mysql_fetch_assoc($query);
$effect = $row['effect'];						
if($effect == "blink")
{
	$start = '<p class="blink_text">';
	$end = "</p>";
}
elseif($effect == "scrolling")
{
	$start = "<marquee>";
	$end = "</marquee>";
}
else
{
	$start = '<p class="normalmessage">';
	$end = "</p>";
}
?>
<?php
$query = mysql_query("select minutes from getminutes where id = 1");
$row = mysql_fetch_assoc($query);
$minutes = $row['minutes'];	

?>
<html>

<header>	
<div class="img"> <img src="images/logo.png"> 
</div>	
<div class="container" id="nav">
  <p id="time"></p>
 </div>
</header>
<head>

<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>TT</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="style/style.css" rel="stylesheet" type="text/css">



<script>
document.body.style.zoom="95%"
</script>
<script>
function ins()
        {
            nextDepartures(<?=$minutes?>, <?=$limit?>);
            nextDeparturesTrains(120);
            nextDeparturesTrams(60);
            startTime();
        }
		</script>
<script>
    $(document).ready(
            function() {
                setInterval(ins(), 5000);
            });
</script>



    
    <script src="data.js"></script>
     <script src="sprintf.js"></script>
     <script type="text/javascript" src="2.0.0-crypto-sha1.js"></script>
    <script type="text/javascript" src="2.0.0-hmac-min.js"></script>
	
	
</head>

<body onload="ins()">

<table class="table table-bordered table-stripped table-hover" id="depart" style="float:left;  border: 1px solid black; width:30%;"> 
    <thead>
        <tr>
		<td colspan="4" class="danger" style="text-align: center; font-weight: bold;">Buses Departing from this Stop</td>
		<tr>
		
		
		<tr>
            
            <th>Bus No. & Name</th>
            <th>Time</th>
            <th>Remaining Mins</th>
        </tr>
    </thead>

    <tbody>
        
    </tbody>
</table>
<!-- This table for train information-->
<table class="table table-bordered table-stripped table-hover" id="departTrains" style="float:left;  border: 1px solid black; width:30%;"> 
    <thead>
	  <tr>
		<td colspan="4" class="danger" style="text-align: center; font-weight: bold;">Trains Departing from varios stations</td>
		<tr>
        <tr>
            <th>Station</th>
            <th>Destination</th>
            <th>Time</th>
            <th>Remaining Mins</th>
        </tr>
    </thead>

    <tbody>
       
    </tbody>
</table>

<!-- This table for tram information-->
<table class="table table-bordered table-stripped table-hover" id="departTrams" style="float:left;  border: 1px solid black; width:30%;"> 
    <thead>
	  <tr>
		<td colspan="4" class="danger" style="text-align: center; font-weight: bold;">Tram Departing from plenty road</td>
		<tr>
        <tr>
            <th>Tram Name</th>
            <th>Time</th>
            <th>Remaining Mins</th>
            
        </tr>
    </thead>

    <tbody>
     
    </tbody>
</table>
<footer id="footer">
    <?=$start?><?=$message?><?$end?>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
</body>
</html>

现在我有一个javascript函数ins（），它还在其中存储了函数，它将数据发送到页面中定义的具有相关信息的表。

另外，我在页面中定义了一个脚本，我认为这可能是可能的解决方案，但它不起作用这是脚本

<script>
    $(document).ready(
            function() {
                setInterval(ins(), 5000);
            });
</script>

这是函数ins（）在加载页面时推入表的示例数据

Answer 1

如果你想加载JavaScript函数而不重新加载整个页面，你可以跟进 AJAX结构，你可以根据你需要的要求进行更改。

由于加载JavaScript而不重新加载页面，只有在AJAX中完成时才能正常运行。如果该过程在AJAX中完成，它将根据需要加载要显示JS输出的特定div。

您可以在Ajax中使用ins()函数，并且可以将页面重新加载为成功函数，以便它将在DIV下加载您作为成功div提供的内容。

如何在不重新加载整个页面的情况下重新加载javascript函数

1 个答案: