php - 使用 AJAX 将 HTML 表单发布到 PHP 调用

Question

我正在尝试将 HTML 表单中的 POST 和电子邮件地址条目发送到 PHP 脚本，以将结果存储在数据库中。该脚本还负责在用户输入无效的电子邮件地址等时触发错误消息。我希望整个过程都涉及 AJAX 调用，这样就不必在用户每次点击提交时都重新加载页面表单上的按钮。

截至目前，每次用户点击表单提交按钮时，页面都会刷新，我会从 ajax 调用中收到响应，但由于刷新，它会立即被覆盖。

这是我的 HTML 和 Javascript/ajax:

<div id="emailform">
<form method="post"><!--action="planethome.php"-->
<input class="emailinput" type="text" name="email" maxlength="80" placeholder="enter your email address"/>
<input class="submitemailbutton" name="send_button" type="submit" value="Send" onClick="ajaxFunction()/>
<input type="hidden" name="submitted" value="TRUE"/>
</form>
</div>

<div id="errororsuccess">
</div>


<!--ajax stuff:---------------------------------->


<script language="javascript" type="text/javascript">
//Browser Support Code"
function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Ajax is struggling in your browser.");
                return false;
            }
        }
    }

    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){

            document.getElementById('errororsuccess').innerHTML = ajaxRequest.responseText;     

            }
    }

    // Create a function that will receive data sent from the server
    ajaxRequest.open("POST", "addemailtodatabase.php", true);
    ajaxRequest.send(null); 
}

这是我的 PHP:

<?php

    require_once ('planetconfig.php');

    if (isset($_POST['submitted'])) { /

        require_once (MYSQL);

        $email = FALSE;


        $trimmed = array_map('trim', $_POST);


        if (!empty($_POST['email'])) 
        {

            if (preg_match('/^[^0-9][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[@][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{2,4}$/',$_POST['email'])) {

                $email = mysqli_real_escape_string ($dbc, $trimmed['email']);

            } else {
                echo "Invalid";         
            }

        } else {
                echo "You need to enter an email address";

        }


        if ($email) { 

            $q = "INSERT INTO planetemail (email, time) VALUES (AES_ENCRYPT('$email', 'password'), NOW())";

            $r = mysqli_query ($dbc, $q) or trigger_error("Query: $q\n<br />MySQL Error: " . mysqli_error($dbc));

            if (mysqli_affected_rows($dbc) == 1) { 

                echo "Thanks, we'll be in touch";

                exit();

            } else { 
                echo '<p class="error">We\'re sorry, something has gone wrong.</p>';
            }
        }

    mysqli_close($dbc);

} 
?>

我确定这与我的 POST 方法或我如何设置 ajax 调用有关。

我是这一切的新手，任何人都可以告诉我我做错了什么或提出更好的实现建议。我有明天早上的最后期限来完成这件事。

Answer 1

您的问题在于您使用的是提交按钮。提交按钮将提交表单，将其从 type="submit"更改为 type="button"并且它将起作用，正如@juzerali 建议的那样，使用 jQuery，该代码伤害了我的头。