jquery+ajax+php实现搜索功能

最新推荐文章于 2023-07-01 19:45:10 发布

less_cold

最新推荐文章于 2023-07-01 19:45:10 发布

阅读量6.4k

点赞数 1

分类专栏： ajax和php

本文链接：https://blog.csdn.net/less_cold/article/details/52353620

版权

ajax和php 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>搜索</title>
<script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>
<link href="pagebar.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="bootstrap.css" type="text/css"/>
<script src="bootstrap.min.js"></script>
</head>
<html lang="en">
<div class="container">
<div><input type="text" id="gover_search_key" placeholder="请输入内容进行搜索"/>
<button type="submit" οnclick="search()">搜索</button>
</div>
<div id="container" class="rows">
</div></div>
<script type="text/javascript">
function search(){
	var keyword=$("#gover_search_key").val();
	$.ajax({
		type:"GET",
		url:'search.php', 
		dataType:"json", 
		data:{'keyword':keyword},
		success: function (data) {
		//alert("test");
				var html='';
				var path1=eval(data)[0];
				inum=eval(data)[4][0];
				for(i=0;i<inum;i++){
				  html = html+'<div class="col-md-3 text-center"><img src="'+eval(data)[0][i]+'"style="height:200px,width:200px"/><p>'+eval(data)[2][i]+'</p></div>';
				  }
				 $("#container").html(html);
					
		}
	}
	)
}
</script>
</html>

php代码

<?php
header('Content-type:text/json; charset=utf-8');
@ $db = mysqli_connect('localhost','root','');
mysqli_query($db,"set names utf8;");
mysqli_select_db($db,'mpicture');//找到数据库mpicture
if(mysqli_connect_errno()){
 echo "Error:Could not connect to mysqli database.";
 exit;
}
$keyword=$_GET['keyword'];
$q="SELECT count(*) FROM picture where title like '%$keyword%'";
$result1 = mysqli_query($db,$q);
$row1 = mysqli_fetch_array($result1);
$allnum=$row1[0];
//echo $allnum;
$k="SELECT * FROM picture where title like '%$keyword%';";//对表picture进行选择
$result = mysqli_query($db,$k);//执行$k的mysql语句，并赋给result
$rownum = mysqli_num_rows($result);//获取result的数据数量
$picture=array(array());
for($i=0;$i<$rownum;$i++){
    $row = mysqli_fetch_assoc($result);//获取result的一条数据
	$picture[0][$i]= $row['path1'];//获得缩略图的路径
	$picture[1][$i]= $row['path2'];//获得全图的路径
	$picture[2][$i]= $row['title'];//获得文字描述
	$picture[3][$i]= $row['Id'];//获得id
}
$picture[4][0]=$allnum;
echo json_encode($picture);
?>