Я пытаюсь показать загружаемое изображение до тех пор, пока php не запустится, запрос работает на второй странице, но результаты не отображаются на первой странице, я знаю, что у меня что-то отсутствует, может кто-то мне помочь? Я новичок в jquery или ajax.
home.php
<html>
<head>
<!--Javascript-->
<script type="text/javascript" src="/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'];
}
?>
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');
});
Вы можете найти хороший выбор загружаемых изображений, которые легко доступны для загрузки здесь.
Попробуйте добавить полное событие в ajax, я надеюсь, что он сработает. См. Http://api.jquery.com/jQuery.ajax/
<html>
<head>
<!--Javascript-->
<script type="text/javascript" src="/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>
beforeSend
, чтобы показать beforeSend
.
Существует проблема с
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!");
}
});
});
дайте мне знать, если вы будете работать для вас.
Лучше всего связать функции обратного вызова 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.