这是我关于 stackoverflow 的第一个问题 - 需要各位专家的帮助。我们的网络应用程序允许用户输入转义/特殊字符。我们正在对极端情况进行一些测试。我能够通过 ajax/json 传递转义字符。
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);
});
它正确显示所有转义/特殊字符。例如:"type'\"\"显示为 type'\"\
然后用户选择列表项之一。我已经尝试使用数据属性、值等多种方式捕获 typeName。这是一个示例:
$( '.selectChange1').change(function() {
typeGrab = $('select option.type:selected').val();
pullArea();
});
但这就是问题所在。如果他们选择带有特殊/转义字符的列表项,则控制台返回的值
"type'"
不是
"type'\"\\"
当然,当我为 JSON/AJAX 调用传入 var typeGrab 时,这是错误的。
是否有关于如何从下拉列表中获取转义/特殊字符的良好解决方案?或者当我遍历数据时 $.each 出错了?或者,很可能,我遗漏了一些非常简单的东西。任何帮助或见解都会很棒。
谢谢。
附加信息。第一个解决方案确实有效。然而,我最初并没有使用它,因为有几次显示的文本不是我想要抓取的 - 这就是我尝试数据*属性的原因。
例如:
$.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 选项值。
但是,经过大量研究,如果您希望将值传递给具有转义/特殊字符的数据属性,我找到了解决此问题的好方法。请在下面回答我。
最佳答案
经过大量研究,我找到了我正在寻找的解决方案。如果您想在 html5 数据属性中使用转义/特殊字符,那么一个很好的解决方案是使用 encodeURI()/decodeURI():http://www.w3schools.com/jsref/jsref_decodeuri.asp
本题解答:
值的编码 url 版本并为选择设置值:
$.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 现在具有所有转义/特殊字符的正确格式,并准备好传递给 JSON.stringify() 以进行 ajax 调用。
关于javascript - 使用 URL 编码/解码从用户输入到 HTML5 数据属性的转义/特殊字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30060514/