Сценарий формы AJAX не выполнен

Я хочу использовать форму через AJAX, поэтому я получил этот фрагмент кода из другого сообщения в stackoverflow. Это не сработало, поэтому я добавил предупреждение для проверки, даже если скрипт выполнен. Это, похоже, не так, и мне интересно, почему.Сценарий формы AJAX не выполнен

<head> 
    <script src='jquery.js'></script> 
    <script> 
    var request; 

    $("#foo").submit(function(event){ 

     alert("Hallu"); 

     if (request) { 
      request.abort(); 
     } 

     var $form = $(this); 

     var $inputs = $form.find("input, textarea"); 

     var serializedData = $form.serialize(); 

     $inputs.prop("disabled", true); 

     request = $.ajax({ 
      url: "/action.php", 
      type: "post", 
      data: serializedData 
     }); 

     request.done(function (response, textStatus, jqXHR){ 
      // Log a message to the console 
      console.log("Hooray, it worked!"); 
     }); 

     request.fail(function (jqXHR, textStatus, errorThrown){ 
      // Log the error to the console 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     request.always(function() { 
      // Reenable the inputs 
      $inputs.prop("disabled", false); 
     }); 

     event.preventDefault(); 
    }); 


    </script> 
</head> 
<body> 
    <form id="foo"> 
     <input type="text" id="name" name="name" /> 
     <textarea id="msg" name="msg"></textarea> 
     <input type="submit" value="Senden" /> 
    </form> 
</body>

источник

2014-12-07 Simon Mathewson

проверьте консоль и найдите ошибки, которые вы получаете? –

Одним из недостатков jQuery является то, что он не будет вызывать ошибку при попытке привязать обработчики событий к пустому объекту jQuery. – Quentin

Причина очень проста. Вы делаете что-то до $('#foo'), прежде чем оно будет загружено. На данный момент JS ничего не знает об объекте с id = "foo", потому что он еще не загружен.

Оберните весь код в $(document).ready(function() { ... });.

Это должно выглядеть следующим образом:

var request; 

$(document).ready(function() { 

    $("#foo").submit(function(event){ 

     alert("Hallu"); 

     if (request) { 
      request.abort(); 
     } 

     var $form = $(this); 

     var $inputs = $form.find("input, textarea"); 

     var serializedData = $form.serialize(); 

     $inputs.prop("disabled", true); 

     request = $.ajax({ 
      url: "/action.php", 
      type: "post", 
      data: serializedData 
     }); 

     request.done(function (response, textStatus, jqXHR){ 
      // Log a message to the console 
      console.log("Hooray, it worked!"); 
     }); 

     request.fail(function (jqXHR, textStatus, errorThrown){ 
      // Log the error to the console 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     request.always(function() { 
      // Reenable the inputs 
      $inputs.prop("disabled", false); 
     }); 

     event.preventDefault(); 
    }); 
});

Пожалуйста, обратите внимание, используя хороший IDE, как NetBeans или Eclipse. Это поможет вам обнаружить незамкнутые скобки и другие вещи.

источник

2014-12-07 18:41:10

Я сделал это, и теперь консоль говорит «Неожиданный конец ввода» –

Я забыл закрыть последнюю скобку. Добавьте ')'. Я редактировал свой пост. –

Хорошо, спасибо. Тем не менее, есть непредвиденная ошибка. Вероятно, это вызвано самим скриптом. –

При выполнении сценария, #foo не существует, так что нет ничего, чтобы связать правша события к.

Переместите сценарий так, чтобы он появился после формы или преобразовал его в функцию и связал его как обработчик события ready или load.

источник

2014-12-07 18:40:42 Quentin

поместите html над скриптом и запретите команду по умолчанию в начале функции. –

Нет необходимости переместить вызов preventDefault. – Quentin

Сценарий формы AJAX не выполнен

ответ

Смежные вопросы