1. 程式人生 > >JQuery中$.post()和$.ajax()收到的資料不能用的問題

JQuery中$.post()和$.ajax()收到的資料不能用的問題

最近博主在開發一個猜謎遊戲的時候遇到一些關於JQuery中使用這兩個方法可能遇到的問題總結,我自己也是花了好多的心思 和事件才找到問題和解決問題。下面是我自己在開發過程中遇到的問題,希望可以幫助到你。

方法介紹

$.post()這方法一共有四個引數。

引數 描述 URL 必需。規定將請求傳送到哪個 URL。 data 可選。規定連同請求傳送到伺服器的資料。 function(data,status,xhr) 可選。規定當請求成功時執行的函式。 額外的引數: data - 包含來自請求的結果資料 status - 包含請求的狀態(“success”、“notmodified”、“error”、“timeout”、“parsererror”) xhr - 包含 XMLHttpRequest 物件 dataType 可選。規定預期的伺服器響應的資料型別。 預設地,jQuery 會智慧判斷。 可能的型別: “xml” - 一個 XML 文件 “html” - HTML 作為純文字 “text” - 純文字字串 “script” - 以 JavaScript 執行響應,並以純文字返回 “json” - 以 JSON 執行響應,並以 JavaScript 物件返回 “jsonp” - 使用 JSONP 載入一個 JSON 塊,將新增一個 “?callback=?” 到 URL 來規定回撥

$,ajax()這個方法的引數比較多,下面我把我自己寫的程式碼拿上來講解。

 $.ajax({
            url:'setguessing.php',
            type:'post',
            data:{
                uid:23,
                order:num,
                type:1
            },
            dataType:'json',
            success:function (data) {
 });

這裡用到的引數上面$,post()的引數說明都有解析,其實還有其他的引數,但是我開發的過程中並沒有用到這些引數。所以這裡不會說其他引數。

遇到問題

漏寫錯寫的情況

像上面的兩個方法都有好幾個引數,像URL,data和type的兩種提交方式一般都是不會寫漏寫錯的,而且這三個基本都要用到的東西,就算是寫錯了也是很容易就可以找的到錯誤,下面我說說有些引數漏了會怎麼樣。比如 dataType這個引數,這個引數是告訴伺服器,你要傳回來給我什麼型別的資料,一般來說,都是XML和JSON,大多數情況都是JSON,所以,這個dataType引數就要寫明白是JSON,或者說你後端開發的PHP上的有如下的程式碼:

header('Content-type:application/json');

這樣的話,你使用上面的兩個程式碼的時候就可以不用寫這個dataType引數,這段程式碼就是說傳回去的資料型別就是JSON。還有就是要注意引數之間是用一個小逗號連線的,一般來說這種錯誤瀏覽器一般會給你報出來,當然最好就是按照正確的書寫方式來說,就可以避免很多低階錯誤。

返回的資料出現錯誤

因為博主返回的資料型別全都是JSON格式,所以我這裡舉例子就用JSON,其他格式暫不考慮。

返回的資料格式不對

這種錯誤是很經常出現的,特別是像博主自己自學,基本是按照別人的寫法去看的,所以有時候在書寫的時候就會漏掉或者是寫錯,而導致返回的資料型別格式不對。舉個列子: PHP的程式碼:

<?php
header('Content-type:text/html;charset=utf-8');

echo $a = 1;

echo "</br>";

echo $arr = '{
       "uid":"YDW",
       "password":"123"
                                        
    }';
?>

返回前端的資料是這樣的:

1
{ "uid":"YDW", "password":"123" }

這樣的資料如果沒有上面的1是標準的JSON的物件資料型別,是可以直接在前端直接呼叫的,問題就出現在前面的這個1,導致了這個型別的錯誤,然後在你呼叫uid以及password的時候都會出現不認識的情況,類似的情況還有,在文件裡寫了很多提醒自己的註釋,然後在返回的資料型別上面就看到你在文件裡寫的註釋,這種情況其實跟上面的情況是一模一樣的,都會使資料無效化。

還有的情況也是資料格式不對導致的錯誤,比如下面的程式碼:

echo $arr = '{
       "uid":"YDW",
       "password":"123",
                                        
    }';

對比上面的程式碼,只是在password的最後加了一個小逗號,也會導致錯誤,因為JSON資料型別不是一個語句,而是一個數據格式,所以不能加結束分號或者是小逗號結束,小逗號只能在兩個資料之間新增來分割資料。

非同步獲取資料導致錯誤

非同步獲取資料一開始我自己也覺得沒有什麼問題的,直到我發現我在function定義的一個變量出現了錯誤的時候,我才發現非同步獲取資料是有一定的不好之處的,下面舉個例子:

     $.post('setguessing.php?3',{ uid:12,type:3 },
            function(data){
               var chance  = (data['uifo']['chance']);
        },“json”);
            $(

我通過JQuery的$.post()獲取想要的資料,並且定義一個變數chance來獲取返回的資料中的chance,結果在我使用的過程中出現了chance這個變數未定義的情況,當時我就好奇了,為什麼會出現這種情況,後來才知道這是非同步處理的一個不好的結果。下面根據我自己的理解解釋一下。因為這個 $.post()方法預設的是非同步提交,所以如果在你提交的時候,你的程式碼就會繼續執行下去,結果執行到你定義這個變數chance的時候,你的伺服器還是沒有返回資料給你,這個時候你的chance就沒有值,就是等於沒有定義。就是說,你這個變數沒有定義,其實就是你提交的時候,你的伺服器資料沒及時回來,導致你這個變數沒有值。我自己的解決辦法就是使用同步處理。下面展示處理:

   $.ajaxSettings.async = false;
            $.post('setguessing.php?',{ uid:23,type:4},function(data){
                console.log(data);
                erro  = data['error'];
            },"json");
            $.ajaxSettings.async = true;

通過$.ajaxSettings.async這個來關閉非同步執行,在整個post結束的時候再開啟非同步執行。這樣就會等到伺服器返回來資料之後,再執行下面的程式碼,這樣就不會出行未定義的情況。 好了,暫時只記得遇到這些問題,等博主再去找找的小本本看看還有什麼問題遇到過的時候,我會再次補充到這個博文。