2017-01-18 27 views
0

我嘗試製作提交請求並在頁面中發佈結果的表單。我有請求正文,網址和標題的輸入。但我有一個問題與標題。我不知道如何將字符串轉換:將字符串從textarea轉換爲請求標頭

Content-Type : application/x-www-form-urlencoded 

{"Content-Type" : "application/x-www-form-urlencoded"} 

動態。在我的textarea我可能已經3-4聽衆分裂一個逗號,所以如何將這些報頭轉換成將被此函數所接受的結構:

function makePostRequest(url, data, headers, httpVerb, dataType, elementId){ 
    alert(headers); 
    $.ajax({ 
    url: url, 
    type: httpVerb, 
    data: data, 
    headers: {headers}, 
    dataType: dataType, 
    success: function (data, textStatus, jqXHR) { 
     $("#div").val(jqXHR.responseText); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { $("#div").val(jqXHR.responseText); } 
    }); 
} 

我的textarea元素會含有類似標題:

header1 : content1, header2 : content2 

回答

1

在這裏,基本上它是split()和trim()的組合。這裏有一個例子:

$(function() { 
 
    $('button').on('click', function (e) { 
 
    var headers = {} 
 
    var values = $('#foo').val() 
 
    
 
    // split the headers by comma 
 
    var parts = values.split(',') 
 
    
 
    // iterate over each group 
 
    $.each(parts, function() { 
 
     // split by : and trim additional whitespace 
 
     var innerParts = this.split(':').map(function (item) { 
 
     return item.trim() 
 
     }) 
 
     
 
     // add the given results to the headers object 
 
     headers[innerParts[0]] = innerParts[1] 
 
    }) 
 
    
 
    console.log(headers) 
 
    }) 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<textarea id="foo" rows="5" cols="50"></textarea> 
 
<br> 
 
<button>click me</button>

+0

是的,我想要這樣的東西,但在我的請求中使用它,如果我使用:headers:JSON.stringify(headers)或headers:headers,我在我的文本區域中的標題是忽略,只做預檢請求(使用選項http動詞) –

+0

不要將標題串化,它應該是一個對象 – motanelu

+0

nope,仍然是相同的。但我會進一步研究。您提供的功能正在工作,所以我會將答案標記爲已接受。謝謝 –

0

如果我已經理解了,在執行$ ajax請求之前,您可以自己獲取頭文件並解析它以創建一個像您想要的那樣的字符串。當你有多個時,你可以使用正則表達式來分割標題。

+0

我也能寫僞代碼,但我沒有與javascjript經驗,這就是爲什麼我問 –

+0

你的var頭是一個assoc數組嗎? –

+0

我不知道它應該是什麼......現在我已經硬編碼了一個值,但是我沒有JavaScript類型的經驗,所以我無法回答你的問題。我需要的是一個函數,可以將字符串轉換爲可變的字符串,以便我可以將它放入請求中,如您在源代碼 –

0

這不是真正的頭,這僅僅是字符串操作: 你需要把

"header1 : content1, header2 : content2" 

{"header1": "content1", "header2": "content2"} 

通過與,字符分割的第一個字符串,然後分割所有與:的子串應該沒問題。

+0

中看到的那樣,我也可以編寫僞代碼,但是我沒有javascjript的使用經驗,這就是爲什麼我問 –

0

難道這樣的事情對你的工作? 它基本上期望在新的一行中輸入每個頭:

function getHeaders() { 
 
    var headers = $('#headers').val(); 
 
    var lines = headers.split('\n'); 
 
    var headers = {}; 
 
    for (var i = 0; i < lines.length; i++) { 
 
    
 
    var line = lines[i]; 
 
    var parts = line.split(':'); 
 
    var key = parts[0]; 
 
    var value = parts[1]; 
 
    if (key && value) { 
 
     headers[key.trim()] = value.trim(); 
 
    } 
 
    } 
 
    return headers 
 
} 
 

 
$('button').click(function(){ 
 
    var headersObject = getHeaders(); 
 
    console.log(headersObject); 
 
})
#headers { 
 
    height: 200px; 
 
    width: 300px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="headers"> 
 
Content-Type : application/x-www-form-urlencoded 
 
Header2 : Value 
 
</textarea> 
 
<button>Get Headers Object</button>