jQuery Ajax在按设计加载PHP文件时遇到问题
以下jQuery的目标是从服务器加载图像，然后控制每页的图像数量，以及在页面中导航。它不起作用了。 我希望有人能解释一下它到底出了什么问题 我已经让分页工作，但是组合框页面选择器不工作。我已经让组合框选择器工作，但是图像和分页将无法加载。现在只显示组合框，虽然它看起来像是工作的，但没有图像可见，所以很难说 HTML:jQuery Ajax在按设计加载PHP文件时遇到问题,ajax,jquery,Ajax,Jquery,以下jQuery的目标是从服务器加载图像，然后控制每页的图像数量，以及在页面中导航。它不起作用了。 我希望有人能解释一下它到底出了什么问题 我已经让分页工作，但是组合框页面选择器不工作。我已经让组合框选择器工作，但是图像和分页将无法加载。现在只显示组合框，虽然它看起来像是工作的，但没有图像可见，所以很难说 HTML: <div id="loading"></div> <div id="gallery_container"> <ul class="
<div id="loading"></div>
<div id="gallery_container">
<ul class="new_arrivals_gallery"></ul>
<div class="pagination"></div>
</div>
<form>
<label>Images Number:</label>
<select id="imgNum" name="imgNum">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
</form>
slideshow = { page: 0, imgs: '' };
function loadData(){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: slideshow,
success: function(msg) {
gallery_show();
$("#gallery_container").html(msg);
console.log(msg);
},
error: function(jqXHR, textStatus, errorThrown) {
// Tell the human that something broke.
},
complete: function() {
// This is always called regardless of success or failure.
loading_hide();
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
slideshow.page = $('#gallery_container .pagination li.active').attr('p');
loadData();
});
$('#go_btn').live('click',function(){
slideshow.page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData();
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
console.log('hi');
slideshow.imgs = $('imgNum').val();
loadData();
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
.prop("selected","selected");
$("#imgNum").change();
<div id="loading"></div>
<div id="gallery_container">
<ul class="new_arrivals_gallery"></ul>
<div class="pagination"></div>
</div>
<form>
<label>Images Number:</label>
<select id="imgNum" name="imgNum">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
</form>
function loading_show(){
$('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function gallery_show(){
$('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
$('#gallery_container').fadeOut(10);
}
function loadData(page){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: {page:page, imgs: value},
success: function(msg)
{
$("#gallery_container").ajaxComplete(function(event, request, settings)
{
gallery_show();
loading_hide();
$("#gallery_container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
//The combo box
var sel = $(this);
//Selected value
var value = sel.val();
loadData(page);
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
.prop("selected","selected")
.change();
(function() {
var page;
function loading_show(){
$('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function gallery_show(){
$('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
$('#gallery_container').fadeOut(10);
}
function loadData(page, imgs){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: {page:page, imgs:imgs},
success: function(msg) {
$("#gallery_container").html(msg);
},
error: function(jqXHR, textStatus, errorThrown) {
// Tell the human that something broke.
},
complete: function() {
// This is always called regardless of success or failure.
gallery_show();
loading_hide();
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
var imgs = $("#imgNum").val();
var page = $(this).attr('p');
loadData(page, imgs);
});
$('#go_btn').live('click',function(){
var imgs = $("#imgNum").val();
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page, imgs);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
//The combo box
var sel = $(this);
//Selected images value
var imgs = sel.val();
var page = $('#cur_page').attr('cur_page');
//Feth the images
loadData(page, imgs);
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 16;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']").prop("selected","selected").change();
}());
图像编号：
12
16
20
<div id="loading"></div>
<div id="gallery_container">
<ul class="new_arrivals_gallery"></ul>
<div class="pagination"></div>
</div>
<form>
<label>Images Number:</label>
<select id="imgNum" name="imgNum">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
</form>
slideshow = { page: 0, imgs: '' };
function loadData(){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: slideshow,
success: function(msg) {
gallery_show();
$("#gallery_container").html(msg);
console.log(msg);
},
error: function(jqXHR, textStatus, errorThrown) {
// Tell the human that something broke.
},
complete: function() {
// This is always called regardless of success or failure.
loading_hide();
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
slideshow.page = $('#gallery_container .pagination li.active').attr('p');
loadData();
});
$('#go_btn').live('click',function(){
slideshow.page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData();
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
console.log('hi');
slideshow.imgs = $('imgNum').val();
loadData();
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
.prop("selected","selected");
$("#imgNum").change();
<div id="loading"></div>
<div id="gallery_container">
<ul class="new_arrivals_gallery"></ul>
<div class="pagination"></div>
</div>
<form>
<label>Images Number:</label>
<select id="imgNum" name="imgNum">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
</form>
function loading_show(){
$('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function gallery_show(){
$('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
$('#gallery_container').fadeOut(10);
}
function loadData(page){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: {page:page, imgs: value},
success: function(msg)
{
$("#gallery_container").ajaxComplete(function(event, request, settings)
{
gallery_show();
loading_hide();
$("#gallery_container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
//The combo box
var sel = $(this);
//Selected value
var value = sel.val();
loadData(page);
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
.prop("selected","selected")
.change();
(function() {
var page;
function loading_show(){
$('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function gallery_show(){
$('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
$('#gallery_container').fadeOut(10);
}
function loadData(page, imgs){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: {page:page, imgs:imgs},
success: function(msg) {
$("#gallery_container").html(msg);
},
error: function(jqXHR, textStatus, errorThrown) {
// Tell the human that something broke.
},
complete: function() {
// This is always called regardless of success or failure.
gallery_show();
loading_hide();
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
var imgs = $("#imgNum").val();
var page = $(this).attr('p');
loadData(page, imgs);
});
$('#go_btn').live('click',function(){
var imgs = $("#imgNum").val();
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page, imgs);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
//The combo box
var sel = $(this);
//Selected images value
var imgs = sel.val();
var page = $('#cur_page').attr('cur_page');
//Feth the images
loadData(page, imgs);
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 16;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']").prop("selected","selected").change();
}());
slideshow={page:0，imgs:''}；
函数loadData（）{
加载_show（）；
画廊藏品（）；
$.ajax
({
键入：“获取”，
url:“new_arrivals_data.php”，
数据：幻灯片，
成功：功能（msg）{
画廊（展览）；
$（“#图库"容器”）.html（msg）；
控制台日志（msg）；
},
错误：函数（jqXHR、textStatus、errorshown）{
//告诉那个人有东西坏了。
},
完成：函数（）{
//无论成功或失败，这总是被称为。
加载_hide（）；
}
});
}
加载数据（1）；//首次页面加载默认结果
$（'#gallery_container.pagination li.active'）.live（'click'，function（））{
slideshow.page=$（'#gallery_container.pagination li.active'）.attr（'p'）；
loadData（）；
});
$（'gobtn'）.live（'click'，function（）{
slideshow.page=parseInt（$（'.goto'）.val（））；
var no_of_pages=parseInt（$（'.total'）.attr（'a'）；
如果（page！=0&&page这可能会修复它：
将loadData（1）；行包装到jQuery的document ready函数中，如下所示：
$(document).ready(){
loadData(1)
}
编辑：
或
一,。
var值=sel.val（）
值是一个关键字，不要将其用作变量名
二,
需要在$（document.ready（function（）{here}）中
三,
不需要1
四,。
它看起来不像是在AJAX中返回li.active，而是在jQuery中被引用
五,。
在调用gallery_show（）之前，应先加载#gallery_容器的HTML。特别是jQuery，因为HTML很好
我想我还可以做一些一般性的清理。如果你有任何建议，请让我知道
以下是运行代码：
<div id="loading"></div>
<div id="gallery_container">
<ul class="new_arrivals_gallery"></ul>
<div class="pagination"></div>
</div>
<form>
<label>Images Number:</label>
<select id="imgNum" name="imgNum">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
</form>
slideshow = { page: 0, imgs: '' };
function loadData(){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: slideshow,
success: function(msg) {
gallery_show();
$("#gallery_container").html(msg);
console.log(msg);
},
error: function(jqXHR, textStatus, errorThrown) {
// Tell the human that something broke.
},
complete: function() {
// This is always called regardless of success or failure.
loading_hide();
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
slideshow.page = $('#gallery_container .pagination li.active').attr('p');
loadData();
});
$('#go_btn').live('click',function(){
slideshow.page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData();
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
console.log('hi');
slideshow.imgs = $('imgNum').val();
loadData();
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
.prop("selected","selected");
$("#imgNum").change();
<div id="loading"></div>
<div id="gallery_container">
<ul class="new_arrivals_gallery"></ul>
<div class="pagination"></div>
</div>
<form>
<label>Images Number:</label>
<select id="imgNum" name="imgNum">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
</form>
function loading_show(){
$('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function gallery_show(){
$('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
$('#gallery_container').fadeOut(10);
}
function loadData(page){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: {page:page, imgs: value},
success: function(msg)
{
$("#gallery_container").ajaxComplete(function(event, request, settings)
{
gallery_show();
loading_hide();
$("#gallery_container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
//The combo box
var sel = $(this);
//Selected value
var value = sel.val();
loadData(page);
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
.prop("selected","selected")
.change();
(function() {
var page;
function loading_show(){
$('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function gallery_show(){
$('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
$('#gallery_container').fadeOut(10);
}
function loadData(page, imgs){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: {page:page, imgs:imgs},
success: function(msg) {
$("#gallery_container").html(msg);
},
error: function(jqXHR, textStatus, errorThrown) {
// Tell the human that something broke.
},
complete: function() {
// This is always called regardless of success or failure.
gallery_show();
loading_hide();
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
var imgs = $("#imgNum").val();
var page = $(this).attr('p');
loadData(page, imgs);
});
$('#go_btn').live('click',function(){
var imgs = $("#imgNum").val();
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page, imgs);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
//The combo box
var sel = $(this);
//Selected images value
var imgs = sel.val();
var page = $('#cur_page').attr('cur_page');
//Feth the images
loadData(page, imgs);
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 16;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']").prop("selected","selected").change();
}());
（函数（）{
var-page；
函数加载_show（）{
$（'#load'）.html（“”.fadeIn（'fast'）；
}
函数加载_hide（）{
$（'加载'）.fadeOut（'快速'）；
}
功能画廊(展览){
$（“#画廊"容器”）.fadeIn（'slow'）；
}
函数库_hide（）{
$（#画廊(容器)）。淡出（10）；
}
函数加载数据（第页，imgs）{
加载_show（）；
画廊藏品（）；
$.ajax
({
键入：“获取”，
url:“new_arrivals_data.php”，
数据：{page:page，imgs:imgs}，
成功：功能（msg）{
$（“#图库"容器”）.html（msg）；
},
错误：函数（jqXHR、textStatus、errorshown）{
//告诉那个人有东西坏了。
},
完成：函数（）{
//无论成功或失败，这总是被称为。
画廊（展览）；
加载_hide（）；
}
});
}
loadData（1）；//第一次页面加载默认结果
$（'#gallery_container.pagination li.active'）.live（'click'，function（））{
var imgs=$（“#imgNum”）.val（）；
var page=$（this.attr（'p'）；
装载数据（第页，imgs）；
});
$（'gobtn'）.live（'click'，function（）{
var imgs=$（“#imgNum”）.val（）；
var page=parseInt（$（'.goto'）.val（））；
var no_of_pages=parseInt（$（'.total'）.attr（'a'）；
如果（page！=0&&page，这可能是因为这一行：loadData（1）的结尾需要一个分号……可能吧？我尝试了上述所有方法。仍然会出现语法错误。用$（document.ready（）包装整个代码不是很好吗？确实，您只需要在ready事件中具有第一个函数。除非调用其他事件。您可以发布到该页面的链接吗？我设法消除了语法错误，但没有效果。它仍然无法运行。我自己已经尝试了很多次使用此代码。如果我向您展示原始的？th，您认为可能会有所帮助吗都是在我的本地主机上完成的。有没有可能我可以把文件发送给你？我会在一分钟后发布原始代码。我也会看看我是否可以让它生效，但你仍然无法看到PHP no？