Javascript PHP ajax搜索结果弄乱了我的页面
大家好，这是我第一次尝试在我的网站上进行实时ajax搜索。我是php新手，所以在这件事上有任何帮助都会很好。我在这里和那里跟随一些教程，并试图使它工作，但每次我按下搜索没有结果出来。在这件事上有任何帮助都会很好 代码：Javascript PHP ajax搜索结果弄乱了我的页面,javascript,php,jquery,html,mysql,Javascript,Php,Jquery,Html,Mysql,大家好，这是我第一次尝试在我的网站上进行实时ajax搜索。我是php新手，所以在这件事上有任何帮助都会很好。我在这里和那里跟随一些教程，并试图使它工作，但每次我按下搜索没有结果出来。在这件事上有任何帮助都会很好 代码： <?php mysql_connect("localhost","root","") or die ("could not connect"); mysql_select_db("reg") or die ("could not find db"); if (isset($
<?php
mysql_connect("localhost","root","") or die ("could not connect");
mysql_select_db("reg") or die ("could not find db");
if (isset($_POST['search_term']) == true && empty($_POST['search_term']) == false) {
$search_term = mysql_real_escape_string($_POST['search_term']);
$query = mysql_query("SELECT `ingName` FROM `ing` WHERE `ingName` LIKE '$search_term%'");
while(($row = mysql_fetch_assoc($query)) !== false) {
echo '<li>',$row['ingName'],'</li>';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<input type="text" class="searchFunction"> <input type = "submit" value ="Search">
<div class = "dropdown">
<ul class = "result">
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.searchFunction').keyup(function() {
var search_term = $(this) .attr('value');
$.post('build.php', {search_term:search_term}, function(data) {
$('.result').html(data);
$('.result li').click(function() {
var result_value = $(this).text();
$('.searchFunction').attr('value', result_value);
$('.result').html('');
});
});
});
});
</script>
</body>
</html>
正如已经指出的那样-目前使用的方法存在sql注入的风险，因此在承诺使用现在已弃用的mysql
函数套件之前，您最好仔细阅读并实现mysqli
，其中，当您使用准备好的语句时
将为恶意sql注入攻击提供重要的保护
当您的ajax查询被发送到同一页面时（从发布的代码的外观来看），需要做的一件重要事情是在发送响应后退出PHPA，否则您将发送整个页面（由于html标记之外有内容，因此格式也会很差）我怀疑这不是你想要的目标
在我未经训练的眼中，ajax函数看起来不错，但由于我不使用jQuery，我很可能是错的，错过了一些重要的东西
<?php
/*
as the rest of the page doesn't use a db connection,
only load the db conn if the page is requested via post
*/
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/* assign db connection to a variable */
$conn=mysql_connect("localhost","root","") or die ("could not connect");
mysql_select_db("reg") or die ("could not find db");
/* empty() does an implied `isset` */
if ( !empty( $_POST['search_term'] ) ) {
$search_term = mysql_real_escape_string( $_POST['search_term'] );
/*
You ought to look at using mysqli ( prepared statements )
rather than the now deprecated `mysql_*` functions
*/
$query = mysql_query( "SELECT `ingName` FROM `ing` WHERE `ingName` LIKE '$search_term%'", $conn );
if( $query ){/* only send response if the query succeeds */
while( $row = mysql_fetch_assoc( $query ) ) {
echo '<li>',$row['ingName'],'</li>';
}
}
}
mysql_close( $conn );
/* make sure that the rest of the page is not sent back with the response data */
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gotta have a title!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$('.searchFunction').keyup( function( event ) {
/* I could not get this to work - I don't know what this is doing as I don't use jQuery */
/*var search_term = $(this).attr('value');*/
/* this however does work */
var el=event.target || event.srcElement;
var search_term=el.value;
/* maybe better to search after a few letters have been added? */
if( search_term.length < 2 )return;
/* it appears you are posting to the same page */
$.post( document.location.href, { search_term:search_term }, function( data ) {
$('.result').html( data );
$('.result li').click( function( event ) {
var result_value = $(this).text();
$('.searchFunction').attr('value', result_value );
$('.result').html('');
});
});
});
});
</script>
</head>
<body>
<div class="container">
<input type="text" name='search_term' class="searchFunction">
<input type="submit" value="Search">
<div class="dropdown">
<ul class="result"></ul>
</div>
</div>
</body>
</html>
正如已经指出的那样-目前使用的方法存在sql注入的风险，因此在承诺使用现在已弃用的mysql
函数套件之前，您最好仔细阅读并实现mysqli
，其中，当您使用准备好的语句时
将为恶意sql注入攻击提供重要的保护
当您的ajax查询被发送到同一页面时（从发布的代码的外观来看），需要做的一件重要事情是在发送响应后退出PHPA，否则您将发送整个页面（由于html标记之外有内容，因此格式也会很差）我怀疑这不是你想要的目标
在我未经训练的眼中，ajax函数看起来不错，但由于我不使用jQuery，我很可能是错的，错过了一些重要的东西
<?php
/*
as the rest of the page doesn't use a db connection,
only load the db conn if the page is requested via post
*/
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/* assign db connection to a variable */
$conn=mysql_connect("localhost","root","") or die ("could not connect");
mysql_select_db("reg") or die ("could not find db");
/* empty() does an implied `isset` */
if ( !empty( $_POST['search_term'] ) ) {
$search_term = mysql_real_escape_string( $_POST['search_term'] );
/*
You ought to look at using mysqli ( prepared statements )
rather than the now deprecated `mysql_*` functions
*/
$query = mysql_query( "SELECT `ingName` FROM `ing` WHERE `ingName` LIKE '$search_term%'", $conn );
if( $query ){/* only send response if the query succeeds */
while( $row = mysql_fetch_assoc( $query ) ) {
echo '<li>',$row['ingName'],'</li>';
}
}
}
mysql_close( $conn );
/* make sure that the rest of the page is not sent back with the response data */
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gotta have a title!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$('.searchFunction').keyup( function( event ) {
/* I could not get this to work - I don't know what this is doing as I don't use jQuery */
/*var search_term = $(this).attr('value');*/
/* this however does work */
var el=event.target || event.srcElement;
var search_term=el.value;
/* maybe better to search after a few letters have been added? */
if( search_term.length < 2 )return;
/* it appears you are posting to the same page */
$.post( document.location.href, { search_term:search_term }, function( data ) {
$('.result').html( data );
$('.result li').click( function( event ) {
var result_value = $(this).text();
$('.searchFunction').attr('value', result_value );
$('.result').html('');
});
});
});
});
</script>
</head>
<body>
<div class="container">
<input type="text" name='search_term' class="searchFunction">
<input type="submit" value="Search">
<div class="dropdown">
<ul class="result"></ul>
</div>
</div>
</body>
</html>
您可以尝试在不使用引号的情况下编写查询，即：
$query = mysql_query("SELECT ingName FROM ing WHERE ingName LIKE '$search_term%'");
您还可以通过使用'%$search\u term%'
而不是'$search\u term'
来放松搜索
另一个可能的问题是mysql\u connect（）
。我正在使用该函数，但它对我不起作用，因此我决定使用对我起作用的mysqli\u connect（）
函数
还有一些建议，您不需要==true
，也可以使用
！空（$\u POST['search\u term']）
一旦你通过学习，你也可以尝试PDO功能，这是远远优于启动自己的连接。
您可以像这样启动PDO连接
$dbh1=newpdo（'mysql:dbname=dbname；host=127.0.0.1'，'username'，'dbpass'）
然后你可以像这样搜索使用初始化的连接
$query = "SELECT ingName from ing WHERE ingName LIKE %$search_term%";
$stmt = $dbh1->prepare($query);
$stmt->execute();
$allRows = count($stmt);
$row = $stmt->fetch(PDO::fetch_assoc);
foreach($row as $one){
echo "<li>".$one['ingName']."</li><br>";
}
$query=“从ing中选择ingName，如%$search\u term%”；
$stmt=$dbh1->prepare（$query）；
$stmt->execute（）；
$allRows=计数（$stmt）；
$row=$stmt->fetch（PDO:：fetch_assoc）；
foreach（$1行）{
回声“”$one['ingName']。“
”；
}
干杯 您可以尝试在不使用引号的情况下编写查询，即：
$query = mysql_query("SELECT ingName FROM ing WHERE ingName LIKE '$search_term%'");
您还可以通过使用'%$search\u term%'
而不是'$search\u term'
来放松搜索
另一个可能的问题是mysql\u connect（）
。我正在使用该函数，但它对我不起作用，因此我决定使用对我起作用的mysqli\u connect（）
函数
还有一些建议，您不需要==true
，也可以使用
！空（$\u POST['search\u term']）
一旦你通过学习，你也可以尝试PDO功能，这是远远优于启动自己的连接。
您可以像这样启动PDO连接
$dbh1=newpdo（'mysql:dbname=dbname；host=127.0.0.1'，'username'，'dbpass'）
然后你可以像这样搜索使用初始化的连接
$query = "SELECT ingName from ing WHERE ingName LIKE %$search_term%";
$stmt = $dbh1->prepare($query);
$stmt->execute();
$allRows = count($stmt);
$row = $stmt->fetch(PDO::fetch_assoc);
foreach($row as $one){
echo "<li>".$one['ingName']."</li><br>";
}
$query=“从ing中选择ingName，如%$search\u term%”；
$stmt=$dbh1->prepare（$query）；
$stmt->execute（）；
$allRows=计数（$stmt）；
$row=$stmt->fetch（PDO:：fetch_assoc）；
foreach（$1行）{
回声“”$one['ingName']。“
”；
}
干杯 您的输入既不包含id，也不包含search\u term
name属性。通过PHP检查错误并检查控制台。表单输入元素应该有一个名称。PHP代码在哪里？你能在你的问题中修改一下吗。另外，为什么要使用两个jquery库？请尝试console.log（data）
。。你得到了什么？您还可以使用浏览器开发工具（chrome F12）分析XHR流量，该流量可能会显示可能发生的任何错误。您的输入既不包含id，也不包含search\u term
name属性。通过PHP检查错误并检查控制台。表单输入元素应该有一个名称。PHP代码在哪里？你能在你的问题中修改一下吗。另外，为什么要使用两个jquery库？请尝试console.log（data）
。。你得到了什么？您还可以使用浏览器开发工具（chrome F12）分析XHR流量，这可能会显示可能发生的任何错误。拜托，Ram-您知道只有代码的答案是错误的答案。：）我确实在这里和那里发表了评论-但是说实话-我的心现在真的不在里面。很抱歉听到这个消息。我想我最好添加一些注释-你是对的，当然，只有代码的答案是badHi那里非常感谢你的答案，回来，但是由于某些原因，它现在仍然不起作用。拜托，Ram，你知道只有代码的答案是错误的答案我确实在这里和那里发表了评论，但是说实话，我的心现在真的不在里面。很抱歉听到那只公羊。我想我最好加上一些注释-你