1

ボタンをクリックしても何も起こらないなどの問題に直面しています。Firebugコンソールを調べました。渡した 2 番目の引数でエラーがスローされます。

2番目の引数は質問が文字列なのでシングルクォーテーションで囲んでいますが、サーバー側から取得した値もシングルクォーテーションで囲んでいるので(父の)、(s middle name?')は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 エラーコンソール

4

4 に答える 4

2

これを処理する正しい方法は、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です。したがって、これを使用できます：onloadonclick

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

はい、いくつかのオプションがあります。次の 2 つが最も明白です。

  1. サーバー側に取り組み、JSP から値をページに挿入します。文字列は、最も論理的な html エンティティに置き換えられます (その後、引用表記について心配する必要はありません。
  2. いずれかの方法で js 変数に抽象化します。js 変数を関数に渡すと、(少なくとも渡すときに) 引用符をエスケープする必要がなくなります。

最初のオプションは、いくつかの点で最小の作業量です。これがどの程度動的であるかによっては、2 番目のオプションを選択することもできます。その場合、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 に答える