JQuery 之Ajax 示例

 jQuery之ajax post篇------Code

<script type="text/javascript">
function adddata()
    {
     var typeName=$("#<%=this.typeName.ClientID%>").val();
     var msg=" not be empty";
     if(typeName=="")
     {
        if(msg!="")
          {
            alert(msg);
            return false;
          } 
     }
     else
     {
         //顯示進度條
         $("#loading").ajaxStart(function(){
         $(this).show();
         });
         
         //提交前觸發的事件
         $("#msg").ajaxSend(function(request, settings){$(this).append("<li>Starting request at " + settings.url + "</li>");});

          //這裏的countryid  可以動態從GridView裏面取
          var countryid= $("#<%=this.drpCountry.ClientID%>").val();//獲取下拉菜單值
          var countryname=format_get_name(countryid);//獲取下拉菜單文本
          var typeName = $("#<%=this.typeName.ClientID%>").val();//獲取txt爲typeName的值
          var showTypeDesc = $("#<%=this.showTypeDesc.ClientID%>").val();//獲取txt爲showTypeDesc的值
           
           //調用Juqery Ajax
           $.ajax({
           type: "POST",
           url: "addNews.aspx",
           timeout: 20000,
           error: function(){alert('error');},
           data: "countryid="+countryid+"&countryname="+countryname+"&typeName="+typeName+"&showTypeDesc="+showTypeDesc,
           success: function(msg)
           {
           
           var text=msg.split('<');
           //當AJAX請求失敗時添加一個被執行的方法
           $("#msg").ajaxError(function(request, settings){
           $(this).append("<li>Error requesting page " + settings.url + "</li>");
           });
           
            //當AJAX請求成功時添加一個被執行的方法
           $("#msg").ajaxSuccess(function(request, settings){
           $(this).append(text[0]);
           });

          //清空文本里面的值
           $("#<%=this.typeName.ClientID%>").val("");
           $("#<%=this.showTypeDesc.ClientID%>").val("");
           return false;
           }
           });
      }
   }
   
    //獲取下拉菜單裏面的文本內容
    function format_get_name(id)
    {
        var drp = $('<%=drpCountry.ClientID%>');
        for ( var i =0;i<drp.options.length;i++)
        {
            if ( drp.options[i].value == id )
            {
                return drp.options[i].text;
            }
        }
        return '';
    }
</script>