gpt4 book ai didi

javascript - 使用 AJAX 将表单数据发送到 php 脚本(不使用 jQuery)

转载 作者:行者123 更新时间:2023-12-02 17:09:56 25 4
gpt4 key购买 nike

我正在尝试执行基本的 AJAX 实现,以将一些表单数据发送到 php 脚本和数据库。我这样做只是为了学习目的,并已尽我所能。当我点击“创建个人资料”按钮时,没有任何反应。从下面的代码中,我的语法/结构中是否有任何明显的内容跳出来?

注意* 我还没有实现使用 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;
?>

最佳答案

您正在使用 GET 方法发送数据,并且希望使用 POST 获取 php 文件中的日期...现在您有两个解决方案。您可以更改要使用 GET 发送的 javascript 代码,如下所示:

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 文件。

关于javascript - 使用 AJAX 将表单数据发送到 php 脚本(不使用 jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24921529/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com