1

我遇到了一个问题，比如如果我点击按钮什么都没有发生。我查看了Firebug控制台。它在我传递的第二个参数中引发错误。

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

源代码：

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 错误控制台

4

4 回答 4

2

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

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

Using<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, 而不是设置onloadand是“更好的” 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
    });
});

参考：

于 2013-06-05T04:05:57.667 回答
0

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

  1. 在服务器端处理它，并让您的价值从您的 JSP 进入您的页面，该字符串已替换为 html 实体 ' 是最合乎逻辑的（然后您不必担心引用符号。
  2. 以一种或另一种方式将其抽象为 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 实体。

于 2013-06-05T04:12:37.880 回答
-1

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

<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();" />
于 2013-06-05T03:38:30.390 回答
-2

您可以通过在字符前面加上反斜杠 (\) 来转义字符。因此，任何反斜杠字符也必须转义 (\\)。

var x = 'What is your child\'s nick name?';
于 2013-06-05T03:38:03.950 回答