我一直在尝试加载gif图像，直到ajax加载数据并显示它。但我对此感到欣慰。
我希望你能帮助我，这是我的代码提前搜索。
现在我想为这个添加加载gif。
$.ajax({
type: 'POST',
url: base_rul+'site/advancedsearch',
data: {
keyValues: keyValues
},
dataType: 'json',
success: function(data)
{
var content = [''];
if(data.status=='1')
{
//for(var k=1;k<=2;k++){
//for chapter1 starts
if( data.item.chapter[1] && data.item.chapter[1].length>=1){
for(i=0;i<data.item.chapter[1].length;i++){
var obj = data.item.chapter[1][i];
//alert(data.item.chapter[1][0].chapter_row);
if(data.item.chapter[1][i].chapter_row==0){
content.push('<h3>Chapter 18 New Health Care Occupancy</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter1 ends
//for chapter2 starts
if( data.item.chapter[2] && data.item.chapter[2].length>=1){
for(i=0;i<data.item.chapter[2].length;i++){
var obj = data.item.chapter[2][i];
//alert(data.item.chapter[1][0].chapter_row);
if(data.item.chapter[2][i].chapter_row==0){
content.push('<h3>Chapter 19 Existing Health Care Occupancy</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter2 ends
//for chapter3 starts
if( data.item.chapter[3] && data.item.chapter[3].length>=1){
for(i=0;i<data.item.chapter[3].length;i++){
var obj = data.item.chapter[3][i];
if(data.item.chapter[3][i].chapter_row==0){
content.push('<h3>Chapter 20 New Ambulatory Health Care Occupancy</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter3 ends
//for chapter4 starts
if( data.item.chapter[4] && data.item.chapter[4].length>=1){
for(i=0;i<data.item.chapter[4].length;i++){
var obj = data.item.chapter[4][i];
if(data.item.chapter[4][i].chapter_row==0){
content.push('<h3>Chapter 21 Existing Ambulatory Health Care Occupancy</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter4 ends
//for chapter5 starts
if( data.item.chapter[5] && data.item.chapter[5].length>=1){
for(i=0;i<data.item.chapter[5].length;i++){
var obj = data.item.chapter[5][i];
if(data.item.chapter[5][i].chapter_row==0){
content.push('<h3>Chapter 32 New Residential Board and Care</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter5 ends
//for chapter6 starts
if( data.item.chapter[6] && data.item.chapter[6].length>=1){
for(i=0;i<data.item.chapter[6].length;i++){
var obj = data.item.chapter[6][i];
if(data.item.chapter[6][i].chapter_row==0){
content.push('<h3>Chapter 33 Existing Residential Board and Care</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter6 ends
//for chapter7 starts
if( data.item.chapter[7] && data.item.chapter[7].length>=1){
for(i=0;i<data.item.chapter[7].length;i++){
var obj = data.item.chapter[7][i];
if(data.item.chapter[7][i].chapter_row==0){
content.push('<h3>Chapter 18 New Health Care Occupancies</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter7 ends
//for chapter8 starts
if( data.item.chapter[8] && data.item.chapter[8].length>=1){
for(i=0;i<data.item.chapter[8].length;i++){
var obj = data.item.chapter[8][i];
if(data.item.chapter[8][i].chapter_row==0){
content.push('<h3>Chapter 19 Existing Health Care Occupancies</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter8 ends
//for chapter9 starts
if( data.item.chapter[9] && data.item.chapter[9].length>=1){
for(i=0;i<data.item.chapter[9].length;i++){
var obj = data.item.chapter[9][i];
if(data.item.chapter[9][i].chapter_row==0){
content.push('<h3>Chapter 20 New Amulatory Health Care Occupancies</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter9 ends
//for chapter10 starts
if( data.item.chapter[10] && data.item.chapter[10].length>=1){
for(i=0;i<data.item.chapter[10].length;i++){
var obj = data.item.chapter[10][i];
if(data.item.chapter[10][i].chapter_row==0){
content.push('<h3>Chapter 21 Existing Amulatory Health Care Occupancies</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter10 ends
//for chapter11 starts
if( data.item.chapter[11] && data.item.chapter[11].length>=1){
for(i=0;i<data.item.chapter[11].length;i++){
var obj = data.item.chapter[11][i];
if(data.item.chapter[11][i].chapter_row==0){
content.push('<h3>Chapter 32 New Residential board</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter11 ends
//for chapter12 starts
if( data.item.chapter[12] && data.item.chapter[12].length>=1){
for(i=0;i<data.item.chapter[12].length;i++){
var obj = data.item.chapter[12][i];
if(data.item.chapter[12][i].chapter_row==0){
content.push('<h3>Chapter 33 Existing Residential board</h3>');
}
content.push('<ul><li><div>');
content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
content.push('</div></li></ul>');
}//end for each loop
}//end if
//for chapter12 ends
//}//end k loop
}//if condition ends
else
{
content.push('<ul><li><div>');
content.push('<p>No records found.</p>');
content.push('</div></li></ul>');
}
$('#advanced_search_display').html(content.join(''));
$('#filter').css("display","none") ;
$('#active_filters').css("display","none");
}
});
}//end function
jQuery的ajax有一个叫做beforeend的方法，好好利用它吧!
的例子:
$.ajax({
url: someurl.php,
data: data,
beforeSend: function() { $('#image_id').show(); },
success: function() {
$('#image_id').hide();
// ...
}
});
可以将图片添加到加载页面。当ajax加载时，它会自动重写图像并显示ajax输出。
<script>
var DisplayIMge = document.getElementById("ajaxdiv");
DisplayIMge.innerHTML = "<img src='cdn/images/ajax-loader.gif' /><h3>Please wait while we load</h3>"
</script>
希望这对你有用!
一种方法是:
在$.ajax({ });之前
Write: $("#showImage").html("<img src="url"/>");
:
$.ajax({
type: 'POST',
url: base_rul+'site/advancedsearch',
data: {
keyValues: keyValues
},
dataType: 'json',
success: function(data)
{
//here add $("#showImage").html("");
// your content here
}
});
在内容加载之前，添加一个图像，并在成功调用后清除该图像。
你可以像这样纠正你的代码(就像@icktoofay说的):
var aTitles = [
'Chapter 18 New Health Care Occupancy',
'Chapter 19 Existing Health Care Occupancy',
...
];
var outSomeResults = function(content, data, id) {
for(var i=0; i < data.length; i++){
var obj = data[i];
if( obj.chapter_row == 0 ) {
content.push('<h3>'+aTitles[id]+'</h3>');
}
content.push(
'<ul><li>' +
'<div><p>'+obj.section_number +' '+ obj.title+'</p></div>' +
'</li></ul>'
);
}
}
....
success: function(data) {
var content = [''];
if(data.status=='1') {
for(var i=0; i<data.item.chapter.length; i++ ) {
if( data.item.chapter[i+1] && data.item.chapter[i+1].length>=1 ) {
outSomeResults(content, data.item.chapter[i+1], i);
}
}
}