php - 使用 AJAX 和 PHP 更新表单字段
问题描述
问题:在触发 select 输入的 onchange 事件后,如何根据 MySQL 查询更新表单的选择输入值和文本输入字段?
我尝试过的:我尝试将 AJAX 与 post 和 get 数据类型一起使用,调用一个运行查询并回显结果的 php 文件。什么都没有显示。我在此过程中遇到的任何错误通常都是导致服务器 500 错误的小问题。我在运行 JQuery AJAX 请求的函数中放置了 console.log 语句。检测到更改事件,调用ajax成功。我还尝试使用 .load() 和 GET 和 POST,也没有运气。我有其他实现 AJAX 的功能,我尝试修改它们以适应这种情况,但没有成功。
我还尝试只使用一个选择输入,当更改时将使用 AJAX 请求和 .load 函数来显示其他输入,这些输入将在 php 端格式化并回显到页面,并选择反映 db 结果的值。
我想要什么:我想要一个简单的表单示例,其中包含一个带有三个选项的选择输入、文本类型输入和一个提交按钮。该表单是一个客户端后端表单,用于向 MySQL 数据库发送更新。每个输入代表数据库中的一个字段。这个想法是,当用户更改选择输入选定值时,会完成一个查询,该查询使用选定值仅返回一个结果。db 中记录值的每个字段现在应该反映在表单中。首先,告诉我这是否是解决这个问题的正确方法,如果不是,请告诉我你会怎么做。
示例 index.php:
<form action="editForm.php" method="POST" enctype="multipart/form-data">
<select id="contact_name" name="contact_name" placeholder="Select Contact" required>
<option value="John Smith">John Smith</option>
<option value="Jane Doe">Jane Doe</option>
<option value="George Washington"></option>
</select>
<input type="text" name="age" placeholder="Age" required>
<input type="text" name="race" placeholder="Select Race" required>
<select id="veteran_status" name="veteran_status" placeholder="Select Veteran Status" required>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</form>
当 #contact_name 的更改事件被触发时,我需要使用 db 具有的值更新字段。
你将如何实现这一点?提前致谢。
更新:这里要求的是我的 JQuery 代码,但我知道我的示例没有使用相同的名称。
<script type="text/javascript">
$(document).ready(function(){
$('#currency_select').on('change', function (e) {
$.ajax({
type: 'post',
url: 'getCurrentValues.php',
data: {currency: 'EUR'},
success: function () {
console.log('ajax was submitted');
}
});
});
});
</script>
这是我对如何执行此操作的理解:
首先,检测事件并通过 ajax 传递数据以供查询检索记录。这是在文档准备功能中,以确保 DOM 已准备好。
$("#contact_name).on("change", function(e){
$.ajax({
type: 'post',
url: 'editForm.php',
data: {name: this.value},
success: function () {
console.log('ajax was submitted');
}
});
};
编辑表格.php:
include 'includes/db.php';
$name = $_POST['contact_name'];
$sql = "SELECT * FROM contacts;";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
$lastValues = array();
while($row = mysqli_fetch_assoc($result)) {
$age = $row['age'];
}
<input type="text" name="age" value="<?php echo $age; ?>">
<?php
}
?>
解决方案
你的索引:
<select id="contact_name" placeholder="Select Contact" required>
<option value="John Smith">John Smith</option>
<option value="Jane Doe">Jane Doe</option>
<option value="George Washington"></option>
</select>
<form action="editForm.php" id="form" method="POST" enctype="multipart/form-data">
<select name="contact_name" id="contact_form" placeholder="Select Contact" required>
<option value="John Smith">John Smith</option>
<option value="Jane Doe">Jane Doe</option>
<option value="George Washington"></option>
</select>
<input type="text" id="age" name="age" placeholder="Age" required>
<input type="text" id="race" name="race" placeholder="Select Race" required>
<select id="veteran_status" name="veteran_status" placeholder="Select Veteran Status" required>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</form>
$("#contact_name").on("change", function() {
var selected = $(this).val();
$("#form").load("formdata.php?contact="+selected); //normaly you do that with an id as value
OR
$.ajax({
type:"POST",
url:"formdata.php",
data: {user: selected},
dataType: "json",
success: function(response){
if(response.status == "success") {
$("#age").val(response.age);
$("#race").val(response.race);
$("#veteran_status").val(response.status);
} else {
alert("No data found for this user!");
}
});
});
并在您的 formdata.php 文件中
//make your db-query
then either make the actual input fields which will be displayed if you use load
OR make something like if you use the ajax version
if($result) {
echo json_encode(array("status" => "success",age" => $result["age"], "race" => $result["race"], "status" => $result["status"]));
} else {
echo json_encode(array("status" => "failed"));
}
您也可以删除表单中的操作、方法和编码类型,因为这将在 ajax 函数中设置;)
我建议您使用用户 ID 作为选择字段中的值,并且您还需要在表单中填写 contact_name 或制作一个隐藏的输入字段,以便您可以提交表单并知道这是谁的数据。 .
推荐阅读
- excel - Excel VBA选择多列
- javascript - ResumableJs 不适用于 Webpack / Webpackencore
- authentication - 如何在登录期间更正 keycloak 的“返回应用程序”链接?
- c - 合并排序后无法打印出双数数组
- python - 在Python中计算数字的最后一位数字的顺序
- eleventy - 如何让 110 在输出中包含 CSS 和图片等资产?
- c++ - 在 C++ 中声明类之外的函数有什么好处?
- sql - 删除文本单元格中的重复数字(Teradata 数据库)
- java - 春季卡夫卡中的侦听器反复侦听失败的卡夫卡主题消息
- c# - AzureDevOps Build 中 NuGet 包的还原错误