Question

我遇到的问题就像我点击按钮没有发生任何事情。我查看了Firebug控制台。它在我通过的第二个参数中抛出错误。

在第二个参数中，问题是一个字符串，因此它用单引号括起来，但从服务器端获得的值也有单引号（父亲的）所以（s中间名？'）不被JavaScript考虑抛出语法错误。我该如何避免这种情况？

源代码：

JSP页面代码：

<input type="button" id="btnSubmit" Value="Edit" onclick="return
       editSeqQuestion('<%=QuestionId%>','<%=Question%>','<%=QuestionDataType%>',
                       '<%=AudioPath%>','<%=securityQuestionType%>')" />

在浏览器中，查看页面来源：

代码如下：

<input type="button" id="btnSubmit" Value="Edit" onclick="return
       editSeqQuestion('72','what is your first child's nick name?',
       'Alpha Numeric','nickname.wav','SecurityQuestion')" />

错误：SyntaxError: missing ) after argument list

Firefox Error Console

Answer 1

处理此问题的正确方法是转义JSP文件中的HTML，并且还不显眼地绑定事件。数据库中的值可以放在data-*属性中。例如，您的HTML将类似于以下内容。将它包含在JSP的顶部：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

使用<c:out />会对特殊字符进行编码，以便正确输出为HTML，例如'，"和&（以及其他）。

然后将您的HTML更改为：

<input type="button" id="btnSubmit" value="Edit"
       data-question-id="<c:out value="${QuestionId}" />"
       data-question="<c:out value="${Question}" />"
       data-question-data-type="<c:out value="${QuestionDataType}" />"
       data-audio-path="<c:out value="${AudioPath}" />"
       data-security-question-type="<c:out value="${securityQuestionType}" />" />

你的JavaScript：

window.onload = function () {
    document.getElementById("btnSubmit").onclick = function () {
        var questionId = this.getAttribute("data-question-id"),
            question = this.getAttribute("data-question"),
            questionDataType = this.getAttribute("data-question-type"),
            audioPath = this.getAttribute("data-audio-path"),
            securityQuestionType = this.getAttribute("data-security-question-type");
        editSeqQuestion(questionId, question, questionDataType, audioPath, securityQuestionType);
    };
};

当然，使用addEventListener“更好”，而不是设置onload和onclick。所以你可以用这个：

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

然后绑定以下事件：

addEvent(window, "load", function () {
    addEvent(document.getElementById("btnSubmit"), "click", function () {
        // The code from above
    });
});

参考：

addEventListener：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Answer 2

是的，你有几个选择。两个是最明显的：

解决它的服务器端，让你的值从你的JSP已经被你的字符串替换为html实体'是最合乎逻辑的（然后你不用担心你的引用符号。
将它以一种方式或另一种方式抽象为js变量。将js变量传递给函数不需要转义引号（至少在传递时）。

第一种选择是在某些方面工作量最少。根据这应该是多少动态，您可以选择第二个选项。在这种情况下，我建议jsp在js中为你构建一个漂亮的对象或数组，然后你可以参考（我猜你有不止一个问题集）。让jsp在每个元素上设置一个唯一的id，然后让onclick通过相同的id表示法引用该数组，以根据需要使用对象/数组存储的值。更进一步，将您的函数绑定到元素，并遵循不引人注目的代码方法。

在短期内，您的网页最终可能会显示如下内容：

<script>
  aQs = [
   {v: 72, q: 'What is child&apos;s name', t: 'AN', s: 'nick.wav', title: 'Sec'},
   {v: 23, q: 'What city', t: 'AN', s: 'city.wav', title: 'Sec'}
  ];

  function edQ(qId) {
    dosomething(aQs[qId]);
  }
</script>

<input type="button" id="btn_0" Value="Edit" onclick="edQ(this.id.split('_')[1])" />
<input type="button" id="btn_1" Value="Edit" onclick="edQ(this.id.split('_')[1])" />

在任何一种情况下，我认为通常处理'的最简单/最安全的做法是用html实体替换服务器端。

Answer 3

我的建议是不要那样做;相反，调用包装函数。这样，你不必担心逃避任何事情。

<script type="text/javascript">
    function editSeqQuestion(...) {
        ...
    }

    function wrapperFunction() {
        editSeqQuestion('72','what is your first child\'s name?',
        'Alpha Numeric','fathersmiddlename.wav','SecurityQuestion');
    }
</script>

<input ... onclick="wrapperFunction();" />

Answer 4

您可以通过在反斜杠（\）前加上字符来转义字符。因此，任何反斜杠字符也必须进行转义（\\）。

var x = 'What is your child\'s nick name?';

如何在JavaScript变量中转义单引号

4 个答案: