Question

我有一个jQuery表单，在验证后将数据发送到我的服务器。服务器发送响应，然后我的站点处理返回的信息。这是有问题的javascript：

$("#signup").on('submit', function(e){
          var isvalidate = $("#signup").valid();
          if(isvalidate)
          {
            var json =  $('#signup').serialize();

            var theEmail = $('#signup #inputEmail').val();

            //Hide step 1 modal
            $('#stepOneSignup').modal('hide');

            //Open processing modal
            $('#processingModal').modal();

            $.post('http://localhost:5000/agm/saveNewUser/', json, function( data ) {
              alert('returned some data');
              if(data === "Success"){
                //Hide processing modal
                $('#processingModal').modal('hide');

              }else if(data === "UserExists"){
                $('#processingModal').modal('hide');
                $('#duplicateEmail').modal();
              }
            });
          }else{
            return false;
          }
      });

我可以在我的服务器日志中看到$.post(http://localhost...)发布得很好。我的服务器正在处理表单信息（需要几秒钟）但在它有机会发送响应之前我的表单将我的浏览器重定向到：

http://localhost:8888/?firtName=whateverinfoIputintheform&lastName=yeahyeahyeah

我从未得到alert('returned some data');。

知道这里发生了什么吗？

Answer 1

我认为你的ajax调用是异步的。尝试做一些链接这个：用这个替换你的ajax调用：

$.ajax({
  type: "POST",
  url: 'http://localhost:5000/agm/saveNewUser/',
  data: json,
  dataType: 'text',
  async: 'false',
  success: function(){
    alert('returned some data');
              if(data === "Success"){
                //Hide processing modal
                $('#processingModal').modal('hide');

              }else if(data === "UserExists"){
                $('#processingModal').modal('hide');
                $('#duplicateEmail').modal();
              }
  }

});

然后

return true;

Answer 2

$.post()是一种ajax方法。浏览器不会等待响应，并将继续工作，就好像从未发出过服务器请求一样。

Answer 3

在任何情况下，您都应return false阻止默认回发后：

$("#signup").on('submit', function(e){
    var isvalidate = $("#signup").valid();
    if(isvalidate)
    {
        ...
    }
    return false;
});

它导致ajax发布请求但无法处理它的响应，因为默认的回发原因是在收到ajax发布的响应之前。

Answer 4

  $.post('http://localhost:5000/agm/saveNewUser/', json, function( data ) {
        ...
    }).done(function(){
         return true;
    });

jQuery表单提交返回false而不是等待服务器响应

4 个答案: