jQuery+AJAX+PHP+MySQL數據庫開發搜索功能，無跳轉無刷新搜索。

時間 2019-11-08

標籤 jquery+ajax+php+mysql jquery ajax php mysql 數據庫開發搜索功能刷新欄目 JQuery 简体版

原文原文鏈接

知識點：ajax提交表單，php查詢數據庫，php返回json數組，javascript遍歷輸出json數組

演示：

一、當表單無輸入任何關鍵詞的時候，返回"請輸入關鍵詞..."javascript

二、當表單輸入的關鍵詞查詢無果的時候，返回"無結果"php

三、當表單輸入的關鍵詞查詢有結果，則返回結果。css

表單頁面

index.htmlhtml

<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AJAX搜索</title>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        h2{
            text-align: center;
        }

        #search_con{
            width: 300px;
            margin:10px auto;
        }

        #keywords{
            width: 300px;
            margin-top: 10px;
            height: 30px;
        }

        #btn{
            width: 305px;
            height: 35px;
            margin-top: 10px;
        }

        #search_result{
            width: 300px;
            margin:30px auto;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                var inputVal = $("#keywords").val();
                $.ajax({
                    type:"GET",
                    url:"search.php?keywords=" + inputVal,
                    dataType:"json",
                    success:function(data){
                        $(function(){
                            var con="";
                            $.each(data,function(i,data){
                                if (data.result == "0") {
                                    con+="<p>請輸入關鍵詞...</p>"
                                }else if(data.result == "1"){
                                    con+="<p>無結果</p>"
                                }else{
                                    con+="<p>"+data.title+"</p>"
                                }
                            });
                                console.log(con);
                                $("#search_result").html(con);
                        })
                        return false; 
                    }
                })
            })
        })
    </script>
</head>
<body>
<!-- 表單 -->
    <div id="search_con">
    <form action="##">
        <h2>AJAX+PHP+MySQL搜索</h2>
        <input type="text" name="keywords" id="keywords" placeholder="搜索關鍵詞..."><br/>
        <button name="button" type="button" id="btn">搜索</button>
    </form>
    </div>
    <!-- 搜索結果顯示區域 -->
    <div id="search_result"></div>
</body>
</html>

服務端

search.phpjava

<?php
header("Content-type:application/json");
//定義參數
$keywords = $_GET["keywords"];
//獲取數據庫配置
require_once("config.php");
//鏈接數據庫
$con = mysql_connect($host,$username,$password);
  if (!$con)
    {
      die('鏈接數據庫失敗，失敗緣由：' . mysql_error());
    }
  //設置數據庫字符集  
  mysql_query("SET NAMES UTF8");
  //查詢數據庫
  mysql_select_db($db, $con);
  //過濾關鍵詞左右空格
  $keyword = trim($keywords);
  if (empty($keyword)) {
  //若是關鍵詞爲空，則返回result=0
  echo "[{\"result\":\"0\"}]";
    }else{
      $result = mysql_query("SELECT * FROM $tb WHERE title like '%$keyword%' ORDER BY ID DESC");
      $num = mysql_num_rows($result);
      if ($num) {
        $search_result = array();
          while($row = mysql_fetch_array($result)){
              $search_result[] = $row;
          }
          // 將數組轉成json格式
          echo json_encode($search_result);
  
  }else{
    //若是查詢無果，則返回result=1
    echo "[{\"result\":\"1\"}]";
  }
}
?>

數據庫配置

config.phpmysql

<?php
//配置文件 - BY TANKING
$host="localhost";
$username="root";
$password="root";
$db="test";
$tb="datalist";
?>

數據庫結構

數據庫名：test
表名：datalist
字段：id,title,url
字段解析：
id - 自增ID
title - 標題
url - 頁面連接jquery

做者：TANKING
2018-7-12ajax

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。