показывая загрузочный образ php

0

Я пытаюсь показать загружаемое изображение до тех пор, пока php не запустится, запрос работает на второй странице, но результаты не отображаются на первой странице, я знаю, что у меня что-то отсутствует, может кто-то мне помочь? Я новичок в jquery или ajax.

home.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>

list.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'];

   }

?>
Теги:

4 ответа

1

HTML. Поместите img внутри.my_update_panel div

<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');
});

Вы можете найти хороший выбор загружаемых изображений, которые легко доступны для загрузки здесь.

  • 0
    не работает ...
  • 0
    Проверьте мой обновленный ответ
0

Попробуйте добавить полное событие в 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>
  • 0
    Я предложу лучше использовать свойство beforeSend , чтобы показать beforeSend .
0

Существует проблема с

var post_data = "items =" + items;

Сделай это

$(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!");
    }
});
});

дайте мне знать, если вы будете работать для вас.

  • 0
    не работает....
0

Лучше всего связать функции обратного вызова 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();
});

Я скрываю load_spinner в callback always(), таким образом, spinner также исчезает, когда вызов ajax выдает ошибку. если это не работает, вам нужно искать в своем серверном коде, чтобы решить проблему. Во-первых, вы уверены, что ответ html? вам может потребоваться установить тип данных в текст в вызове ajax.

  • 0
    не удача не работает. Как я уже говорил по этому вопросу, запрос работает нормально, он просто не работает на первой странице.
  • 0
    что отвечает сервер? проверьте консоль Firebug ... Вы уверены, что dataType респондента является HTML? Вы могли бы попробовать это dataType: 'text'

Ещё вопросы

Сообщество Overcoder
Наверх
Меню