Ajax表单重新加载页面，而不是在后台工作

首先，基于其他建议，我尝试过移动preventDefault（），但没有成功。Ajax表单重新加载页面，而不是在后台工作

我的反馈表单使用这个JavaScript来传递表单字段“process.php”，并与相关的消息返回（即：“sucesss”或“失败”）

它在做什么，除了自己的工作，而不是停留在同一页 'feedback.php' IT负载 'process.php' 页面，这对... { “数据”： “数据值”}

继承人的代码：

$(document).ready(
function(){ 
    $('form').submit(
     function(event){ 
      var formData = 
      { 
       'name' : $('input[name=name]').val(), 
       'page' : $('input[name=page]').val() 
      }; 

      $('.form-group').removeClass('has-error'); // remove the error class 
      $('.error').remove(); // remove the error text 

      event.preventDefault(); 

      $.ajax({ 
        type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
        url  : 'process.php', // the url where we want to POST 
        data  : formData, // our data object 
        dataType : 'json', // what type of data do we expect back from the server 
        encode : true 
       }) 

      .done(function(data){ 
        if (! data.success) 
        { 
         if (data.errors.name) 
         { 
          $('#name-group').addClass('has-error'); // add the error class to show red input 
          $('#nameField').append(data.errors.name); // add the actual error name under our input 
         } 
        } 
        else 
        { 
         $('form').append('<div class="buttonError">Message Sent!</div>'); 
         form.myButton.disabled = true; 
        } 
       } 
      ); 

      .fail(function(data){ 
        $('form').append('<div class="buttonError">Failed!</div>'); 
       } 
       console.log(data); 
      ); 
      event.preventDefault(); 
     } 
    ); 
});

来源

2016-10-05 user6852183

检查浏览器的控制台中是否存在错误。您可能需要启用*“保留日志”*（或您的浏览器的等效功能）以在页面导航后保留任何消息 – Phil

请发布您的表单html – snit80

看起来像'.fail'周围的语法错误。在** console.log下面移动结束'}'**。 **投票关闭作为错字** – Phil

-1

删除方法并在HTML文件的表单标签中执行操作。这看起来很好。让我知道如果它不起作用。

来源

2016-10-05 03:15:11 borngeek

这不是解决问题。事实上，它甚至不会工作，因为它只是将表单转换为对当前页面发出的“GET”请求。 OP需要修复他们的JS错误 – Phil

@Phil他们应该使用控制台来做那件事情。 – borngeek

[没有开玩笑]（http://stackoverflow.com/questions/39864824/ajax-form-reloading-page-instead-of-working-in-the-background/39864868?noredirect=1#comment67017520_39864824） – Phil

看起来像调用$阿贾克斯语法错误，应该这样来修正：

$.ajax({ 
     type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
     url  : 'process.php', // the url where we want to POST 
     data  : formData, // our data object 
     dataType : 'json', // what type of data do we expect back from the server 
     encode : true 
    }).done(function(data){ 
     if (! data.success) 
     { 
      if (data.errors.name) 
      { 
       $('#name-group').addClass('has-error'); // add the error class to show red input 
       $('#nameField').append(data.errors.name); // add the actual error name under our input 
      } 
     } 
     else 
     { 
      $('form').append('<div class="buttonError">Message Sent!</div>'); 
      form.myButton.disabled = true; 
     } 
    }).fail(function(data){ 
     $('form').append('<div class="buttonError">Failed!</div>'); 
     console.log(data); 
    });

来源

2016-10-05 07:59:50

Ajax表单重新加载页面，而不是在后台工作

回答

相关问题