使用AJAX將HTML表單發布到PHP調用

Question

我正在嘗試從HTML表單向PHP腳本發布POST和電子郵件地址條目，以將結果存儲在數據庫中。 該腳本還負責在用戶輸入無效的電子郵件地址等時觸發錯誤消息。我希望整個過程都涉及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，該代碼會傷到我的頭。

Answer 2

1，是的，這很糟糕，請使用jquery。 第二，盡管您已經用提交按鈕的onclick綁定了ajax調用，但是並沒有阻止默認行為的執行。 該表格仍將以常規方式提交。

Answer 3

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

您的代碼中有一個流浪/。

另外，將type =“ submit”更改為type =“ button”

onClick事件處理程序將提取提交，因為您正在發出AJAX請求，而無需進行POST。

Answer 4

return false; 在腳本的末尾，以防止其以正常方式提交。