php - HTML 表单数据未发布以在 SQL 查询中使用
问题描述
这应该很简单,但我在 HTML 页面上迷失了简单的形式 - 选择 Men、Women 或 Junior 然后将该值发送到 php 页面以执行 SQL 查询并使用变量“$trigen”查找所有 Men、Women 或 Juniors " 使用 AJAX 在 HTML 页面上显示结果
如果我手动设置 $trigen 它可以工作,但当我选择此代码中列出的表单中的选项时则不行:-
我的 HTML:-
<!DOCTYPE html>
<html>
<div class="entry-content">
<form action="/getcustomer.php" method="POST">
<label for="trigen">Choose a gender:</label>
<select id="trigen" name="trigen">
<option value="Men">Men</option>
<option value="Women">Women</option>
<option value="Junior">Junior</option>
</select>
<button class="btn btn-primary text-center btn-block btn-flat" style="h2; margin: 20px; color:black; " name="trilookup" type="submit" onclick="showResults()"> Search</button>
</form>
</div>
<div id="results">Results go here if it works....</div>
<script>
function showResults(str) {
var xhttp;
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("results").innerHTML = this.responseText;
}
};
xhttp.open("GET", "getcustomer.php?q="+str, true);
xhttp.send();
}
</script>
然后我在“getcustomer.php”中的 php 代码
<?php
//connect to the database
$conn=mysqli_connect('localhost','wetsuder_user1','user123','wetsuder_finder');
if($conn){
}
else{
echo "Sorry there is a connection error".mysqli_connect_error();
}
$trigen=$_POST['trigen'];
//this is the search
$sql = "SELECT id, Gender, Wetsuit FROM wp_wetsuitdata WHERE Gender = '$trigen'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<table><tr><th>ID</th><th>Name</th></tr>";
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr><td>".$row["id"]."</td><td>".$row["Gender"]." ".$row["Wetsuit"]."</td></tr>";
}
echo "</table>";
} else {
echo "0 results";
}
$conn->close();
?>
解决方案
您button
正在导致表单提交。只需添加preventDefault()
作为showResults
函数的第一行,它将阻止表单自然提交。您正在通过 ajax 处理表单提交。<form
出于同样的原因,您也不需要在标签上设置操作或方法。另一种阻止表单提交的方法是这样的:<form onsubmit="return false"
此外,更改您的函数以找到您要发送的值,因为您实际上并没有通过函数调用传递该值str
function showResults() {
preventDefault(); // prevents form submission
// get the value
let str = document.getElementById('trigen').value;
// check to make sure it's there...
if (!str) return alert("Please select an option...");
var xhttp;
......
您正在通过 GET 发送数据(当您在 URL 上使用 ?q=val 时,数据正在通过 GET 发送。因此,您可以通过以下方式在 PHP 中接收它:
$trigen=$_GET['q'];
推荐阅读
- c# - 从 RadDropDownList selectedindexchanged 访问插入和编辑事件中的 RadGrid EditForm 模板项
- swift - 条件协议一致性:无法将类型“Array<_>”的值转换为指定类型“[UInt8]”
- angular - Angular Material Table Page-Wise Selection: how to limit selection to the current page in Angular Material Table?
- ios - 如何制作一个包含类型的数组?
- angularjs - 第二次单击时AngularJS ng-click错误
- java - IDE 和编译器的 /t 间距是否有不同的间距?(IntelliJ 上的 JAVA)
- javascript - 获取没有选定属性的选定选项
- powerapps - 在 PowerApps 中单击“制作此应用程序”后“需要登录”
- css - 如何在网格布局中获取网格区域的实际大小
- r - dplyr 在 mutate 函数中定义一个临时变量