2

我一生都无法弄清楚这里发生了什么。我将打开一个不同的浏览器来检查我所做的更改是否有效，也许我的另一个浏览器缓存了一些东西，它会起作用！但后来我又做了一次，但似乎没有。我要疯了。

在我的网站 syllableapp.com 上，我创建了一个可以连接的 MySQL 数据库。我制作了一个连接到它的 PHP 脚本，向它添加了一个简单的条目，然后就完成了。它被称为register_email.php，并且可以在此处访问。通过该 URL 手动访问它会添加该条目。其代码如下：

<?php
    $db = new mysqli("localhost", "username", "password", "table");

    if ($db->connect_error) {
        echo "Could not connect to database.";
        exit;
    }
    else {
        $db->query("INSERT INTO emails (email) VALUES ('weird')");
        echo 1;
    }
?>

如果我检查，它会被添加。

但是，我希望从表单中添加它。我在http://syllableapp.com/test/index.html有一个 HTML 文件，如下所示：

<html>
    <head>
        <title>Syllable - iPhone Speed Reader</title>

        <link rel="stylesheet" href="styles/style.css">

        <script type="text/javascript" src="scripts/jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="scripts/scripts.js"></script>
        <script type="text/javascript" src="scripts/jquery-ui-1.8.23.min.js"></script>
    </head>
    <body>
        <div class="content">
            <img src="images/app-icon.png" alt="App icon">

            <h1>Syllable</h1>
            <p>Speed reading app for iPhone. Devour all your Instapaper and Pocket articles, and learn to read much faster in the process.</p>

            <form method="post" action="">
                <input type="email" class="email" placeholder="Email me when it's live">
                <input type="submit" class="submit" value="Send">
            </form>

            <a href="http://twitter.com/syllableapp"></a>
        </div>
    </body>
</html>

因此，当用户提交表单时，我在顶部链接到的 JavaScript 文件拦截了提交按钮的按下，并调用 AJAX 函数将其提交到 PHP 表单。jQuery 看起来像：

$(document).ready(function() {
    $('input[type="submit"]').click(function() {
        var email = $.trim($('.email').val());
        var emailRegEx = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;


        if (email == "" || !emailRegEx.test(email)) {
            event.preventDefault();
            $(this).effect("shake", { times:2 }, 75);
        }
        else {
            $.ajax({
                type: "POST",
                url: "http://syllableapp.com/test/register_email.php",
                data: { "message": "hi" },
                success: function(data) {
                    alert("success");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert("failure");
                }
            });

        }
    });
});

这基本上只是检查它是否是有效的电子邮件地址，如果是，则调用 PHP 文件。

但是，每次我单击提交时，它都会显示失败。为什么会发生这种情况？为什么我可以直接访问它，但它不会让我使用AJAX？

4

2 回答 2

0

只是猜测，但在您的 AJAX 块中将 URL 行更改为：

url: "register_email.php",

另外，作为测试，

(1) 将 AJAX 成功函数中的 alert 命令更改为：

alert(data);

<?php(2)在文件“register_email.php”中的指令之后立即插入这一行：

die('Made it to here');
于 2013-08-16T17:07:21.720 回答
0

一些东西：

1) 你的表单需要一个动作，否则它不是正确的 HTML。您可以将其设置为“#”之类的值

2）当您点击提交按钮时，您希望使用自定义ajax提交表单，而不是通过标准方式提交。单击事件的 ajax 处理程序应类似于：

$('input[type="submit"]').click(function(event) {
event.preventDefault();
//...
});

您的代码中有 event.preventDefault ，但事件变量没有被传递给函数。而且我认为您希望每次都调用 event.preventDefault ，而不仅仅是在输入验证失败的情况下。

3) 不要使用警报，而是尝试使用 console.log 并监视您的 javascript 控制台以查看是否有任何错误。将这些错误添加到您的问题中，以帮助我们解决您的问题。

于 2013-08-16T17:11:51.527 回答