整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          $.ajax用法詳解(后臺使用php)

          法: $.ajax([settings]);


          1. $.ajax({
          2. type: "POST",
          3. url: "UserLogincheck",
          4. data: {username:$("#username").val(), password:$("#password").val(),verify:$("#verify").val()},
          5. dataType: "json",
          6. success: function(data){
          7. if(data==1){
          8. // 用戶名或密碼錯誤
          9. alert("用戶名或密碼錯誤");
          10. }
          11. else if(data==2){
          12. alert("驗證碼錯誤");
          13. // 驗證碼錯誤
          14. }
          15. else if(data==0){
          16. window.location.href="index";
          17. }
          18. //跳轉(zhuǎn)頁面
          19. },
          20. error:function(XMLHttpRequest, textStatus, errorThrown){//請求失敗時調(diào)用此函數(shù)
          21. console.log(XMLHttpRequest.status);
          22. console.log(XMLHttpRequest.readyState);
          23. console.log(textStatus);
          24. }
          25. });

          php作為后臺的處理過程


          1. public function UserLogincheck(){//用戶登陸驗證(用戶名和郵箱均可登陸)
          2. $very = new \Think\Verify();
          3. if($very->check($_POST['verify'])){//驗證碼正確
          4. $user_admin = I('post.username');
          5. $judge = " (user_name = '$user_admin' or user_email = '$user_admin' )";
          6. $user_del_status = $this->user->where($judge)->getField('user_del');
          7. if($user_del_status == 0){//用戶未被注銷
          8. $user_password = I('post.password');
          9. $judge .= "and user_password = '$user_password'";
          10. $res = $this->user->where($judge)->find();
          11. if($res){//記錄用戶登陸狀態(tài)
          12. $_SESSION['ADMIN_user_id'] = $this->user->where($judge)->getField('user_id');
          13. $_SESSION['ADMIN_user_name'] = $data['user_name'];
          14. $this->ajaxReturn(0);//登陸成功
          15. }
          16. $this->ajaxReturn(1);//用戶名或密碼錯誤
          17. }
          18. else
          19. $this->ajaxReturn(8);//用戶信息被注銷
          20. }
          21. else
          22. $this->ajaxReturn(2);//驗證碼錯誤
          23. }

          ajax參數(shù)詳解:

          data

          類型:String

          發(fā)送到服務(wù)器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組,jQuery 將自動為不同值對應(yīng)同一個名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。

          dataFilter

          類型:Function

          給 Ajax 返回的原始數(shù)據(jù)的進(jìn)行預(yù)處理的函數(shù)。提供 data 和 type 兩個參數(shù):data 是 Ajax 返回的原始數(shù)據(jù),type 是調(diào)用 jQuery.ajax 時提供的 dataType 參數(shù)。函數(shù)返回的值將由 jQuery 進(jìn)一步處理。

          dataType

          類型:String

          預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定,jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷,比如 XML MIME 類型就被識別為 XML。在 1.4 中,JSON 就會生成一個 JavaScript 對象,而 script 則會執(zhí)行這個腳本。隨后服務(wù)器端返回的數(shù)據(jù)會根據(jù)這個值解析后,傳遞給回調(diào)函數(shù)。可用值:

          "xml": 返回 XML 文檔,可用 jQuery 處理。

          "html": 返回純文本 HTML 信息;包含的 script 標(biāo)簽會在插入 dom 時執(zhí)行。

          "script": 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。除非設(shè)置了 "cache" 參數(shù)。注意:在遠(yuǎn)程請求時(不在同一個域下),所有 POST 請求都將轉(zhuǎn)為 GET 請求。(因為將使用 DOM 的 script標(biāo)簽來加載)

          "json": 返回 JSON 數(shù)據(jù) 。

          "jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時,如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。

          "text": 返回純文本字符串

          error

          類型:Function

          默認(rèn)值: 自動判斷 (xml 或 html)。請求失敗時調(diào)用此函數(shù)。

          有以下三個參數(shù):XMLHttpRequest 對象、錯誤信息、(可選)捕獲的異常對象。

          如果發(fā)生了錯誤,錯誤信息(第二個參數(shù))除了得到 null 之外,還可能是 "timeout", "error", "notmodified" 和 "parsererror"。

          這是一個 Ajax 事件。

          global

          類型:Boolean

          是否觸發(fā)全局 AJAX 事件。默認(rèn)值: true。設(shè)置為 false 將不會觸發(fā)全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

          ifModified

          類型:Boolean

          僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。默認(rèn)值: false。使用 HTTP 包 Last-Modified 頭信息判斷。在 jQuery 1.4 中,它也會檢查服務(wù)器指定的 'etag' 來確定數(shù)據(jù)沒有被修改過。

          jsonp

          類型:String

          在一個 jsonp 請求中重寫回調(diào)函數(shù)的名字。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數(shù)里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 會導(dǎo)致將 "onJsonPLoad=?" 傳給服務(wù)器。

          jsonpCallback

          類型:String

          為 jsonp 請求指定一個回調(diào)函數(shù)名。這個值將用來取代 jQuery 自動生成的隨機(jī)函數(shù)名。這主要用來讓 jQuery 生成度獨特的函數(shù)名,這樣管理請求更容易,也能方便地提供回調(diào)函數(shù)和錯誤處理。你也可以在想讓瀏覽器緩存 GET 請求的時候,指定這個回調(diào)函數(shù)名。

          password

          類型:String

          用于響應(yīng) HTTP 訪問認(rèn)證請求的密碼

          processData

          類型:Boolean

          默認(rèn)值: true。默認(rèn)情況下,通過data選項傳遞進(jìn)來的數(shù)據(jù),如果是一個對象(技術(shù)上講只要不是字符串),都會處理轉(zhuǎn)化成一個查詢字符串,以配合默認(rèn)內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息,請設(shè)置為 false。

          scriptCharset

          類型:String

          只有當(dāng)請求時 dataType 為 "jsonp" 或 "script",并且 type 是 "GET" 才會用于強制修改 charset。通常只在本地和遠(yuǎn)程的內(nèi)容編碼不同時使用。

          success

          類型:Function

          請求成功后的回調(diào)函數(shù)。

          參數(shù):由服務(wù)器返回,并根據(jù) dataType 參數(shù)進(jìn)行處理后的數(shù)據(jù);描述狀態(tài)的字符串。

          這是一個 Ajax 事件。

          traditional

          類型:Boolean

          如果你想要用傳統(tǒng)的方式來序列化數(shù)據(jù),那么就設(shè)置為 true。請參考工具分類下面的 jQuery.param 方法。

          timeout

          類型:Number

          設(shè)置請求超時時間(毫秒)。此設(shè)置將覆蓋全局設(shè)置。

          type

          類型:String

          默認(rèn)值: "GET")。請求方式 ("POST" 或 "GET"), 默認(rèn)為 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持。

          url

          類型:String

          默認(rèn)值: 當(dāng)前頁地址。發(fā)送請求的地址。

          username

          類型:String

          用于響應(yīng) HTTP 訪問認(rèn)證請求的用戶名。

          xhr

          類型:Function

          需要返回一個 XMLHttpRequest 對象。默認(rèn)在 IE 下是 ActiveXObject 而其他情況下是 XMLHttpRequest 。用于重寫或者提供一個增強的 XMLHttpRequest 對象。這個參數(shù)在 jQuery 1.3 以前不可用。

          .下載jQuery

          訪問jQuery官方網(wǎng)站(http://jquery.com),如圖1-1所示。

          jQuery官方網(wǎng)站

          在頁面上方可以看到Download jQuery按鈕,該按鈕上的v3.3.1是jQuery當(dāng)前最新版本的版本號,單擊該按鈕后,進(jìn)入下載頁面。

          為了獲取其他版本的jQuery,在下載頁面的下半部分找到https://code.jquery.com鏈接,獲取jQuery所有版本的下載鏈接地址,如圖2所示。

          圖2 獲取jQuery下載地址

          單擊圖2中標(biāo)示出的鏈接,進(jìn)入jQuery所有版本的下載頁面,即可看到j(luò)Query1.12.4版本的jQuery文件下載鏈接,如圖3所示。

          圖3 jQuery 1.12.4壓縮版和未壓縮版

          從圖l-3中可以看出,jQuery文件的類型主要包括未壓縮(uncompressed)的開發(fā)版和壓縮(minified)后的生產(chǎn)版。它們的區(qū)別在于,壓縮版本是將jQuery文件中的空白字符、注釋、空行等與邏輯無關(guān)的內(nèi)容刪除,并進(jìn)行一些優(yōu)化,使得文件體積減小,加載速度比未壓端版快。而未壓縮版本的代碼可讀性更好,所以建議讀者在學(xué)習(xí)期間選擇未壓縮版本。

          2.引入jQuery

          在項目中引入jQuery時,只需要把下載好的jQuery文件保存到項目目錄中,在項目的HTML文件中使用標(biāo)簽引入即可。示例代碼如下。

          <!--引入本地下載的jQuery-->
          <script src="jquery-1.12.4.js"></script>

          許多網(wǎng)站提供了靜態(tài)資源公共庫,通過CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))可以提高jQuery的下載速度。示例代碼如下。

          節(jié)我們學(xué)習(xí)如何使用 jQuery 中的方法來添加和刪除 HTML 元素。

          jQuery 中用于添加 HTML 元素的方法有如下幾種:

          方法

          描述

          append()

          在所選元素的末尾插入內(nèi)容

          prepend()

          在選定元素的開頭插入內(nèi)容

          after()

          在選定元素后插入內(nèi)容

          before()

          在選定元素之前插入內(nèi)容

          而用于刪除元素的方法有:

          方法

          描述

          remove()

          刪除被選元素容,包括子元素

          empty()

          刪除被選元素的所有子節(jié)點和內(nèi)容

          append()方法

          append() 方法可以在指定元素的末尾插入內(nèi)容。

          語法如下:

          $(selector).append(content,function(index,html))
          
          • content:規(guī)定要插入的內(nèi)容,可以包含 HTML 元素、jQuery 對象、DOM 元素。
          • function(index,html):規(guī)定返回待插入內(nèi)容的函數(shù),index 為集合中元素的索引位置,html 為被選元素的當(dāng)前 HTML

          示例:

          我們來看下面這個例子:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>jQuery_俠課島(9xkd.com)</title>
          <script src="jquery-3.5.1.min.js"></script>
          <script>
            $(function(){
              $("button").click(function(){
                $("p").append("俠課島");
              });
            });
          </script>
          </head>
          <body>
            <p>你好,我的名字叫做:</p>
            <button>點擊追加文本</button>
          </body>
          </html>
          

          點擊按鈕,在指定的 <p> 標(biāo)簽?zāi)┪蔡砑游谋緝?nèi)容 “俠課島”,我們可以在瀏覽器中看一下演示結(jié)果:

          除了文本內(nèi)容,我們還可以在元素中添加 HTML

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>jQuery_俠課島(9xkd.com)</title>
          <script src="jquery-3.5.1.min.js"></script>
          <script>
            $(function(){
              $("button").click(function(){
                $("ul").append("<li>strawberry</li>");
              });
            });
          </script>
          </head>
          <body>
            <ul>
              <li>apple</li>
              <li>pear</li>
              <li>peach</li>
              <li>watermelon</li>
            </ul>
            <button>點擊追加文本</button>
          </body>
          </html>
          
          

          在瀏覽器中的演示結(jié)果:

          prepend()方法

          prepend() 方法其實和 append() 方法類似,語法也差不多。但是 prepend() 方法主要用于在被選元素的開頭插入指定內(nèi)容。

          語法如下:

          $(selector).prepend(content,function(index,html))
          

          示例:

          我們將上述示例中的 append() 方法改成 prepend() 方法:

          $(function(){
              $("button").click(function(){
                $("ul").prepend("<li>strawberry</li>");
              });
          });
          

          然后看一下在瀏覽器中的演示結(jié)果:

          after()方法

          after() 方法用于在被選元素后插入指定的內(nèi)容。看起來 after() 方法和 append() 方法的作用好像差不多,但是其實兩個方法還是有區(qū)別的。 append() 方法是在被選元素的結(jié)尾插入內(nèi)容,插入的內(nèi)容仍然在元素內(nèi)部。而 after() 插入的內(nèi)容會重新起一行,與被選擇的元素并沒有什么邏輯上的聯(lián)系。

          示例:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>jQuery_俠課島(9xkd.com)</title>
          <script src="jquery-3.5.1.min.js"></script>
          <script>
            $(function(){
              $("button").click(function(){
                $("p").after("<p>俠課島</p>");
              });
            });
          </script>
          </head>
          <body>
            <p>你好,我的名字叫做:</p>
            <button>點擊追加文本</button>
          </body>
          </html>
          

          在瀏覽器中的演示效果:

          before()方法

          before() 方法用于在被選元素之前插入指定的內(nèi)容。它和 prepend() 方法的區(qū)別在于一個在被選元素內(nèi)插入內(nèi)容,一個在被選元素外。

          注意 before() 方法和 after() 方法都是在被選元素外插入內(nèi)容。append()prepend() 方法都是在被選元素內(nèi)插入內(nèi)容。

          示例:

          例如將上述示例中的方法改為 before

          $(function(){
              $("button").click(function(){
                $("p").before("<p>俠課島</p>");
              });
          });
          

          在瀏覽器中的演示效果:

          remove()方法

          remove() 方法用于刪除被選元素及其子元素。該方法也會刪除被選元素的數(shù)據(jù)和事件。

          示例:

          例如下面這個例子:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>jQuery_俠課島(9xkd.com)</title>
          <script src="jquery-3.5.1.min.js"></script>
          <script>
            $(function(){
              $("button").click(function(){
                $("p").remove();
              });
            });
          </script>
          </head>
          <body>
            <p>你好,歡迎來到俠課島!</p>
            <button>點擊刪除</button>
          </body>
          </html>
          

          在瀏覽器中的演示效果:

          從上圖中可以看到,remove() 方法將指定的 p 元素連標(biāo)簽帶元素全部刪除。

          empty()方法

          empty() 方法用于刪除被選元素的所有子節(jié)點和內(nèi)容。該方法不會移除元素本身,或它的屬性。

          示例:

          我們講上述示例中的 remove() 方法改為empty() 方法,看看有什么不同:

          $(function(){
              $("button").click(function(){
                $("p").empty();
              });
          });
          

          在瀏覽器中的演示效果:

          可以看到 empty() 方法只會刪除指定元素中的內(nèi)容,不會刪除元素本身,當(dāng)然如果元素上有屬性,屬性也不會被刪除,大家可以自己試一下。


          主站蜘蛛池模板: 亚洲无圣光一区二区| 精品国产日产一区二区三区| 欲色aV无码一区二区人妻| 天堂va在线高清一区| 亚洲中文字幕在线无码一区二区| 亚洲片一区二区三区| 国产在线精品一区免费香蕉| 国产一区二区免费在线| 美女视频黄a视频全免费网站一区| 亚洲国产成人久久一区久久| 国产福利电影一区二区三区久久老子无码午夜伦不 | 奇米精品视频一区二区三区| 亚洲乱码国产一区三区| 亚洲av无码一区二区三区乱子伦| 精品国产一区二区三区久久久狼| 国产精品福利一区二区| 国产SUV精品一区二区四| 福利片免费一区二区三区| 亚洲毛片αv无线播放一区| 国产成人精品第一区二区| 亚洲美女高清一区二区三区| 亚洲午夜电影一区二区三区 | 国产一区二区三区在线免费 | 亚洲一区二区免费视频| 八戒久久精品一区二区三区| 天堂资源中文最新版在线一区| 国模吧一区二区三区精品视频| 日本一区二区三区高清| 国产乱码精品一区二区三区四川人| 中文字幕在线一区二区三区| 国产主播福利一区二区| 亚洲乱码日产一区三区| 波多野结衣在线观看一区| 久久精品黄AA片一区二区三区 | 国产精品99无码一区二区| 亚洲码欧美码一区二区三区| 精品久久一区二区| 无码人妻久久一区二区三区蜜桃| 精品国产伦一区二区三区在线观看| 久久国产精品免费一区| 国产在线一区二区视频|