Php 使用jqueryajax的searchfunction
因此，我正在为一个网站的后端设计一个搜索功能，我正在用AJAX来实现 到目前为止，如果您按下“成员”按钮，它将从数据库中获取相关信息，并在表中显示成员。到目前为止还不错 现在，我在div上方添加了一个表单，其中显示了表：Php 使用jqueryajax的searchfunction,php,jquery,html,sql,ajax,Php,Jquery,Html,Sql,Ajax,因此，我正在为一个网站的后端设计一个搜索功能，我正在用AJAX来实现 到目前为止，如果您按下“成员”按钮，它将从数据库中获取相关信息，并在表中显示成员。到目前为止还不错 现在，我在div上方添加了一个表单，其中显示了表： <form id="searchmember" method="post"> <input type="text" name="searchm" placeholder="Look for a Member!"/>
<form id="searchmember" method="post">
<input type="text" name="searchm" placeholder="Look for a Member!"/>
<input id="search" type="submit" value=">>" name="search"/>
</form>
<div id="eachTable">
<?php
include($_SERVER['DOCUMENT_ROOT'].'/website/dbConnection.php');
$searchtrue = $_POST['val'];
$query = "SELECT Titel, Vorname, Nachname, Unternehmen, Gruppe FROM mitglieder WHERE Titel LIKE '%$searchtrue%' OR Vorname LIKE '%$searchtrue%' OR Nachname LIKE '%$searchtrue%' OR Unternehmen LIKE '%$searchtrue%' OR Gruppe LIKE '%$searchtrue%'";
function filterTable($query)
{
$filter_Result = mysqli_query($GLOBALS['connect'], $query);
return $filter_Result;
}
$searchresult = filterTable($query) or die("Tabelle kann nicht angezeigt werden");
$data2 = mysqli_fetch_all($searchresult);
echo json_encode($data2);
?>
您不需要在AJAX中使用表单
如果将表单替换为div，则该问题将得到解决
当您“提交”表单时，它会尝试将数据发布到某个位置
由于您没有提供URL，它将重新加载。您的表单将被提交，因为您有一个提交输入，并且它没有任何操作，因此它正在重新设计
您可以将表单更改为div或使用以下命令：
$(document).ready(function() {
$('#searchmember').on('submit', function(e){
e.preventDefault();
});
});
另外，我创建了这个文件，它运行良好：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="searchmember" method="post">
<input type="text" name="searchm" placeholder="Look for a Member!"/>
<input id="search" type="submit" value=">>" name="search"/>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#searchmember').on('submit', function(e){
e.preventDefault();
});
});
$("#search").click(function(e){
var ifIssetData= 1;
if(ifIssetData == 1){
var searchm = $('input[name="searchm"]').val();
$.post('/website/administrator/components/com_backend/searchPerson.php', 'val=' + $(searchm).val());
$.ajax({
async: true,
dataType: 'json',
url: '/website/administrator/components/com_backend/searchPerson.php',
error: function(data2, error2, errorThrown2){
alert(JSON.stringify(data2));
alert(error2);
alert(errorThrown2);
},
success: function(data2,status)
{
createTableByJqueryEach2(data2);
}
});
}
});
</script>
</body>
</html>
$（文档）.ready（函数（）{
$（'searchmember'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
});
});
$（“#搜索”）。单击（功能（e）{
变量ifIssetData=1；
如果（ifIssetData==1）{
var searchm=$（'input[name=“searchm”]”）。val（）；
$.post（'/website/administrator/components/com_backend/searchPerson.php'，'val='+$（searchm.val（））；
$.ajax({
async:true，
数据类型：“json”，
url:“/website/administrator/components/com_backend/searchPerson.php”，
错误：函数（数据2、错误2、错误thrown2）{
警报（JSON.stringify（data2））；
警报（错误2）；
警报（errorThrown2）；
},
成功：功能（数据2，状态）
{
createTableByjQueryAch2（数据2）；
}
});
}
});
为什么要对同一个url发出两个ajax请求？我对JQuery真的很陌生。比如上周的星期五。所以我写了这篇文章，不知道PHP文件是否返回了表，并从首先显示表的函数粘贴了拷贝n。我可以在第二次访问PHP文件时删除它吗？我用一个div替换了它，并删除了method=“post”。现在它卡住了。我按下提交按钮，什么也没发生。我还尝试将输入标签中的type=“submit”替换为type=“button”，但仍然卡住了。好像是送出了什么东西却什么也没得到？或者也许我的查询出了问题，结果它返回了整个表？这里可能有什么问题？我用div替换了表单，现在有了一个新问题。见我对上述答案的评论。你知道那是什么吗？我在我的答案中添加了你的代码，我声明你的ifIssetData=1因为它没有声明没有控制台是干净的是复制粘贴它和它一样。按钮有点“一直按下”，什么也没发生。当我按下按钮外的某个按钮时，按钮会“未按下”，我很确定您的错误在php文件中。这样就可以了，或者把它放在第一行
$(document).ready(function() {
$('#searchmember').on('submit', function(e){
e.preventDefault();
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="searchmember" method="post">
<input type="text" name="searchm" placeholder="Look for a Member!"/>
<input id="search" type="submit" value=">>" name="search"/>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#searchmember').on('submit', function(e){
e.preventDefault();
});
});
$("#search").click(function(e){
var ifIssetData= 1;
if(ifIssetData == 1){
var searchm = $('input[name="searchm"]').val();
$.post('/website/administrator/components/com_backend/searchPerson.php', 'val=' + $(searchm).val());
$.ajax({
async: true,
dataType: 'json',
url: '/website/administrator/components/com_backend/searchPerson.php',
error: function(data2, error2, errorThrown2){
alert(JSON.stringify(data2));
alert(error2);
alert(errorThrown2);
},
success: function(data2,status)
{
createTableByJqueryEach2(data2);
}
});
}
});
</script>
</body>
</html>