个人中心
gpt4 book ai didi

javascript - 通过 ajax 加载内容时 jQuery 的本地时间插件失败

转载 作者：行者123 更新时间：2023-11-28 08:07:18 25 4
gpt4 key购买 nike

我使用 PHP 和 MySQL 以及 AJAX 和 jQuery 来显示数据库表中的内容。

PHP:像平常一样的服务器端语言。jQuery:根据用户位置将 UTC 时间转换为本地时间。感谢 jQuery 本地时间插件:)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>

上面给定的文件，然后添加一个跨度<span class="localtime"> </span>在我的表中并将日期时间变量回显到其中。中提琴! UTC 时间现已转换为用户本地时间。

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

但在此表中，UTC 仍然如此，即使我也尝试在该页面中添加 jQuery 文件。为什么 jQuery 本地时间插件在 page1 中执行相同操作时没有将 page2 中的 UTC 时间转换为本地时间？？？

这是两个屏幕截图。

加载 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>

最佳答案

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

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

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

这将再次评估所有元素。

我建议您执行以下操作:

  1. 使用 jquery 的 AJAX ( link ) 获取表数据。
  2. 使用 JSON ( link ) 传送表数据。
  3. 我个人更喜欢使用 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>

并将这些脚本标签放入 page2 中。

我还没有测试过本地时间脚本，但它可能会在触发时执行它的操作

关于javascript - 通过 ajax 加载内容时 jQuery 的本地时间插件失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24674813/

25 4 0
文章推荐： c++ - 如何为嵌套循环配置 openMP 以保持内部循环不并行化？
文章推荐： c++ - 在 C++ 中将文件从 URL 下载到磁盘
文章推荐： c++ - 复制构造函数如何工作？
文章推荐： ios - 设置最大行可编辑 TextView - Swift/iOS
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com