در این آموزش قصد داریم آموزش ایجاد سرچ AJAX در PHP را به شما آموزش داده و بتوانید با هر کاراکتر در اینپوت ، مقادیر مشابه در دیتابیس خود را استخراج کرده و در خروجی همان صفحه چاپ کنید.
هنگام رسیدگی به درخواست ها با استفاده از جاوا اسکریپت، به عنوان مثال با Fetch API، ممکن است نیاز داشته باشید که با response headers سروکار داشته باشید.
بسیاری از APIها از اطلاعات هدر برای به اشتراک گذاری داده های مفید استفاده می کنند.
میدانیم که میتوانیم در درخواست های httpRequest , heard تنظیم کرده و ارسال کنیم. برای مثال دو صفحه بسازید.
/test.html وکد زیر را در آن وارد کنید :
<![CDATA[
<div class="row">
<br>
<button type="button" onclick='para()'>search</button>
</div>
<br>
<div id="Result">
</div>
<script>
function para(){
fetch('https://trainingsitedesign.ir/fetch/test.php')
.then((response) => response.text())
.then((res) => document.write(res));
}
</script>
]]>
همانطور که میبینید، با دستور fetch به صفحه ثانویه درخواست زدیم و متن آن صفحه را فراخوانی کرده ایم.
حال یک صفحه test.php بسازید و کد زیر را در آن بنویسید:
<![CDATA[
<script>
const myHeaders = new Headers();
myHeaders.append('Content-Type', 'parsa ghorbanian');
const myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
};
const myRequest = new Request('comment', myInit);
const myContentType = myRequest.headers.get('Content-Type');
document.write(myContentType)
</script>
]]>
همانطور که میبینید، در صفحه ثانویه ما یک هدر ست کرده بودیم و با ارسال درخواست آن هدر را استخراج کردیم.
این حالت اول که بررسی کردیم.
اما حالت بعدی…
اینست که یک متد در url ارسال کنیم.
ابتدا یک صفحه index.html بسازید و کد های زیر را در آن قرار دهید.
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body data-rsssl=1>
<div class="row">
<input type="text" id="UserName" required
placeholder="your:name" onkeyup="MyLoad();"
style="width:300px; height:50px;border:2px solid black">
</div>
<div class="row">
<br>
</div>
<br>
<div id="Result">
</div>
<script>
function MyLoad() {
const xhttp = new XMLHttpRequest();
var MyInput = document.getElementById("UserName").value;
var result = document.getElementById("Result");
if (MyInput == "") {
result.innerHTML = "pooor kon!";
} else {
xhttp.onload = function () {
result.innerHTML = this.responseText;
}
xhttp.open("GET", "reg.php?UserName=" + MyInput);
xhttp.send();
}
}
</script>
</body>
</html>
]]>
در کد بالا با هر بار onClick در input فانکشن MyLoad فراخوانی شده، مقدار محتویات اینپوت را گرفته و با تکنولوژی Ajax در جاوا اسکریپت و با متد GET , آن را به صفحه Reg.php ارسال میکند.
لطفا یک صفحه به نام Reg.php بسازید و محتویات زیر را در آن وارد کنید.
<![CDATA[
<?php
$para = $_GET['UserName'];
$servername = "localhost";
$username = "wwwtrain_fetch";
$password = "123654";
$dbname = "wwwtrain_fetch";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, fullName, email FROM user WHERE fullName like '%$para%'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<table border='3'><tr><th>ID</th><th>Name</th><th>email</th></tr>";
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr><td>".$row["id"]."</td><td>".$row["fullName"]."</td><td> ".$row["email"]."</td></tr>";
}
echo "</table>";
} else {
echo "0 results";
}
$conn->close();
?>
]]>
همانطور که در کد php بالا مشاهده میفرمایید، اطلاعات ارسال شده از صفحه قبل را در متغیری به نام $para ذخیره کرده و آن را با like در دیتابیس مربوطه کوئری زدیم و با fetch_assoc توانستیم هر سطری که شباهت با ورودی کاربر دارد را در خروجی table چاپ کنیم.
این یک کد بسیار ساده و در عین حال بسیار کاربردی در زبان PHP میباشد.
یادتان نرود تا زمانیکه به جاوا اسکریپت مسلط نشوید، نمیتوانید بک اند کار حرفه ای شوید. کلاس های آموزش فرانت اند حرفه ای ما را از دست ندهید.
در آدرس زیر میتوانید لینک دموی این دستور را بصورت آنلاین مشاهده بفرمایید.
دومو سرچ PHP
همین مثال بالا را با fetch بازنویسی میکنیم. یک صفحه test.html بسازید و محتویات زیر را داخل آن بنویسید.
<![CDATA[
<div class="row">
<br>
<button type="button" onclick='para()'>search</button>
</div>
<br>
<div id="Result">
</div>
<script>
function para(){
fetch('https://trainingsitedesign.ir/fetch/test.php?test=parsa_ghorbanian&page=1')
.then((response) => response.text())
.then((json) => document.write(json));
}
</script>
]]>
و در صفحه test.php آن را دریافت و پردازش کرده و میتوان در خروجی نمایش داد.
<![CDATA[
<?php
$para = $_GET['test'];
echo "$para";
?>
]]>
پیشنهاد میکنیم حتما مقاله آموزش کامل fetch , ajax را مطالعه بفرمایید.
از وبلاگ پرنیان
امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.
من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥
