显示加载图像 PHP - showing loading image php

我正在尝试显示加载图像，直到 php 执行，查询在第二页上有效，但结果未显示在第一页上，我知道我在这里错过了一些东西，有人可以帮助我吗？我是jquery或ajax的新手。

首页.php

<html>
<head>
<!--Javascript-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$('#loading_spinner').show();
var post_data = "items=" + items;
$.ajax({
    url: 'list.php',
    type: 'POST',
    data: post_data,
    dataType: 'html',
    success: function(data) {
        $('.my_update_panel').html(data);
    },
    error: function() {
        alert("Something went wrong!");
    }
});
$('#loading_spinner').hide();
</script>
<style>
   #loading_spinner { display:none; }
</style>
</head>
<body>
<img id="loading_spinner" src="image/ajax-loader.gif">
<div class="my_update_panel">
<!--I am not sure what to put here, so the results can show here-->
</div>

列表.php我测试了查询，它打印了行。

<?php
   include_once("models/config.php");
   // if this page was not called by AJAX, die
   if (!$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') die('Invalid request');
   // get variable sent from client-side page
   $my_variable = isset($_POST['items']) ? strip_tags($_POST['items']) :null;  
       //run some queries, printing some kind of result
   $mydb = new mysqli("localhost", "root", "", "db");
   $username = $_SESSION["userCakeUser"];
       $stmt = $mydb->prepare("SELECT * FROM products where username = ?");
   $stmt->bind_param('s', $username->username);
   $stmt->execute();
   // echo results
   $max = $stmt->get_result();
   while ($row = $max->fetch_assoc()) {
      echo $row['title'];
       echo $row['price'];
      echo $row['condition'];
   }
?>

HTML。将 img 放入 .my_update_paneldiv 内

<div class="my_update_panel">
    <img id="loading_spinner" src="image/ajax-loader.gif">
</div>

JS的

var url = 'list.php';
var post_data = "items=" + items;
$('.my_update_panel').load(url, post_data, function() {
    $(this +' #loading_spinner').fadeOut('slow');
});

您可以在此处找到大量可随时下载的加载图像。

存在问题

var post_data = "项目=" + 项目;

来得及

$(document).ready(function(){
        $('#loading_spinner').show();
$.ajax({
    url: 'list.php',
    type: 'POST',
    data: {"items":items},
    dataType: 'html',
    success: function(data) {
        $('.my_update_panel').html(data);
        $('#loading_spinner').hide();     
    },
    error: function() {
        alert("Something went wrong!");
    }
});
});

让我知道是否适合您。

尝试在 ajax 中添加完整的事件，我希望它会起作用。指 http://api.jquery.com/jQuery.ajax/

<html>
<head>
<!--Javascript-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$('#loading_spinner').show();
var post_data = "items=" + items;
$.ajax({
    url: 'list.php',
    type: 'POST',
    data: post_data,
    dataType: 'html',
    success: function(data) {
        $('.my_update_panel').html(data);
    },
    error: function() {
        alert("Something went wrong!");
    },
    complete:function(){
           $('#loading_spinner').fadeOut(500);
});
//$('#loading_spinner').hide();
</script>
<style>
   #loading_spinner { display:none; }
</style>
</head>
<body>
<img id="loading_spinner" src="image/ajax-loader.gif">
<div class="my_update_panel">
<!--I am not sure what to put here, so the results can show here-->
</div>

最好链接 ajax 回调函数。添加回调作为选项将在将来从 jQuery 中删除。

http://api.jquery.com/jQuery.ajax/

弃用通知：jqXHR.success（）、jqXHR.error（）和 jqXHR.complete（）回调从 jQuery 1.8 开始被弃用。准备您的代码用于最终删除它们，请使用 jqXHR.done（）， jqXHR.fail（），和 jqXHR.always（）代替。

var post_data = items;
$('#loading_spinner').show();
$.ajax({
    url: 'list.php',
    type: 'POST',
    dataType: 'html',
    data: {"items":post_data},
})
.done(function() {
    console.log("success");
})
.fail(function() {
    console.log("error");
})
.always(function() {
    $('#loading_spinner').hide();
});

我将loading_spinner隐藏在 always（）回调中，这样当 ajax 调用抛出错误时，微调器也会消失。如果这不起作用，您必须在服务器端代码中搜索以解决问题。首先，您确定响应是html吗？您可能需要在 ajax 调用中将数据类型设置为文本。