2015-08-25 8 views
0

Я создал функцию javascript в html-файле, и в ajax-успехе будут передаваться данные. Но консоль не отображается, и в консоли не обнаружена ошибка.Почему функция javascript не работает?

Что случилось?

Это мой код:

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Home</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
</head> 

<body> 
    <div class="container"> 
     <div class="div-form"> 
      <h1>form</h1> 
      <fom action="#" id="ajax-form" method="post" accept-charset="utf-8"> 
       <div class="input-group"> 
        <label>Nama:</label> 
        <input class="form-control" type="text" name="name" placeholder="nama mu"> 
       </div> 
       <div class="input-group"> 
        <label>Email:</label> 
        <input class="form-control" type="email" name="email" placeholder="email mu"> 
       </div> 
       <div class="input-group"> 
        <button class="btn" name="submit" type="submit" value="SUBMIT" id="contact-submit">submit</button> 
       </div> 
      </form> 
     </div> 
    </div> 

<script type="text/javascript"> 
    $(document).ready(function(e) { 
     $("#ajax-form").submit(function(event) { 
      /* Act on the event */ 
      var jsondata = $("#ajax-form").serialize(); 
      $.ajax({ 
       url: 'proccess.php', 
       type: 'POST', 
       dataType: 'json', 
       data: jsondata, 
      }) 
      .done(function() { 
       console.log("success" + data); 
      }) 
      event.preventDefault(); 
     }); 

    }); 
</script> 

</body> 
</html> 
+2

'e.preventDefault();' должен быть 'event.preventDefault();' поскольку параметр события называется 'event' not' e' –

+1

использовать обратный вызов ошибки в вашем ajax, чтобы узнать, является ли эта ошибка, например. '$ .ajax ({url: ...., error: function (msg) {console.log (msg);}});' – dreamweiver

+0

или использовать '.fail (function (jqXHR, textStatus, errorThrown)';) , Кроме того, после вашего .done() отсутствует ';'. –

ответ

0

Помните, что только event будет работать здесь обновленный код

$(document).ready(function(e) { 
    $("#ajax-form").submit(function(event) { 
     /* Act on the event */ 
     var jsondata = $("#ajax-form").serialize(); 
     $.ajax({ 
      url: 'proccess.php', 
      type: 'POST', 
      dataType: 'json', 
      data: jsondata, 
     }) 
     .done(function() { 
      console.log("success" + data); 
     }) 
     event.preventDefault(); 
    }); 

}); 
+2

Пожалуйста, подтвердите существующие ответы, а не дублируйте их :) – BenM

+0

, пожалуйста, еще раз проверьте, у меня есть обновление, но все еще не отображается в консоли – Ariasa

+0

Проблема @Ariasa решена? –

4

Название события вы передаете обратно к функции submit() является event, но вы пытаетесь вызвать preventDefault() на переменную e, которая на самом деле это событие вернулся из обратного вызова DOMReady. В результате событие submit никогда не предотвращается.

Вам необходимо обновить следующим образом (обратите внимание также, что мы должны передать переменную data обратно в done() обратного вызова):

$("#ajax-form").submit(function(event) { 
    event.preventDefault(); 

    /* Act on the event */ 
    var jsondata = $("#ajax-form").serialize(); 

    $.ajax({ 
     url: 'proccess.php', 
     type: 'POST', 
     dataType: 'json', 
     data: jsondata, 
    }) 
    .done(function(data) { 
     console.log("success" + data); 
    }); 
}); 
+5

Не следует '.done' получать' data' как 'parameter' перед этим ->' console.log («success» + data); '? –

+0

Да, должно. Я добавил его к ответу, но это не значит, что его код «не работает». – BenM

+0

Правда, но OP может поставить следующий вопрос, если он не найдет эти данные. Это была моя забота. :) –

0

пожалуйста исправить орфографическую ошибку в теге HTML

<fom action="#" id="ajax-form" method="post" accept-charset="utf-8"> 

<form action="#" id="ajax-form" method="post" accept-charset="utf-8"> 

jQuery не может связать событие отправки с элементом формы, так как нет элемента формы.

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