而AJAX加载内容和javascript

而AJAX加载内容和javascript

本文介绍了如何加载GIF图像,而AJAX加载内容和javascript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在试图加载GIF图像,直到AJAX加载数据并显示它。但我感觉安慰吧。

我希望你能帮助我there..this我的code的高级搜索。

现在我想添加加载GIF这一点。

  $。阿贾克斯({
    键入:POST,
    网址:base_rul +网站/填写AdvancedSearch',
    数据: {
        keyValues​​:keyValues
    },
    数据类型:JSON,
    成功:函数(数据)
    {

        VAR含量= [''];
        如果(data.status =='1')
        {

            //为(变种K = 1; K< = 2; k ++){

          //为第一章开始
          如果(data.item.chapter [1]&安培;&安培; data.item.chapter [1] .length> = 1){
               对于(i = 0; I< data.item.chapter [1] .length;我++){
                  变种物镜= data.item.chapter [1] [I];
                  //alert(data.item.chapter[1][0].chapter_row);
                    如果(data.item.chapter [1] [i]于.chapter_row == 0){
                       content.push('< H3>第18章新医入住< / H3>');
                     }

                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第一章结束

         //为第二章开始
          如果(data.item.chapter [2]&安培;&安培; data.item.chapter [2] .length> = 1){
               对于(i = 0; I< data.item.chapter [2] .length;我++){
                  变种物镜= data.item.chapter [2] [I];
                  //alert(data.item.chapter[1][0].chapter_row);
                    如果(data.item.chapter [2] [i]于.chapter_row == 0){
                       content.push('< H3>第19章现有的医疗入住< / H3>');
                     }

                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第二章结束

            //为第三章开始
            如果(data.item.chapter [3]&安培;&安培; data.item.chapter [3] .length> = 1){
                对于(i = 0; I< data.item.chapter [3] .length;我++){
                    变种物镜= data.item.chapter [3] [i]于;

                    如果(data.item.chapter [3] [i]于.chapter_row == 0){
                       content.push('< H3>第20章新门诊医疗保健入住< / H3>');
                     }

                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第三章结束

            //为第四​​章开始
            如果(data.item.chapter [4]&安培;&安培; data.item.chapter [4] .length> = 1){
                对于(i = 0; I< data.item.chapter [4] .length;我++){
                    变种物镜= data.item.chapter [4] [I];

                    如果(data.item.chapter [4] [I] .chapter_row == 0){
                       content.push('< H3>第21章现有的门诊医疗保健入住< / H3>');
                     }

                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第四​​章结束

            //为第5章开始
            如果(data.item.chapter [5]&安培;&安培; data.item.chapter [5] .length> = 1){
                对于(i = 0; I< data.item.chapter [5] .length;我++){
                    变种物镜= data.item.chapter [5] [I];

                    如果(data.item.chapter [5] [I] .chapter_row == 0){
                       content.push('< H3>第32章新建住宅局和护理及LT; / H3>');
                     }

                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第5章结束

            //为第6章开始
            如果(data.item.chapter [6]&安培;&安培; data.item.chapter [6] .length> = 1){
                对于(i = 0; I< data.item.chapter [6] .length;我++){
                    变种物镜= data.item.chapter [6] [I];

                    如果(data.item.chapter [6] [I] .chapter_row == 0){
                       content.push('< H3>第33章既有居住董事会和护理及LT; / H3>');
                     }


                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第6章结束

            //为第7章启动
            如果(data.item.chapter [7]&安培;&安培; data.item.chapter [7] .length> = 1){
                对于(i = 0; I< data.item.chapter [7] .length;我++){
                    变种物镜= data.item.chapter [7] [I];

                    如果(data.item.chapter [7] [I] .chapter_row == 0){
                       content.push('< H3>第18章新的医疗用房< / H3>');
                     }

                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第7章结束

            //为第八章开始
            如果(data.item.chapter [8]&安培;&安培; data.item.chapter [8] .length> = 1){
                对于(i = 0; I< data.item.chapter [8] .length;我++){
                    变种物镜= data.item.chapter [8] [I];

                    如果(data.item.chapter [8] [I] .chapter_row == 0){
                       content.push('< H3>第19章现有的医疗用房< / H3>');
                     }
                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第八章结束

            //为第9章开始
            如果(data.item.chapter [9]&安培;&安培; data.item.chapter [9] .length> = 1){
                对于(i = 0; I< data.item.chapter [9] .length;我++){
                    变种物镜= data.item.chapter [9] [I];

                    如果(data.item.chapter [9] [I] .chapter_row == 0){
                       content.push('< H3>第20章新Amulatory医疗用房< / H3>');
                     }

                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第9章结束

            //为第10章启动
            如果(data.item.chapter [10]&安培;&安培; data.item.chapter [10] .length> = 1){
                对于(i = 0; I< data.item.chapter [10] .length;我++){
                    变种物镜= data.item.chapter [10] [Ⅰ];

                    如果(data.item.chapter [10] [Ⅰ] .chapter_row == 0){
                       content.push('< H3>第21章现有Amulatory医疗用房< / H3>');
                     }

                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第10章结束

            //为第十一章开始
            如果(data.item.chapter [11]&安培;&安培; data.item.chapter [11] .length> = 1){
                对于(i = 0; I< data.item.chapter [11] .length;我++){
                    变种物镜= data.item.chapter [11] [Ⅰ];

                    如果(data.item.chapter [11] [Ⅰ] .chapter_row == 0){
                       content.push('< H3>第32章新建住宅板< / H3>');
                     }

                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第十一章结束

            //为第12章启动
            如果(data.item.chapter [12]&安培;&安培; data.item.chapter [12] .length> = 1){
                对于(i = 0; I< data.item.chapter [12] .length;我++){
                    变种物镜= data.item.chapter [12] [Ⅰ];

                    如果(data.item.chapter [12] [Ⅰ] .chapter_row == 0){
                       content.push('< H3>第33章既有居住板< / H3>');
                     }

                    content.push('< UL><李>< D​​IV>');
                    content.push('&其中p为H.;'+ obj.section_number +''+ obj.title +'&所述; / P>');
                    content.push('< / DIV>< /李>< / UL>');

                } //结束for each循环
            如果} //结束
            //为第12章结束

            //} //结束ķ循环

        } //如果条件结束
        其他
        {
            content.push('< UL><李>< D​​IV>');

            content.push('< P>没有找到记录< / P>');

            content.push('< / DIV>< /李>< / UL>');
        }
        $('#advanced_search_display)HTML(content.join(''));
      $('#过滤器)的CSS(显示,无);
      $('#active_filters)的CSS(显示,无);
    }

});


} //函数结束
 

解决方案

jQuery的AJAX有一个名为beforeSend方法,利用它!

例如:

  $。阿贾克斯({
    网址:someurl.php,
    数据:数据,
    beforeSend:函数(){$('#image_id)显示(); },
    成功:函数(){
        $('#image_id)隐藏()。
        // ...
    }
});
 

I have been trying to load gif image until ajax load the data and show it. but i am feeling comforted to it.

I hope you can help me out there..this is my code for advance search.

Now i want to add loading gif for this.

$.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's ajax has a method called beforeSend, make use of it!

Example:

$.ajax({
    url: someurl.php,
    data: data,
    beforeSend: function() { $('#image_id').show(); },
    success: function() {
        $('#image_id').hide();
        // ...
    }
});

这篇关于如何加载GIF图像,而AJAX加载内容和javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-21 00:50