动态

详情 返回 返回

jQuery Ajax Post請求連續多個問號特殊數據異常問題 (??) - 动态 详情

問題場景

jquery ajax,非jsonp請求,post數據中json包含多個問號,比如“{“a”:“aa??”}”。
請求時前端報錯,由於jsonp的參數加到了post數據中的??位置,就無法通過url傳入了。

報錯信息(生產環境)

"parsererror" SyntaxError: Unexpected token ':'
    at eval (<anonymous>)
    at eval (jquery.js:339)
    at Function.globalEval (jquery.js:340)
    at text script (jquery.js:9773)
    at ajaxConvert (jquery.js:8843)
    at done (jquery.js:9260)
    at XMLHttpRequest.callback (jquery.js:9720) "{}"

或者(開發環境)

"parsererror" Error: jQuery111009581711862361235_1597629221274 was not called
    at Function.error (jquery.js?1157:248)
    at s.converters.script json (jquery.js?1157:9893)
    at ajaxConvert (jquery.js?1157:8843)
    at done (jquery.js?1157:9260)
    at HTMLScriptElement.script.onload.script.onreadystatechange (jquery.js?1157:9831) "{}"

或者(後台接收數據)

前端發送的含 ?? 的字符變成類似 jQuery183554546_6546423242342 形式的字符。

問題原因

我們找到jquery的這段代碼

// Detect, normalize options and install callbacks for jsonp requests
jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) {
    var callbackName, overwritten, responseContainer,
        jsonProp = s.jsonp !== false && ( rjsonp.test( s.url ) ?
            "url" :
            typeof s.data === "string" && !( s.contentType || "" ).indexOf("application/x-www-form-urlencoded") && rjsonp.test( s.data ) && "data"
        );

看到如果data中存在??這種特殊寫法,rjsonp.test( s.data )返回true,最終將"data"賦值給jsonProp。
而data中不存在??就會給jsonProp賦值為false。

如果jsonProp=“data”
那麼會走到這段代碼裏面

// Handle iff the expected data type is "jsonp" or we have a parameter to set
    if ( jsonProp || s.dataTypes[ 0 ] === "jsonp" ) {

        // Get callback name, remembering preexisting value associated with it
        callbackName = s.jsonpCallback = jQuery.isFunction( s.jsonpCallback ) ?
            s.jsonpCallback() :
            s.jsonpCallback;

        // Insert callback into url or form data
        if ( jsonProp ) {
            s[ jsonProp ] = s[ jsonProp ].replace( rjsonp, "$1" + callbackName );
           } else if ( s.jsonp !== false ) {
            s.url += ( rquery.test( s.url ) ? "&" : "?" ) + s.jsonp + "=" + callbackName;
        }

由於這行代碼s[ jsonProp ] = s[ jsonProp ].replace( rjsonp, “$1” + callbackName );
最終data中的??會被替換為callbackName,可以監聽發現這個異常現象。
替換了這裏就不會走下面的s.url的常規jsonp參數賦值到url的處理了,所以導致異常的發生。

解決辦法

讓特殊data的jsonProp=false,我們從jsonProp = s.jsonp !== false這塊入手,調用ajax時:
$.ajax傳參時jsonp: false賦值,這樣jsonProp直接賦值為false,不走正則檢測,就不會出問題了。

那麼如果跨域怎麼辦呢?
這個可以採用服務端加跨域header解決。

參考:https://blog.csdn.net/whq12789/article/details/108050349

Add a new 评论

Some HTML is okay.