[英]Escape/Special Characters from user input to HTML5 data-attributes using URL Encode/Decode
这是我关于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'\\”\\“显示为类型'\\”\\
然后,用户选择一个列表项。 我尝试使用数据属性,值等捕获typeName的许多方法。这是一个例子:
$( '.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选项值。
但是,经过大量研究后,如果您希望将值传递给具有转义/特殊字符的数据属性,我找到了一个很好的解决方案。 请在下面给我答案。
经过大量研究后,我找到了我正在寻找的解决方案。 如果你想在html5数据属性中使用转义/特殊字符,那么使用encodeURI()/ decodeURI()是一个很好的解决方案: http : //www.w3schools.com/jsref/jsref_decodeuri.asp
这个问题的解决方案:
编码url版本的值并设置select的值:
$.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调用。
不太确定真正了解整个问题。 无论如何,这是我指出的导致一些问题的因素。
当你像这样创建一个<option>
:
'<option class="type" id="' + this.qfInvoiceNum + '" value="' + this.typeName + '">' + this.typeName +'</option>'
然后this.typeName
用于填充value
属性和节点内容。
在后一种情况下,一切都很好,正如您所报告的那样,因为当前的typeName
内容在HTML视点中没有任何特殊之处。
但是在value
属性中,内容在引号内,并且在这里它也不能是中性的。
如果没有更深入的分析和测试,我不能严格肯定,但首先,非常简单,尝试根本不会填充value
属性,使用HTML功能从没有value
时从其节点内容透明地推断option
值给出。
这样,内容应该逃避写作value
的制定约束。 让我知道它是否有效......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.