使用AJAX將表單數據發送到php腳本（無需jQuery）

Question

我正在嘗試做一個基本的AJAX實現，以將一些表單數據發送到php腳本和db。 我只是出於學習目的而這樣做，並且已盡我所能。 當我點擊“創建配置文件”按鈕時，什么都沒有發生。 從下面的代碼中，我的語法/結構中的任何內容都有明顯的突兀之處嗎？

注意*我尚未實現使用AJAX檢索數據的代碼，待發送正常后再執行。

編輯***我對sendFunction（）進行了一些細微更改，並且看到了一些成功。 現在將值添加到我的數據庫中，但是它們的值為空，而不是表單數據中的值。

感謝您提前提供所有幫助/建議！

HTML文檔：

<!DOCTYPE HTML>
<html>
<head>
    <title>Ajax Form</title>

    <script language="javascript" type="text/javascript">
    function sendFunction() {                           // Create a function to handle the Ajax
        var xmlhttpCreate;                              // Variable to hold the xmlhttpRequest object
        if (window.XMLHttPRequest) {                     // Checks for browser compatibilities 
            xmlhttpCreate = new XMLHttpRequest();
        }
        else {
            xmlhttpCreate = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttpCreate.onreadystatechange = function() {                 
            if (xmlhttpCreate.readyState == 4) {        // If server has processed request and is ready to respond
                document.getElementById("createSuccess").innerHTML = xmlhttpCreate.responseText;  // Display a success message that the data was sent and processed by the php script & database
            }
        }

        var fName = document.getElementById('firstName').value;         // Dump user firstName into a variable
        var lName = document.getElementById('lastName').value;         // Dump user lastName into a variable
        var queryString = "?fName=" + fName + "&lName=" + lName;       // A query string that will be sent to the php script, which will then send the values to the db
        xmlhttpCreate.open("GET", "ajax_create.php" + queryString, true);  // Open the request
        xmlhttpCreate.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlhttpCreate.send();                                            // Send the request

    }
    </script>
</head>

<body>

    <h3>Create Profile</h3><br>
    <form name="form">
        First Name: <input type="text" id ="firstName"/><br><br>
        Last Name: <input type="text" id="lastName"/><br><br>
        <input type="button" onclick="sendFunction()" value="Create Profile">
    </form><br>
    <div id="createSuccess"></div><br>

    <h3>Search for Profile</h3><br>
    <form name="searchForm">
        First Name: <input type="text" id="searchFirstName"/><br><br>
        <input type="button" onclick="sendFunction()" value="Search for Profile"/>
    </form><br><br>

    <div id="resultFN"></div><br>
    <div id="resultLN"></div><br>

</body>
</html>

這是我的PHP腳本：

<?php

    // Connect to the database
    $con = mysqli_connect('localhost', 'root', 'intell', 'ajax_profile');

    // GET variables from xmlhttpCreate
    $fName = $_POST['fName'];
    $lName = $_POST['lName'];

    // Escape the user input to help prevent SQL injection
    $fName = mysqli_real_escape_string($fName);
    $lName = mysqli_real_escape_string($lName);

    // Build the query
    $query = "INSERT INTO users (firstName, lastName) VALUES ('$fName', '$lName')";
    mysqli_query($con, $query);
    mysqli_close($con);

    $success = "Profile added to the database";
    echo $success;
?>

Answer 1

您正在使用GET方法發送數據，並且想通過POST獲取php文件中的日期，現在有兩種解決方案。 您可以將javascript代碼更改為使用GET發送，如下所示：

var queryString = "fName=" + fName + "&lName=" + lName;       // A query string that will be sent to the php script, which will then send the values to the db
xmlhttpCreate.open("POST", "ajax_create.php", true);  // Open the request
xmlhttpCreate.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttpCreate.send(queryString);

或者您可以更改在php文件中獲取數據的方式，如下所示：

$fName = $_GET['fName'];
$lName = $_GET['lName'];

不要同時做兩件事，只需更改javascript函數或php文件即可。

使用AJAX將表單數據發送到php腳本（無需jQuery）

問題描述

1 個解決方案

解決方案1
2 已采納 2014-07-23 22:44:59

使用AJAX將表單數據發送到php腳本（無需jQuery）

問題描述

1 個解決方案

解決方案1 2 已采納 2014-07-23 22:44:59

解決方案1
2 已采納 2014-07-23 22:44:59