Question

我在mysql中有一个表，它存储'number'（可用于识别li）和'path'（服务器上文件夹中的图像路径）列。

我有PHP函数，可以将数据从表格拉到数组：

function GetPaths() {
$con=mysqli_connect("localhost","root","****","****");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM pictures");

while($row = mysqli_fetch_array($result))
{
$rows[] = $row;
// i can echo $rows['number'] and $rows['path']
}
print json_encode($rows);
}

现在，我的问题是我不知道那么多Javascript。从javascript运行此函数以更新图像路径的最佳方法是什么？我应该提到列'Path'可以有默认值，默认值是默认图像“default.png”的路径，以及用户在数据库中输入的其他值。

基本上我需要做的是：我需要根据列表项ID来填充列表，该列表项绑定到$rows['number']（我有35行，值为1,2,3,4 ... 35和35列出具有相同ID的项目）但有一些检查所以我不刷新已设置相同路径的图像。我需要做一切，而不用一些计时器刷新页面。这是我需要放置$ row ['path']的地方：

<ul>
    <li id=1></li>
    <li id=2></li>
    <li id=3></li>
    ...
    <li id=35></li>
    </ul>

Answer 1

您的问题有几个部分。首先，您需要了解JavaScript无法直接访问PHP函数，它只能发出HTTP请求并加载响应。因此，您需要在PHP文件（GetPaths();之后添加一个函数调用，最后一行应该足够了。）

第二，JQuery方面。我将添加一些HTML来澄清事情。

<ul>
   <li id="img_1" class="image" ></li>
   <li id="img_2" class="image"></li>
    ...
   <li id="img_35" class="image"></li>
</ul>
var refreshImages = function() {
    $.get( // JQuery function to execute an AJAX Get request
        url: "url_to_php_file",
        dataType: "json",
        success: function(data) { 
           data.forEach(function(src, i) {
               var img_tag = $("#img_+i).find("img"); // Finds the correct img tag to update
               if(img_tag.attr('src') != src) {
                   img_tag.attr('src', src);
               }
           }
        }
}

window.setInterval(refreshImages, 1000); // Calls refreshImages every 1000ms

Answer 2

使用Asynchronus javascript（Ajax）向服务器发出请求而不使用引用页面。您可以使用jquery进行Ajax Get和Post Request。

请查看使用jquery库发出ajax post请求 http://api.jquery.com/jquery.post/

请查看使用jquery库制作ajax get请求 http://api.jquery.com/jquery.get/

使用jQuery从MySQL中选择而不刷新并填充<li> </li>

2 个答案: