使用 AJAX 将数据发送到 PHP 并将答案分配给文本框

Question

我正在编写一个非常简单的Web表单，其中我使用jQuery AJAX将数据从文本框发送到PHP，并希望在html页面中填充一个标签(在php中操作(

我在 HTML 页面中没有表单，而是使用多个对象，因为页面应该包含 3 个步骤，而且我不想使用操作。

以下是相关的代码片段：

HTML/JS

function funcGetBatches() {
CatNum = document.getElementById("CatNumber");
console.log(CatNum.value);
$.ajax({
type: "GET",
url: "./php/conn.php",
data: CatNum.value,
datatype: "text",
success: function(data) {
console.log("Succeeded!!!" + CatNum.value);
$("#partName").text('__________');
},
Error: function(jqXHR, textStatus, error) {}
});
}
var button1 = document.getElementById("getBatches");
button1.addEventListener("click", funcGetBatches);

.PHP

if(isset($_GET)){
$myCatNum = $_GET['CatNum.value'] + " success!";
console.log("MyCatNum: " + $myCatNum);
'________________'
}

我正在 php 代码中记录该过程，并且确实看到它正在运行

我确实相信我缺少一两段代码，我已经用______标记了代码中的两个位置。

请帮忙，

谢谢。

Answer 1

我建议你不要混合使用Native JavaScript和jQuery。考虑以下jQuery脚本：

function funcGetBatches() {
var CatNum = $("#CatNumber").val();
console.log(CatNum);
$.ajax({
type: "GET",
url: "./php/conn.php",
data: { catnum: CatNum },
datatype: "text",
success: function(data) {
console.log("Succeeded!!!", CatNum, data);
$("#partName").text(data);
},
error: function(x, s, e) {
console.log(x, s, e);
}
});
}
$("#getBatches").click(funcGetBatches);

这会将CatNum发布到 PHP 脚本，并且返回的任何文本数据都将添加到#partName元素中。

关于PHP，这必须回显数据。

$parts = array(
"Elbow",
"Conduit",
"Nipple",
"Coupler"
);
if(isset($_GET['catnum'])){
$cNum = (int)$_GET['catnum'];
echo $parts[$cNum];
}

如您所见，这可能是根据提交的 GET 请求返回新数据的一种方法。