آموزش AJAX مقدماتی قسمت دوم

خوب نبودخوبخیلی خوبعالیخیلی عالی (5٫00 از 2 رای)

آموزش AJAX مقدماتی قسمت دوم

ارسال داده به واسطه Ajax

می‌توانیم مقادیری را به واسطه Ajax برای صفحه php خود ارسال کنیم، اما به چه صورت؟

می‌توانیم از کویری استرینگ پارامتر استفاده کنیم. پارامتری به نام، name را به darkoobweb.php ارسال می‌کنیم، در darkoobweb.php چک می‌کنیم، اگر پارامتر ست شده بود و اگر خالی نبود، چک کن اگر نام دریافتی ما با یکی از نام‌های درون آرایه برابر بود رنگ آن ار تغییر بده.
به این شکل
Index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax</title>
<script>

function ajaxFunction() {

var xmlHttpReq = new XMLHttpRequest();

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

document.getElementById('placeForAjax').innerHTML = xmlHttpReq.responseText;

}
};

xmlHttpReq.open('GET', 'darkoobweb.php?name=Hamdam', true);
xmlHttpReq.send();
}

</script>
</head>
<body>

<h2>Darkoob web Ajax tutorial</h2>

<div id="placeForAjax"></div>

<button onclick="ajaxFunction();">Click me to see ajax</button>

</body>
</html>

Darkoobweb.php

<?php

echo '<p>Hello Ajax</p>';
echo '<p>I come from darkoobweb.php </p>';

$myFriends = array('Hooman', 'Hamdam', 'Shabbo', 'Nima', 'Ashkan');

if (isset($_REQUEST['name']) && !$_REQUEST == '') {

foreach ($myFriends as $friend) {

if ($_REQUEST['name'] == $friend) {
echo '<p class="myFriend" style="color:slateblue;">' . $friend . '</p>';
} else {
echo '<p class="myFriend">' . $friend . '</p>';
}
}

echo 'This is our name from ajax = ' . $_REQUEST['name'];
} else {
echo 'Your value is not set or empty';
}

یک input ایجاد می‌کنیم تا کاربر نام دلخواه خود را داخل آن بنویسد و وقتی نوشتن تمام شد اگر آن نام در آرایه ما وجود داشت با رنگ متفاوتی چاپ شود.
Darkoobweb.php

<?php
$myFriends = array('Hooman', 'Hamdam', 'Shabbo', 'Nima', 'Ashkan');

if (isset($_REQUEST['name']) && !$_REQUEST == '') {

foreach ($myFriends as $friend) {

if ($_REQUEST['name'] == $friend) {
echo '<p class="myFriend" style="color:slateblue;">I found ' . $friend . '</p>';
}
}

echo 'This is our name from ajax = ' . $_REQUEST['name'];
} else {
echo 'Your value is not set or empty';
}

Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax</title>
<script>

function ajaxFunction() {

var xmlHttpReq = new XMLHttpRequest();

var nameFromUser = document.getElementById('name').value;

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

document.getElementById('placeForAjax').innerHTML = xmlHttpReq.responseText;

}
};

xmlHttpReq.open('GET', 'darkoobweb.php?name='+nameFromUser, true);
xmlHttpReq.send();
}

</script>
</head>
<body>

<h2>Darkoob web Ajax tutorial</h2>

<button onclick="ajaxFunction();">Click me to see ajax</button>
<input type="text" id="name" value="" onkeyup="ajaxFunction();">

<div id="placeForAjax"></div>

</body>
</html>

ajaxpic3
به شکل بهتری هم می‌توانیم بنویسیم، چطور؟ از this استفاده کنیم .

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax</title>
<script>

function ajaxFunction(value) {

var xmlHttpReq = new XMLHttpRequest();

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

document.getElementById('placeForAjax').innerHTML = xmlHttpReq.responseText;

}
};

xmlHttpReq.open('GET', 'darkoobweb.php?name='+value, true);
xmlHttpReq.send();
}

</script>
</head>
<body>

<h2>Darkoob web Ajax tutorial</h2>

<button onclick="ajaxFunction();">Click me to see ajax</button>
<input type="text" value="" onkeyup="ajaxFunction(this.value);">

<div id="placeForAjax"></div>

</body>
</html>

مقالات پیشنهادی دارکوب وب

خبرنامه دارکوب وب

با عضویت در خبرنامه دارکوب وب، هر هفته یک ایمیل از آخرین مقالات و تخفیفات هیجان انگیز ما مطلع شوید.

پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

READ  آموزش AJAX مقدماتی قسمت سوم