我有一个使用jquery和servlet的简单表单。jQuery对Servlet进行Ajax调用,然后Servlet进行一些服务器端计算,然后通过jQuery在同一页面上显示结果。我不希望表单进行默认的提交(并转到servlet),因为我想停留在同一页面上并动态显示结果。它完全按照我想要的方式工作:
HTML:
<form name="form1" action="FormHandler1" method="POST" class="stats-form"> <input class="stats-input" id="number0" type="text" name="number0"> <input id="number1" type="text" name="number1"> <input id="number2" type="text" name="number2"> <input id="number3" type="text" name="number3"> <input type="submit" value="Calculate" class="calculate-stats" name="stats-submit"> </form>
jQuery的:
form.submit (function(event) { $.ajax({ type: form.attr("method"), // use method specified in form attributes url: form.attr("action"), // use action specified in form attributes (servlet) data: form.serialize(), // encodes set of form elements as string for submission success: function(data) { // get response form servlet and display on page via jquery } }); event.preventDefault(); // stop form from redirecting to java servlet page });
现在,我想添加表单验证,因为该servlet期望十进制数来进行计算。应该只允许用户输入数字,不能输入其他字符。为此,我采用了流行的jQuery Validation插件。
验证工作正常,但是要对servlet进行ajax调用,我必须使用jQuery Validation提供的SubmitHandler,而不是上面显示的jQuery Submit方法。当我使用验证submitHandler时,将执行表单上提交的默认操作,转到Servlet页面,而不是停留在同一页面上以在jQuery中动态显示我的结果。我必须向formHandler传递一个表单,而不是像以前那样传递一个事件,这使我能够阻止默认操作。唯一的选择是返回false,但是它不起作用。在过去的两天里,我一直在努力解决这个问题,并且已经使我的google- fu筋疲力尽了。这是给我悲伤的新代码:
form.validate({ rules: { number0: ruleSet, number1: ruleSet, number2: ruleSet, number3: ruleSet, }, submitHandler: function (form) { $.ajax({ type: "POST", url: form.attr("action"), data: form.serialize(), success: function () { // get response from servlet and display on page via jQuery } }); return false; // required to block normal submit ajax used } });
任何帮助将不胜感激,我想使用这种整洁的jQuery表单验证,但我可能只是从头开始编写自己的jQuery验证,以便可以使用已经使用的表单提交方法。
到提交事件触发时,为时已晚,无法阻止表单提交。您应该绑定到提交按钮上的click事件,并使用event.preventDefault()阻止其提交。如果验证例程成功完成,则可以使用$ .serialize()和$ .submit()手动提交表单。