كيف تجعل زر search متفاعل مع قاعدة البيانات بالجافا سكربت

محمد امين11 · 13 سبتمبر 2021

كيف يمكن برمجة زر البحث search في الجافاسكريبت من خلال استخدام AJAX؟ بحيث يتم إعادة النتيجة أو الاقتراحات إلى المستخدم من قاعدة البيانات عند الكتابة بداخل حقل ما؟

Hassan Hedr · 13 سبتمبر 2021

يجب توضيح سؤالك وتوضيح تفاصيل أكثر ليتمكن زوار الموقع من مساعدتك،

أفترض أنك تريد تضمين حقل ادخال لجملة بحث وزر ينفذ أمر بحث عن بيانات ما في قاعدة البيانات، لتنفيذ هذه العملية يوجد قسمان:

الواجهة الامامية: مسؤوليتها جمع المدخلات من المستخدم (في هذه الحالة جملة البحث) وإراسلها إلى الخادم ليقوم بمعالجتها، يمكن استخدام العنصر form لهذا الغرض وارسال البيانات عبر طلب بالطريقة POST

<form action="/" method="post">
  <label for="term">ادخل جملة البحث:</label>
  <input id="term" type="text" name="term">
  <input type="submit" value="بحث">
</form>

الواجهة الخلفية: مسؤوليتها تلقي طلبات البحث واستخراج جملة البحث منها وتنفيذ استعلام ما بقاعدة البيانات عن هذه الجملة، ثم طباعة وارسال النتائج على الشكل الذي يرغب به العميل، سنفترض انك تستخدم PHP ستقوم بالتالي

// استخراج جملة البحث
$term = $_POST['term']

// اتصال بقاعدة البيانات
$conn = new mysqli($servername, $username, $password, $dbname);

// البحث في قاعدة البيانات
$result = $conn->query('SELECT * FROM users WHERE name='.$term);

if ($result->num_rows > 0) {
  // طباعة النتائج  
  echo "نتيجة البحث:" . "<br>";

  while($row = $result->fetch_assoc()) {
    echo "رقم المستخدم: " . $row["id"]. " - اسم المستخدم: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
  }
} else {
  echo "لا يوجد مستخدمين بهذا اللإسم";
}

$conn->close();

Sam Ahw · 13 سبتمبر 2021

يجب أن توضّح سؤالك وعلى الأقل ذكر لغات البرمجة المستخدمة في مشروعك غير الجافا سكريبت وماهو نوع قواعد البيانات الذي تستخدمه. وإلا ستحصل على إجابات غير مكتملة أيضاً.

يمكنك استخدام AJAX مع الحدث onkeyup في الجافاسكريبت لإرسال الكلمات التي يتم إدخالها بحقل البحث إلى الخادم وإجراء البحث عنها ثم إعادة النتيجة إلى المستخدم:


<html>
<head>
<script>
function showResult(str) {
  if (str.length==0) {
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

كيف تجعل زر search متفاعل مع قاعدة البيانات بالجافا سكربت

السؤال

محمد امين11

2 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

Sam Ahw

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية