در آموزش های قبل گفته شد که چگونه می توان اطلاعات یک فرم را با متد post برای یک فایل php ارسال کرد و نتایج حاصل از پردازش آنها را بدون رفرش شدن صفحه به کاربر نشان داد،
حالا یه خورده از تئوری فاصله می گیریم و کدی کاربردی رو که به کمک اون بدون استفاده از کتابخانه های حجیم جی کئوری (jquery) و دردسرهاش،
تنها بر مبنای آژاکس، اطلاعات یک فرم رو به صورت پیشرفته ارسال کنیم و علاوه بر اون، حالت در حال پردازش یا loading رو هم با تصویر و متن نشان دهیم.
برای ارسال و دریافت اطلاعات از یک فرم html به توابعی نیاز داریم که علاوه بر روش های عادی ajax، بتونیم پردازش و کنترل بیشتری بر روی فرایندها داشته باشیم؛
کد زیر نمونه تقریبا کاملی هست.
فایل php جهت دریافت درخواست آژاکسی
با استفاده از کدهای php زیر، مقادیر ارسال شده از درخواست مبتنی بر آژاکس را دریافت و خروجی را به عنوان پاسخ، ارسال می کنیم.
PHP:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$choose = $_POST['choose'];
$check = $_POST['check'];
echo "نام شما: $name <br />";
echo "پست الکترونیک شما: $email<br />";
echo "شماره انتخاب شده: $choose<br />";
echo "وضعیت تایید: $check<br />";
?>کد html و تنظیمات آژاکسی
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ارسال و دریافت اطلاعات </title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
label{
width:100px;
display:inline-block;
}
</style>
<script type="text/javascript">
//<![CDATA[
var div = 'showresult';
var loadingmessage = '<img src="loading.gif" alt="loading" height="16" width="16" /> لطفا کمی صبر کنید...';
function Ajaxrequest(){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
catch (e){
try{
// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
return false;
}
}
}
}
function formget(form, url) {
var poststr = getFormValues(form);
postData(url, poststr);
}
function postData(url, parameters){
var xmlHttp = Ajaxrequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
document.getElementById(div).innerHTML=loadingmessage;
}
if (xmlHttp.readyState == 4) {
document.getElementById(div).innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", parameters.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(parameters);
}
function getFormValues(formobj)
{
var str = "";
var valueArr = null;
var val = "";
var cmd = "";
for(var i = 0;i < formobj.elements.length;i++)
{
switch(formobj.elements[i].type)
{
case "text":
str += formobj.elements[i].name +
"=" + encodeURI(formobj.elements[i].value) + "&";
break;
case "textarea":
str += formobj.elements[i].name +
"=" + encodeURI(formobj.elements[i].value) + "&";
break;
case "select-one":
str += formobj.elements[i].name +
"=" + formobj.elements[i].options[formobj.elements[i].selectedIndex].value + "&";
break;
case "checkbox":
if(formobj.elements[i].checked == true){
str += formobj.elements[i].name +
"=" + formobj.elements[i].value + "&";
}
break;
}
}
str = str.substr(0,(str.length - 1));
return str;
}
//]]>
</script>
</head>
<body>
<form action="#">
<label for="name">نام: </label>
<input id="name" type="text" name="name" size="20" value="webgoo" />
<br /><br />
<label for="email">پست الکترونیک: </label>
<input id="email" type="text" name="email" size="20" value="info[at]webgoo.ir" />
<br /><br />
<label for="choose">انتخاب شماره: </label>
<select name="choose" id="choose">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br /><br />
<label for="check">تایید: </label>
<input type="checkbox" name="check" id="check" value="تایید شده" />
<br />
<input type="button" name="Send" value="ارسال" onclick="formget(this.form, 'ajax-post-form.php');" />
</form>
<div id="showresult"></div>
<hr />
اطلاعات فرم با استفاده از ترکیب آژاکس و جاوا اسکریپت به سرور ارسال می شوند.
</body>
</html>