Escape/Special 使用 URL Encode/Decode 从用户输入到 HTML5 数据属性的字符

Question

这是我关于 Whosebug 的第一个问题 - 需要各位专家的帮助。我们的网络应用程序允许用户输入 escape/special 个字符。我们正在对极端情况进行一些测试。我可以通过 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>

我的后端开发人员使用 escape/special 个字符来完成他们的工作。当我再打一个电话时，我得到以下 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);

});

它正确显示所有 escape/special 个字符。例如："type'\"\" 显示为类型'\"\

用户然后 selects 列表项之一。我已经尝试通过数据属性、值等多种方式捕获 typeName。这是一个示例：

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

但这就是问题所在。如果他们 select 一个包含 special/escape 个字符的列表项，则来自控制台的值 returns

"type'"

没有

"type'\"\"

所以当我为 JSON/AJAX 调用传入 var typeGrab 时，当然是错误的。

关于如何从下拉列表中获取 escape/special 个字符，是否有好的解决方案？或者当我遍历数据时 $.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 的值包含 escape/special 个字符，则提供的解决方案不起作用。我无法使用数据属性或 html 选项值。

但是，经过大量研究，如果您希望将值传递给具有 escape/special 个字符的数据属性，我找到了解决此问题的好方法。请在下面回答我。

Answer 1

不确定是否真正理解了整个问题。无论如何，这就是我指出的强制导致一些问题的原因。

当您创建一个像这样的 <option> 时：

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

然后 this.typeName 用于填充 value 属性和节点内容。

在后一种情况下一切都很好，正如您所报告的，因为当前的 typeName 内容在 HTML 的观点上没有什么特别之处。

但是在value属性中，内容在引号内，这里也不能是中性的。

如果不进行更深入的分析和测试，我不能完全肯定，但第一个非常简单的尝试是根本不填充 value 属性，使用 HTML 功能来当没有给出 value 时，透明地从其节点内容推断 option 值。

这样一来，内容就可以摆脱书面形式的束缚value。让我知道它是否有效...

Answer 2

经过大量研究，我找到了我正在寻找的解决方案。如果你想在 html5 数据属性中使用 escape/special 个字符，那么一个很好的解决方案是使用 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);
    });

在 select 上，抓取编码的 uri，然后解码 uri

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

typeGrab 现在具有所有 escape/special 字符的正确格式，并准备传递给 JSON.stringify() 以进行 ajax 调用。

Escape/Special 使用 URL Encode/Decode 从用户输入到 HTML5 数据属性的字符

Escape/Special Characters from user input to HTML5 data-attributes using URL Encode/Decode

javascript

jquery

ajax

json

custom-data-attribute