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

【问题标题】：how to reload javascript function without reloading the whole page如何在不重新加载整个页面的情况下重新加载 javascript 函数
【发布时间】：2016-09-25 05:27:42
【问题描述】：

之前我在这里找到了 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() 在加载页面时推送到表中的示例数据

【问题讨论】：

问题是什么？您只想刷新表格吗？哪个部分不工作的间隔，插入？
setInterval(ins(), 5000); 将不起作用。你想要setInterval(ins, 5000);。
@donkon 是的，我希望刷新表中的数据。该表正在从 data.js 中定义的 ins() 函数获取数据，并具有 document.getElementById("depart").innerHTML
@Makyen 我试过这不起作用

标签： javascript php jquery html ajax

【解决方案1】：

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

由于加载 JavaScript 而不重新加载页面，只有在 AJAX 中完成时才会表现良好。如果该过程在AJAX 中完成，它将根据需要加载您要在其中显示 JS 输出的特定 div。

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

【讨论】：