使用URL從用戶輸入到HTML5數據屬性的特殊字符編碼/解碼

這是我在stackoverflow上的第一個問題 - 需要所有專家的幫助。我們的網絡應用程序允許用戶輸入轉義/特殊字符。我們正在對極端情況進行一些測試。我可以通過ajax/json傳遞轉義字符。使用URL從用戶輸入到HTML5數據屬性的特殊字符編碼/解碼

var test = JSON.stringify({ 
 
    typeName: $("#typeName").val(), 
 
    invoiceType: 'NewTypeArea' 
 
}); 
 
$.ajax({ 
 
    type: "POST", 
 
    url: "BackEnd/WebService.php", 
 
    data: { 
 
    newInvoice: test 
 
    }, 
 
    dataType: 'json' 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

我的後端開發者他們與逃生/特殊字符的事情。當我撥打另一個電話，我得到以下JSON數據

[{"propName":"Special '\"'\\","typeName":"type'\"\\"}]

該數據返回是正確的。爲了簡單起見 - 本例中只有一個對象 - 我將這些數據放入下拉列表中。

$.each(data, function(i, val) { 
var output = '<option class="type" id="' + this.qfInvoiceNum + '" value="' + this.typeName + '">' + this.typeName +'</option>'; 
$('select#typeList').append(output);

}）;

它正確顯示所有的轉義/特殊字符。例如，「類型‘\‘\’顯示爲類型’\」 \

然後，用戶選擇列表中的項目之一。我試着捕捉類型名數據屬性值等。以下是一個例子多種方式：

$('.selectChange1').change(function() { 
typeGrab = $('select option.type:selected').val(); 
pullArea(); 
});

但是，這是哪裏出了問題進來如果他們選擇特殊列表項/轉義字符從控制檯的值返回

"type'"

不

"type'\"\\"

所以當然當我通過在var typeGrab的JSON/AJAX調用它是錯誤的。

關於如何從下拉菜單中獲取轉義/特殊字符，是否有很好的解決方案？或者，當我循環訪問數據時，我可能會遇到$ .each錯誤？或者，很可能，我錯過了一些非常簡單的事情。任何幫助或見解都會很棒。

謝謝。

附加信息。第一個解決方案確實有效。但是，我最初並沒有使用這個功能，因爲有幾次顯示的文本不是我想要抓取的 - 這就是爲什麼我正在嘗試數據* -attributes的原因。

例如：

$.each(data, function(i, val) { 
var output = '<option id="' + this.qfInvoiceNum + '" class="type" data-index="' + this.typeName + '" >' + this.typeName +' | #' + this.qfInvoiceNum +'</option>'; 
$('select#typeList').append(output); 
});

如果我想this.typeName與逃逸值/特殊字符所提供的解決方案是行不通的。我無法使用數據屬性或html選項值。

然而，大量的研究後，我發現這個問題的最佳解決方案，如果你正在尋找的值有逃生/特殊字符數據的屬性來傳遞。請在下面回答。

來源

2015-05-05 CreatordotJS

大量的研究後，我發現我一直在尋找的解決方案。如果你想使用轉義/ HTML5中的數據屬性不是一個很好的解決方案特殊字符可使用是encodeURI（）/ decodeURI（）：http://www.w3schools.com/jsref/jsref_decodeuri.asp

解決這個問題：

的編碼值的網址版本並設定值選擇：

$.each(data, function(i, val) { 
    var uri = val.typeName; 
    var res = encodeURI(uri); 
    var output = '<option id="' + this.qfInvoiceNum + '" class="type" data-name="' + res + '" >' + this.typeName +' | #' + this.qfInvoiceNum +'</option>'; 
    $('select#typeList').append(output); 
    });

在選擇，抓住編碼的URI，然後解碼URI

$('.selectChange2').change(function() { 
    uriTypeGrab = $('select option.type:selected').data('name'); 
    typeGrab = decodeURI(uriTypeGrab); 
});

typeGrab現在在科爾ect格式與所有的轉義/特殊字符，並準備傳遞給JSON.stringify（）進行ajax調用。

來源

2015-05-06 17:29:37 CreatordotJS

不太確定是否真的明白了整個問題。無論如何，這就是我指出的一些問題。

當你創建一個<option>像這樣的：

'<option class="type" id="' + this.qfInvoiceNum + '" value="' + this.typeName + '">' + this.typeName +'</option>'

然後this.typeName用於填充既value屬性和節點的內容。

在後一種情況下，一切都很好，因爲你的報道，因爲目前typeName內容有沒有什麼特別在這裏，在視圖中的HTML點。

但在value屬性，內容雲引號內，在這裏它不能中性爲好。

沒有更深入的分析和測試我不能嚴格肯定，但首先，很簡單，嘗試不會填充value屬性，使用HTML功能從節點內容中透明地推斷出option值沒有給出value。

這種方式，內容應該逃避制定的制約書面value。讓我知道，如果它的工作...

來源

2015-05-05 19:35:40 cFreed

是的，這個工作！非常感謝你。我感謝您的幫助。 – CreatordotJS

我找到了我正在尋找的解決方案。我更新了我的問題的底部並在下面回答。我非常感謝你的幫助，因爲它澄清了我正在努力完成的任務。謝謝！ @cFreed – CreatordotJS

是的！恭喜：確定這種新方式是真正的好方法。感謝您的反饋意見，並花時間在自己的答案中清楚地展示最終解決方案：這對任何其他讀者來說都是一個有價值的解釋。 – cFreed

使用URL從用戶輸入到HTML5數據屬性的特殊字符編碼/解碼

回答

相關問題