表单和Ajax问题

时间:2011-12-11 18:06:54

标签: jquery ajax forms

我试图用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之后设置了一个断点,它会很好地写入db中的电子邮件然后我有两个控制台日志(成功!和错误!)...... 此外,如果我将action =“addemail.php”添加到表单中,它将不会执行Ajax并转到php页面(这是空白的,但是在db中写得很好......)

有人帮我吗?

3 个答案:

答案 0 :(得分:3)

这是错误的:

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

这样,您正在立即执行日志调用 ,并将其结果分配给success

你想要的是创建两个匿名函数,这些函数将在事件发生时执行:

success: function() { console.log("success!"); },
error: function() { console.log("error!"); },

答案 1 :(得分:1)

成功和错误需要包装为函数:

success: function (data, textStatus, jqXHR) { console.log("success!") }, 
error: function (jqXHR, textStatus, errorThrown) { console.log("error!") }

答案 2 :(得分:0)

在你需要放置$.ajax({})之后

return false;

否则,即使ajax成功,它也会继续执行并转到php页面。