KT客棧

Web程式交流 & 聊幹畫 / 心情手札

【MySQL】AJAX實作(jQuery)-站內搜尋(二)

by on in , , ,
*MySQL  AJAX實作(javascript)-站內搜尋





➤AJAX實作(jQuery)-站內搜尋
有別於在前端頁搭配javascript的方式來撈取後端MySQL資料達成AJAX非同步處理的效果。這一次要在前端頁搭配jquery的方式來達成。

 我們可以在jQuery的事件當中寫入按下鍵盤keydown(做某個動作(ex.改變欄位顏色))，手放開鍵盤時keyup(再做另一個動作(ex.叫出後端頁內容))。當然也還可以透過jQuery來控制css的選擇器呦!
PS.使用jQuery記得先去載入其官網的CDN。

 而jQuery起手式通常是這樣
文件準備
$(document).ready(function() { 
   //寫入您要執行的動作
});          
使用ajax將參數傳給後端來做回應
   $.ajax({
        type : "GET或POST",
        url : "xxx.php",
        data : {
         name : $("#username").val(), //填入id名，存入參數
        },
       dataType : 'html' //設定該網頁回應的為 html 格式
      }).done(function(data) {
        //成功會秀出
      }).fail(function(jqXHR, textStatus, errorThrown) {
        //失敗會秀出
  });


javascript傳值給後端主要以紅字的參數丟給後端
  xmlhttp.open("GET", "ajax.php?name="+str, true);
jQuery傳值給後端主要以紅字的參數丟給後端
  data : {
     name : $("#username").val(), 
   },


下面短片中，展示一下呈現結果的畫面(其實是懶得再截圖啦...😄)。
*開始到45秒: 展示這次ajax作品的效果，以及在瀏覽器按F12來查看console.log。

 *45秒-1分鐘: 上次刻意沒放的性別欄位，各位若眼尖的話應該有發現性別欄位的值我是使用0、1的enum型態來判斷(用M、F或是Y、N等也可以)。所以您必需在倒出資料時做個if判斷來秀出"男"或"女"。

 *1分鐘後至結束: 
Q:如何解決輸入名字後，再清除欄位值後會出現Fatal error: Uncaught Error: Call to a member function fetch_assoc() on null in  的問題?
A:加入if else判斷式來解決。亦即如果if這個變數(資料庫物件)的值不存在，就顯示"請輸入文字"，要不然else就使用迴圈把資料給倒出來。

 當然，若您是寫上ini_set('display_errors', 'off'); 也能解決，但似乎治標不治本阿，這只是把展示錯誤問題給關掉。


