Question

我正在使用PHP＆amp; MySQL以及AJAX＆amp; jQuery显示我的数据库表中的内容。

PHP：像往常一样使用服务器端语言。 jQuery：根据用户位置将UTC时间转换为本地时间。感谢jQuery localtime插件:) AJAX：在下拉菜单中选择一个值时，将page2的内容显示在page1中

总页数：2

page1.php中

我有一个HTML表格，我向其展示所有用户的内容。从数据库获取的值之一是UTC日期时间变量。要将其转换为用户的本地时间，我只使用了一个jQuery插件。我所要做的就是添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.localtime-0.5.js"></script>
<script type="text/javascript">$.localtime.setFormat("yyyy-MM-dd HH:mm:ss");</script>

以上给出的文件＆amp;然后在我的表格中添加一个范围<span class="localtime"> </span>将datetime变量回显到它中。中提琴！ UTC时间现在转换为用户的本地时间。

在同一页面中，我有一个下拉菜单，显示数据库表中所有用户的列表。在下拉菜单的onchange属性上，我调用了一个AJAX函数。此函数会将用户名传递给page2.php＆amp;数据库操作在page2.php＆amp;计算对应于该用户的结果＆amp;显示在HTML表格中，类似于我在page1.php中的HTML表格。

但是在这张表中，即使我尝试在该页面中添加jQuery文件，UTC仍然如此。为什么jQuery localtime插件在第1页中没有将UTC时间转换为本地时间，而是在第1页中执行相同操作???

这是两个屏幕截图。

加载AJAX内容之前的第1页

enter image description here

加载AJAX内容后

Page1

enter image description here

第1页：

<html>
<head>
<title>Converting UTC time to Local time</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.localtime-0.5.js"></script>
<script type="text/javascript">$.localtime.setFormat("yyyy-MM-dd HH:mm:ss");</script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script>
    function value_pass_func(uname)
    {
        if(window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()//callback fn
        {
            if(xmlhttp.readyState==4 && xmlhttp.status==200)
            {
               document.getElementById("showtable").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","page2.php?variable="+uname,true);
        xmlhttp.send();
    }
</script>
</head>
<body>
<?php
$connection = mysqli_connect('localhost','root','','dummydb') or die(mysqli_error($connection));
$query="SELECT distinct(user) FROM pagination ORDER BY id ASC";
$res    =   mysqli_query($connection,$query);
$count  =   mysqli_num_rows($res);
?>
</br>
</br>
</br>
<select id="ddl" name="ddl list" onchange="value_pass_func(this.value);">
    <option selected value="">select any</option>
<?php
if($count>0)
{
while($row=mysqli_fetch_array($res))
{
    $now=$row['user'];
?>
    <option value="<?php echo $now; ?>"><?php echo $now; ?></option>
<?php
}
}
?>
</select>
</br>
</br>
<?php
$query1="SELECT * FROM pagination ORDER BY id ASC";
$res1    =   mysqli_query($connection,$query1);
$count1  =   mysqli_num_rows($res1);
if($count1>0)
{
?>
<div id="showtable">
    <table class="table table-bordered table-responsive table-striped" border="1">
        <thead>
        <tr >
            <th>id</th>
            <th>post</th>
            <th>user</th>
            <th>now</th>
        </tr>
        </thead>
        <tbody>
        <?php
        while($row1=mysqli_fetch_array($res1))
        {
            $idd=$row1['id'];
            $post=$row1['post'];
            $username=$row1['user'];
            $datetime=$row1['now'];
            ?>
            <tr>
                <td><?php echo $idd; ?></td>
                <td><?php echo $post; ?></td>
                <td><?php echo $username; ?></td>
                <td><span class="localtime"> <?php echo $datetime; ?></span></td>
            </tr>
        <?php
        }
        ?>
        </tbody>
    </table>
</div>
<?php } ?>
</body>
</html>

第2页：

<?php
$un=$_GET["variable"];
$connection = mysqli_connect('localhost','root','','dummydb') or die(mysqli_error($connection));

$query="SELECT * FROM pagination where user='".$un."' ORDER BY id ASC";
$res    =   mysqli_query($connection,$query);
$count  =   mysqli_num_rows($res);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.localtime-0.5.js"></script>
<script type="text/javascript">$.localtime.setFormat("yyyy-MM-dd HH:mm:ss");</script>
<table class="table table-bordered table-responsive table-striped" border="1">
    <thead>
    <tr >
        <th>id</th>
        <th>post</th>
        <th>user</th>
        <th>now</th>
    </tr>
    </thead>
    <tbody>
<?php
   while($row=mysqli_fetch_array($res))
   {
       $idd=$row['id'];
       $post=$row['post'];
       $username=$row['user'];
       $datetime=$row['now'];
?>
    <tr>
        <td><?php echo $idd; ?></td>
        <td><?php echo $post; ?></td>
        <td><?php echo $username; ?></td>
        <td><span class="localtime"> <?php echo $datetime; ?></span></td>
    </tr>
<?php
   }
?>
    </tbody>
</table>

Answer 1

你正在加载jquery ..所以我建议你使用它

你问题的最简单的答案是在你的innerHTML替换之后运行它：

$.localtime.format(".localtime");

这将再次评估所有元素。

我建议你做以下事情：

使用jquery的AJAX（link）来获取表格数据。
使用JSON（link）。
我个人更喜欢使用Moment.js（link）格式化我的约会。

一个基本的jquery示例..

第1页上的脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.localtime-0.5.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script>

    $.localtime.setFormat("yyyy-MM-dd HH:mm:ss");

    function value_pass_func(uname)
    {
        $.ajax({
            type: "GET",
            url: "page2.php",
            data: { variable: uname },
            dataType: html
        }).done(function(data) {
            $("#showtable").innerHTML = data;
            $.localtime.format(".localtime");
        });
    }
</script>

并删除第2页中的脚本标记。

我没有测试过那个本地时间脚本，但是在解雇时可能会这样做

jQuery的localtime插件在通过ajax加载内容时失败

1 个答案: