快捷導(dǎo)航

在Js頁面通過POST傳遞參數(shù)跳轉(zhuǎn)到新頁面詳解

更新時(shí)間：2017年08月25日 10:54:09 作者：yexiaobai

這篇文章主要給大家介紹了關(guān)于在Js頁面通過POST傳遞參數(shù)跳轉(zhuǎn)到新頁面的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

場(chǎng)景

最近在工作中遇到一個(gè)需求，有個(gè)頁面 a.vm，對(duì) ajax 請(qǐng)求的結(jié)果進(jìn)行判斷后，獲取結(jié)果里面的數(shù)據(jù)傳遞給一個(gè) URL（b.htm），跳轉(zhuǎn)到新的頁面 b.htm。

遇到的問題

因?yàn)橐婚_始是 GET 請(qǐng)求，所以當(dāng)傳遞的數(shù)據(jù)過大的時(shí)候，會(huì)報(bào)錯(cuò) nginx 414 request-uri too long

客戶端請(qǐng)求頭緩沖區(qū)大小，如果請(qǐng)求頭總長(zhǎng)度大于小于128k，則使用此緩沖區(qū)

client_header_buffer_size 128k;

請(qǐng)求頭總長(zhǎng)度大于128k時(shí)使用 large_client_header_buffers 設(shè)置的緩存區(qū)

large_client_header_buffers 指令參數(shù)4為個(gè)數(shù)，128k為大小，默認(rèn)是8k。申請(qǐng)4個(gè)128k。

large_client_header_buffers 4 128k;

當(dāng)http 的URI太長(zhǎng)或者request header過大時(shí)會(huì)報(bào)414 Request URI too large或400 bad request錯(cuò)誤

造成這樣的原因

cookie中寫入的值太大造成的，因?yàn)閔eader中的其他參數(shù)的size一般比較固定，只有cookie可能被寫入較大的數(shù)據(jù)

請(qǐng)求參數(shù)太長(zhǎng)，比如發(fā)布一個(gè)文章正文，用urlencode后，使用get方式傳到后臺(tái)

本次的故障原因是由問題 2 引起的。即當(dāng)請(qǐng)求頭過大時(shí)，超過 large_client_header_buffer 時(shí)，nginx可能返回 Request URI too large (414) 或者 Bad-request(400) 錯(cuò)誤。

當(dāng)Request line的長(zhǎng)度大于large_client_header_buffer的一個(gè)buffer(128k)時(shí)，nginx會(huì)返回"Request URI too large" (414)錯(cuò)誤，對(duì)應(yīng)上面的場(chǎng)景2。

請(qǐng)求頭中最長(zhǎng)的一行也要小于large_client_header_buffer，當(dāng)不是Request line的最長(zhǎng)行大于一個(gè)buffer(128k)時(shí)，會(huì)返回"Bad-request"(400)錯(cuò)誤，對(duì)應(yīng)上面的場(chǎng)景1。

臨時(shí)解決辦法

修改 nginx 參數(shù)

主要是調(diào)大以下參數(shù)值：

client_header_buffer_size 512k;
large_client_header_buffers 4 512k;

但是調(diào)大這個(gè)值會(huì)出現(xiàn)一個(gè)問題，當(dāng)我的服務(wù)器騰挪數(shù)據(jù)量比較大的時(shí)候，可能又要修改這樣不是一個(gè)辦法，最終的解決辦法就是由 GET 請(qǐng)求方式修改為 POST 請(qǐng)求方式

最終解決辦法

使用 jquery.redirect.js 框架來處理這樣的情況，主要使用到的函數(shù)是 $.redirect

代碼如下：

 $http({
    method: "POST",
    dataType: "json",
    contentType: 'application/json',
    url: url,
    data: data,
   }).success(function (data) {
    if (data.success) {
     crId = data.data;
     $scope.errMsg = "";
     var url = "/xx.htm?id=" + id;
     window.location.href = url
    } else {
     $scope.errMsg = data.message;
     $scope.isDisabled = false;
     $scope.errorCode = data.code;
     $scope.trv.physics = data.data;
     if(data.statusCode === -224){
      var vms = data.data;
      console.log("vms: " + vms);

      $.redirect('/b.htm', {'vms': vms.toString(), 'resource': trv.resource, 'errMsg': $scope.errMsg});
     }

    }
   }).error(function (data) {
    alert(data);
    $scope.isDisabled = false;
   });

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: