Question

我正在注册表单上触发ajax调用，其中我正在检查用户输入的电子邮件ID是否已被使用。 Ajax功能：

Jade:8
    6|       script(type='text/javascript', src='/assets/js/app.js')
    7|      {{ vm.massage }}
  > 8|      ul
    9|      li(ng-repeat='person in vm.person')
    10|      {{person.name}}

unexpected token "indent"

在上面的ajax函数中，如果响应为true，那么电子邮件ID已被使用，我需要显示一个错误div（$（＆＃39; #emaililerrorbecome＆＃39;）。slideUp（）;）和然后阻止表单提交。但即使event.preventDefault（）也无效，导致emaild id再次注册。请帮我解决一下这个。 TIA

Answer 1

您应该以编程方式提交表单，并始终阻止jq提交处理程序中的默认行为。例如，使用上下文并调用submit() DOM API方法：

$("#becomesignup").submit(function(event) {
    event.preventDefault(); /* prevent form submiting here */
    $.ajax({
        context: this, /* setting context for ajax callbacks*/
        url: 'login', // Your Servlet mapping or JSP(not suggested)
        data: {
            "email": $("#becomeemail").val()
        },
        type: 'GET',
        dataType: 'html', // Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
        success: function(response) {
            if (response == "true") {
                $('#emailerrorbecome').slideDown();
                $('#become-submit').prop('disabled', true);  
                $('.black-screen').hide(); /* hide it here */
            } else {
                $('#emailerrorbecome').slideUp();
                $('#become-submit').prop('disabled', false);
                this.submit(); /* 'this' refers to the FORM, and calling submit() DOM native method doesn't fire again jq handler */
            }
        },
        error: function(request, textStatus, errorThrown) {
            alert(errorThrown);

        }
    });
});

有关为什么的说明，请参阅Quentin's answer

Answer 2

submit函数返回后，您无法阻止submit。 Ajax结果发生得晚得多。

您可以改为标记提交（例如使用sentinel变量）并取消它，除非允许。然后从Ajax回调中的代码触发submit。

实施例

var allowSubmit = false; $( "#becomesignup" ).submit(function( event ) { if (!allowSubmit){ $.ajax({ url : 'login', // Your Servlet mapping or JSP(not suggested) data : {"email":$("#becomeemail").val()}, type : 'GET', dataType : 'html', // Returns HTML as plain text; included script tags are evaluated when inserted in the DOM. success : function(response) { if(response == "true"){ $('#emailerrorbecome').slideDown(); $('#become-submit').prop('disabled', true); // Enable next submit to proceed allowSubmit = true; // And trigger a submit $( "#becomesignup" ).submit(); }else{ $('#emailerrorbecome').slideUp(); $('#become-submit').prop('disabled', false); } $('.black-screen').hide(); }, error : function(request, textStatus, errorThrown) { alert(errorThrown); } }); } // return false does e.preventDefault(), and true allows it to proceed return allowSubmit; });

Answer 3

您正在致电preventDefault迟到。

执行顺序是：

事件处理程序触发
发送HTTP请求
事件处理程序完成
未调用Prevent Default，因此出现默认行为
收到HTTP响应
成功处理程序触发
防止默认被调用...为时已晚，无法生效

在阻止默认行为之前，您无法等待HTTP响应返回。

您需要始终阻止默认行为，然后在提交处理程序中使用JS有条件地重新提交表单，或者在使用Ajax执行测试时移动逻辑，这样它就不会出现问题。 ; t首先取决于表单提交事件（例如，一旦输入数据就运行它，并准备好在JS运行完毕之前表单可能被提交）。

event.preventDefault（）;不在ajax工作

3 个答案:

实施例