這次CSS我有加入點小動畫和clip_path屬性做色塊變形(在.panel1、.panel2)。jQuery則是透過按下鍵盤時讓欄位變色、右邊空白處呼叫fontawesome的讀取icon，當手離開鍵盤時後端資料就會被呼叫出來。
#前端頁jq_ajax1.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX-jquery站內搜尋</title>
<style>
  h1, h2, h3, h4{ font-family: '微軟正黑體';}
  h4{color: white; font-weight: bold;  text-shadow: black 0.1em 0.1em 0.2em}
  table {
    border-collapse: collapse;
    text-align: center;
    margin: 20px 0 0 0px; /*外距:上右下左*/
    box-shadow: 0px 15px 22px rgba(0, 0, 0, 0.2);
    width: 100%;
  }
  th {
    background-color: #145374;
    color: #ffffff;
    border : 2px solid black;
    padding: 5px;
  }
  td {
    color: #5b3202;
    border : 3px solid black;
    padding: 5px;
  }
  .section-1 {
  padding-top:  50px;
  }
  .box1{
    height: 600px;
    width: 100%;
    border: 4px solid #132571;
    border-radius: 5px;
  }
  .panel1{
    position: relative;
    background-color: #b8d5f7;
    clip-path:polygon(0% 0%, 0% 60%, 100% 100%, 80% 20%); /*左上.左下.右下.右上*/
    /*clip-path:inset(10px 20px 30px 10px round 20px 5px 50px 0); */
    padding-top: 120px;
    text-align:justify;
  }

  .panel1 > .panel1_sblock{
    margin-left: 80px;
  }

  .panel2{
    padding-top: 30px;
    position: relative;
    -webkit-animation: ktmove 1; /* Safari 4.0 - 8.0 蘋果用的*/
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 蘋果用的*/
    animation: ktmove 1;
    animation-duration: 2s;

    animation-iteration-count:1;/*只跑一次*/
    -webkit-animation-iteration-count:1;
    animation-fill-mode: forwards; /*停留在最後一影格 */
    -webkit-animation-fill-mode: forwards;
  }

  /* Safari 4.0 - 8.0 蘋果用的*/
  @-webkit-keyframes ktmove {
    from {top: 0px;}
    to {top: 100px;}
  }

  @keyframes ktmove {
    from {top: 0px;}
    to {top: 100px;}
  }
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body align="center">
<section class="section-1">
  <div class="container alert ">
    <div class="row box1">
      <div class="col-md-5 panel1">
          <div class="panel1_sblock">
              <h4>AJAX-站內搜尋</h4>
              <input class="search" name="username" id="username" >
              <p>請輸入您要查詢的名字</p>
          </div>
      </div>
      <div class="col-md-7 panel2">
        <div class="text-center">
          <!-- loading icon旋轉小圖示 -->
          <div id="load"></div>
          <!-- 呼叫的後端資料 -->
          <div id="result">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUQkj6NwE1eHB_c4e15DF3-XVDJ8zSV_0MEVjfjm-q-Jp5FlQOWZ7Y7kxteky6NoC8yOyVXPqZ3sqXqCUSreexsK3RjioAaCFOooThTXW1JNy577JG6i4aHi5lE6sXtvdtUV-B3IwgWaA/s1600/%25E8%25B3%25BD%25E4%25BA%259E%25E4%25BA%25BA%25E5%2598%259F%25E5%2598%25B4.jpg">
            <br>
            <b>查詢結果會秀出在這邊呦~~棧友們</b>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function() { //文件準備
  $("input.search").keydown(function(){ //填上標籤選擇器後的search，事件為鍵盤按下
    $("input.search").css("background-color", "#d3f9fc"); //鍵盤按下，欄位就變色
    $("#load").html('<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>'); //填上id選擇器，呼叫loading icon
  });
      $("input.search").keyup(function() {
        $("input.search").css("background-color", "#ffffff"); //鍵盤彈開，欄位就變白色
        $("#load").html(''); //清除 loading icon
          //使用ajax將傳給後端來做回應
          $.ajax({
            type : "GET",
            url : "backjq_1.php",
            data : {
              txt : $("#username").val(), //將id存入txt參數，傳給後端做接收
            },
            dataType : 'html' //設定該網頁回應的會是 html 格式
          }).done(function(data) {
            //成功會秀出
            if(data == ""){
              $('#result').hide();
            }else{
              $('#result').html(data).show();
            }
            console.log(data);
          }).fail(function(jqXHR, textStatus, errorThrown) {
            //失敗會秀出
            alert("有錯誤，請至 console log查看原因");
            console.log(jqXHR.responseText);
          });
      });
});
</script>
</body>
</html>

資料庫那邊請使用上一篇(點我)的資料庫和資料表。如果這邊看到巢狀判斷式還會覺得頗吃力的棧友們，建議您還是到我的基礎PHP學習那邊查看，會比較有概念喲!😄
#後端頁backjq_1.php
<?php
$host = "localhost";
$username = "root";
$passwd = "1234";
$database = "ktmysqlclass";
//建立資料庫物件
$kt_conn = new mysqli($host, $username, $passwd, $database);
if ($kt_conn -> connect_error){
  echo "連結mysql資料庫失敗";
}
else{
  $kt_conn->query("SET NAMES 'utf8'");
  //連結mysql資料庫成功，語系設為utf8
}

//接收從前端傳來的內容，撈取資料後透過ajax丟回前端
if($_GET['txt'] != "") {
  @$n = $_GET['txt'];
  /*從score資料表，撈取所有欄位(用*米字號)，當所傳來的值是字首、中、尾有符合(LIKE)資料name欄位的名字，
    就會呼叫出來，並且透過id欄位來設定為降序(ASC是升序(小跑到大)、DESC是降序(大跑到小))*/
  $sql = "SELECT * FROM score WHERE name LIKE '%$n%' ORDER BY id ASC";
  $score_result = $kt_conn->query($sql);
}

echo "<table border='1'>
      <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>性別</th>
        <th>國文</th>
        <th>英文</th>
        <th>數學</th>
        <th>電子信箱</th>
      </tr>";

  if(!@$score_result) {
    echo "親愛的棧友們~請輸入名字";
  }
  else{
    while($row = @$score_result->fetch_assoc() )
    {
        echo "<tr>";
          echo "<td>" . $row['id'] . "</td>";
          echo "<td>" . $row['name'] . "</td>";
          if ($row['sex'] == "1") {
            echo "<td>" .'男'. "</td>";
          }else {
            echo "<td>" .'女'. "</td>";
          }
          echo "<td>" . $row['chinese'] . "</td>";
          echo "<td>" . $row['english'] . "</td>";
          echo "<td>" . $row['math'] . "</td>";
          echo "<td>" . $row['email'] . "</td>";
        echo "</tr>";
    }
    echo "</table>";
  }

//關閉資料庫
$kt_conn->close();
?>






By -
標籤： , , ,

1 則留言:

  1. Unknown2022年3月31日 凌晨1:44

    請問資料量過大 我要怎麼讓她使用滾輪往下滑

    回覆刪除

訂閱： 張貼留言 (Atom)

@templatesyard