0

ユーザーが情報を入力して送信できるWebフォームがあります。ユーザーがフォームで重複した id フィールドを送信した場合、フォームはそこにとどまり、エラー情報を表示する必要があります。ただし、現在、何らかのエラー情報が入力されると、ページは「HTTP ステータス 409 - 競合」を示すエラー ページにリダイレクトされます。私のフォームは次のとおりです。

<form action="/myapp/rest/customer/created" onsubmit="return checkForm();" method="POST">
    <table border="1">
        <tr>
            <td>Customer name:</td>
            <td><input type="text" id="name" name="name"></td>
        </tr>
        <tr>
            <td>Customer ID:</td>
            <td><input type="text" id="id" name="id"></td>
        </tr>
        <tr>
            <td>Customer DOB:</td>
            <td><input type="text" id="dob" name="dob"></td>
        </tr>
    </table>
    <br/>
    <input type="submit" value="Submit">
</form>
<div><span id="errorDiv" class="errorDiv" ></span></div>

JavaScript 関数checkForm()は次のとおりです。

function checkForm() {

    $.post("/myapp/rest/customer/created", function(data, status) {
    if (status === "200") {
        // redirect to destination
        return true;
    } else {
        //display error information in the current form page
        $("#errorDiv").html("<font color=red>ID already exists!</font>");
        return false;
    }
    });
}

バックエンド サービスは Java REST API であり、何らかのエラー情報が入力および送信された場合に例外をキャッチします。

@Path("/customer")
public class CustomerService {

    @Context UriInfo uriInfo;
    @Context HttpServletRequest request;
    @Context HttpServletResponse response;

    ApplicationContext context = new ClassPathXmlApplicationContext("beans.xml");
    CustomerJDBCTemplate dbController = (CustomerJDBCTemplate) context.getBean("customerJDBCTemplate");


    @POST
    @Consumes(MediaType.APPLICATION_FORM_URLENCODED)
    @Path("created")
    public Response createCustomer(@FormParam("id") int id,
            @FormParam("name") String name, @FormParam("dob") Date dob)
            throws ServletException, IOException, WebApplicationException {
        URI uri = URI.create(uriInfo.getPath());
        Response r;


        r = Response.created(uri).build();

        try {
            dbController.create(id, name, dob); //This may throw exception.

        request.setAttribute("name", name);
        request.setAttribute("dob", dob);
        request.setAttribute("id", Integer.valueOf(id));
        RequestDispatcher dispatcher = request.getRequestDispatcher("/confirm.jsp");
        dispatcher.forward(request, response);

        } catch (DataAccessException ex) {
            throw new WebApplicationException(409);
        }

        return r;
    }
}

では、ユーザーがエラー情報を送信すると、ページが常に「HTTP ステータス 409 - 競合」を示すエラー ページにリダイレクトされるのはなぜでしょうか? ここでajax フォームの検証checkForm()が機能しないのはなぜですか?

4

2 に答える 2

1

$.post(は非同期であり、あなたreturnの s は効果がないためです。フォームは常にサーバーに送信され、行throw new WebApplicationException(409);はエラー コード応答を引き起こします。

アップデート：

@WouterHの提案はうまくいくはずです。適切なタイミングでアラートが表示されるようにします。

function checkForm() {
    $.post("/myapp/rest/customer/created", function(data, status) {
      if (status === "200") {
        alert("post success");
        // redirect to destination
      } else {
        alert("post error");
        //display error information in the current form page
        $("#errorDiv").html("<font color=red>ID already exists!</font>");
      }
    });
    alert("form posted");
    return false;
}

更新 2:

function checkForm() {
    $.post("/myapp/rest/customer/created", function(data, status) {
      alert("post handler, status=" + status); 
    });
    alert("form posted");
    return false;
}
于 2013-06-14T14:47:56.523 に答える
1

あなたの checkForm メソッドは非同期です。というか、非同期関数 $.post を使用します。$.post は AJAX を利用し、AJAX は非同期 Javascript And XML の略です。これが意味することは、関数がタスクを完了してコールバックを呼び出す前に、すぐに ($.post) を返すということです。

AJAX を使用して送信しているため、フォームの送信を常にブロックする必要があります。これを行うには、$.post に提供されるコールバック内ではなく、checkForm 内で false を返します。

例えば：

function checkForm() {
    $.post("/myapp/rest/customer/created", function(data, status) {
        if (status === "200") {
            // redirect to destination
        } else {
            //display error information in the current form page
            $("#errorDiv").html("<font color=red>ID already exists!</font>");
        }
    });
    return false;
}
于 2013-06-14T14:48:16.027 に答える