Проблема с формой и Ajax - PullRequest
       5

Проблема с формой и Ajax

0 голосов
/ 11 декабря 2011

Я пытаюсь отправить форму с помощью Ajax, вот мой упрощенный код Мой индекс:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#addemail").click(function(){
                    var email=$("#email").val();
                    $.ajax({
                        type: "POST",
                        url: "addemail.php",
                        data: "email="+email,
                        success: console.log("success!"), 
                        error: console.log("error!") 
                    });        
                }); 
            });
        </script>
    </head>
    <body>
        <div id="wrapper">
        <h2>Email:</h2>
          <form action="" method="post">
               <table>
                  <tr>
                      <td><label>Années:</label></td>
                      <td><input type="text" id="email" name="email" /></td>
                      <td><input type="submit" id="addemail" value="Ajouter" /></td>
                  </tr>  
              </table>                   
          </form>   
        </div>
    </body>
</html>

А вот и мой php файл

<?php
    $connection =  mysql_connect('localhost', 'XXX', 'XXX');
    $db=  mysql_select_db('mydb', $connection);
    $email= $_POST["email"];
    $query  = 'INSERT INTO users(email) VALUES ("'.mysql_real_escape_string($email).'")';
    mysql_query($query);

?>

Моя проблема в том, что это не работает ... НО, если я ставлю точку останова после ajax, он работает, он хорошо записывает электронную почту в БД, НО тогда я веду журнал двух консолей (успех! И ошибка!) ... Также, если я добавлю action = "addemail.php" в форму, он не выполнит Ajax и не перейдет на страницу php (которая пуста, но хорошо пишет в db ...)

Кто-нибудь мне поможет?

Ответы [ 3 ]

3 голосов
/ 11 декабря 2011

Это неправильно:

success: console.log("success!"),

таким образом, вы выполняете вызов журнала сразу и присваиваете его результат success.

Вам нужно создать две анонимные функции, которые будут выполняться при возникновении события:

success: function() { console.log("success!"); },
error: function() { console.log("error!"); },
1 голос
/ 11 декабря 2011

Успех и ошибка должны быть заключены в функции:

success: function (data, textStatus, jqXHR) { console.log("success!") }, 
error: function (jqXHR, textStatus, errorThrown) { console.log("error!") }
0 голосов
/ 11 декабря 2011

После $.ajax({}) нужно поставить

return false;

В противном случае, даже если ajax успешен, он продолжит работу и перейдет на страницу php.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...