Ajax效果--个人收藏

$.ajax({

             url: "../../../Tools/WeChatMenu.ashx?action=get_menu",

             type: "post",

             data: { "appid": $("#use").attr("app_id") },

             beforeSend: function (XMLHttpRequest) {

                showout(1,"正在请求数据...");

             },

             success: function(data) {

                 hiddenoutbox(); //成功后隐藏弹出层

                 var json = $.parseJSON(data);

                 var bizmenu = $("#bizmenu"),

	                dialogBox = $("#dialogBox")

                 if (json.msg == 1) {

                     $.each(json.msgbox, function(i, item) {

                         $("#level1").find(".nav_btn").html(item.data_name);

                         $("#level1").find(".nav_btn").attr("db_id", item.id);

                         $("#level1").children().attr("id", "level1_" + i);

                         bizmenu.append($("#level1").html());

                         $("#level1").attr("data-domid", i);

                         if (item.stair_list != null) //有子菜单

                         {

                             var bizmenu_name = $("#bizmenu_name"),

		                    dialogBox = $("#dialogBox"),

			                menuHtml = $("#level2_1").html();

                             $.each(item.stair_list, function(j, item2) {

                                 $("#level1_" + i).find(".sub_nav_list").append(menuHtml);

                                 $("#level2_1_1").attr("id", "level2_1_" + j);

                                 $("#" + "level2_1_" + j).find(".level2name").html(item2.data_name);

                                 $("#" + "level2_1_" + j).find(".level2name").attr("db_id", item2.id);



                             })



                         }

                     })

                 }else

                 {

                    showout(0,json.msgbox);

                    window.setTimeout(hiddenoutbox,3000); 

                 }

             },

             error:function(XMLHttpRequest, textStatus, errorThrown){

                showout(0,"状态:" + textStatus + ";出错提示:" + errorThrown);

                window.setTimeout(hiddenoutbox,3000); 

             }

         })

  

弹出层样式:

.showoutbox{width:300px; min-height:32px; position:absolute; top:0; z-index:300; background:#0F0; display:none; text-align:center; line-height:32px;color:#fff}

.underbox{width:100%; background:#000; filter: alpha(opacity=0);-moz-opacity: 0;opacity: 0; z-index:299; position:absolute; left:0; top:0; display:none;}

弹出层方法:

//弹出层方法

	    function showout(status,datatext){

		    $(".showoutbox").html(datatext);

		    var myleft=($(window).width()-300)/2+'px';		

		    if(status==1)

			    $(".showoutbox").css({left:myleft,display:'block',background:'#529E45'});

		    else if(status==0)

			    $(".showoutbox").css({left:myleft,display:'block',background:'#ED973A'});

		    $(".underbox").css({height:$(window).height()+'px',display:'block'});

	    }

	    //关闭弹出层

	    function hiddenoutbox(){

	        $(".showoutbox").text("");

		    $(".showoutbox").removeAttr("style");

		    $(".underbox").removeAttr("style");

	    }



//status=0或1,代表失败或成功,datatext=提示的文本

层:

<div class="showoutbox"></div>

<div class="underbox"></div>



//不能放到任何div下,直接放到body下

  

你可能感兴趣的:(Ajax)