0

私はajaxが初めてです。要件はかなり単純です。送信ボタンが押されると、JavaScript は非同期要求を実行し、サーバー側がユーザー入力を検証します。入力に問題がなければ、フォームは標準の送信を行いますが、それ以外の場合はエラー メッセージが表示されます。

だから、ここに私のフォームがあります：

<form id="form" action="dosomething.jsp" method="post">
  <input type="text" name="name">
  <input type="text" name="email">
<input id="submit" type="submit" value="Go">
</form>

ここに私のJavaScriptがあります:

$(document).ready(function() {
    $("#form").submit(function(event) { 
        event.preventDefault();
        var form = $(this);
        var button =  $("#submit");
        button.attr("disabled", "disabled");
        $.ajax({
            url: "ValidateServlet",
            type: "post",
            data: form.serialize(),
            success: function(msg) {
                if(msg== ""){
                    form.unbind("submit");
                    form.submit();
                } else{
                alert(msg);
                button.removeAttr("disabled");
                }
            }
        });
    });
});

1 つの機能が動作しないことを除いて、コードは正常にform.submit();動作します。ajax()関数の外でこれを試してみると、送信されるので、スコープに問題があると思いますが、修正できません。

を明確にさせてくださいform.unbind();。の行を削除したとしましょう。つまり、成功した場合にform.submit();のみ存在します。初めて送信ボタンを押すと、フォームは非同期リクエストを実行して、通常どおり検証します。入力が正しい場合 (つまり、送信ボタンをもう一度押すと、送信イベントのバインドが解除されているため、標準の送信が実行されます)。したがって、少なくとも私の懸念では、問題はそれにはありません。form.unbind();(if(msg = ""))msg = ""form.unbind();

サーブレット コード:

public void doPost(HttpServletRequest request,HttpServletResponse response) 
            throws ServletException, IOException{
    PrintWriter out = response.getWriter();
    String msg = "";
    String name = request.getParameter("name");
    String email = request.getParameter("email");
    if("".equals(name)){
        msg += "<li>Please enter name</li>" ;
    }
    if("".equals(email)){
        msg += "<li>Please enter email</li>" ;
    }
    if(title.length() > 20 ){
        msg += "<li>Name should be lesser than 20 character.</li>" ;
    }
    if(email.length() > 30){
        msg += "<li>Title should be lesser than 30 character.</li>" ;
    }
    if(! "".equals(msg)){
        msg = "<p>Error :</p><ul>" + msg;
        msg += "</ul>";
        out.print(msg);
    } 
    out.close();
}
4

1 に答える 1

1

$.on() と $.off() を使用してイベントをバインドしようとしましたか?

何かのようなもの

$(document).ready(function() {
    $("#form").on('submit',function(event) { 
        event.preventDefault();
        var frm = $(this);
        var btn =  $("#submit");
        button.attr("disabled", "disabled");
        $.ajax({
            url: "ValidateServlet",
            type: "post",
            data: frm.serialize(),
            success: function(msg) {
                if(msg== ""){
                    frm.off("submit");
                    frm[0].submit();
                } else{
                alert(msg);
                btn.removeAttr("disabled");
                }
            }
        });
    });
});

また、変数名として「form」を使用しないようにしています

于 2013-03-21T04:26:02.243 に答える