mtnam1372
دوشنبه 04 شهریور 1392, 13:46 عصر
سلام دوستان با توجه به درخواست ها و سوالات بسیار پیرامون ارسال فرم ها با استفاده از اجاکس و قولی که به یکی از بچه ها داده بودم یه اموزش خیلی کلی پیرامون این موضوع رو خواهیم داشت
-- پیش نیاز-شما باید به اندازه کافی جاوا اسکریپت بلد باشین
خوب بدون توضیحات اضافی
وقتی فرمی ارسال میشه ما به یه صفحه 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 />";
?>
خوب اصل مطلب مون و اون هم صفحه فرم ماست
<!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> html</title>
<!--mtnam1372-->
<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=loadingmess age;
}
if (xmlHttp.readyState == 4) {
document.getElementById(div).innerHTML=xmlHttp.res ponseText;
}
}
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>
توضیح:
- در کد بالا اطلاعات به فایلی به نام ajax-post-form.php ارسال و نتایج از آن دریافت می شود؛ در طی این فرایند متغیر loadingmessage در حالت بین صفر تا 4 از xmlHttp.readyState اجرا می شود و یک پیام مبنی بر در حال پردازش به همراه تصویر نشان داده می شود.
- تابع Ajaxrequest برای ارسال درخواست آژاکسی است که با مرورگرهای مختلف سازگار شده و نهایتا اگر سیستم کاربر نتواند درخواست را ارسال کند پیامی به او مبنی بر پشتیبانی نکردن مرورگرش از آژاکس نشان داده خواهد شد.
- متدی که در کد اسفاده شده، متد post است.
- تابع getFormValues اطلاعات فرم را پردازش و در خود نگهداری می کند و در تابع formget مجددا به عنوان پارامتر در تابعی دیگر با نام postData و متغیر poststr ذخیره می شود که از آن در قسمت xmlHttp.send جهت ارسال اطلاعات استفاده می کنیم.
- برای سازگاری و جلوگیری از مشکلات احتمالی در ارسال اطلاعات فرم از طریق آژاکس با زبان فارسی، از تابع encodeURI استفاده کرده ایم، این تابع مقادیر فیلدها را به صورت کاراکترهای استاندارد utf8 تبدیل می کند.
هر چند در نگاه اول ممکن است کمی پیچیده به نظر برسد، اما اگر از ابتدا و کم کم با جاوا اسکریپت و آژاکس آشنا شویم، خواهیم دید که آنقدر هم سخت نیست؛ از طرفی نیازی نیست که حتما تسلط کامل روی ajax داشته باشیم، همین که بتوانیم نحوه پردازش کدها و ایجاد تغییرات دلخواه را بیاموزیم، به نظر کافی است.
چطوری ساده فرم هامون رو با جاوا اسکریپت اجاکسی کنیم:؟
میتونید این کد رو کپی واستفاده کنید کافیه کد های جاوا اسکریپت رو در زیر فرم هاتون در هرجای برنامه تون کپی پست کنید و تنها جایی که نیاز به تغییر داره رویداد ان کلیک هست که در اون دوتا پارامتر داریم که یکیش صفحه ای هست که قراره پردازش در اون انجام بشه شما باید اونو تغییر بدین به همین سادگی و به همین خوشمزگی
<input type="button" name="Send" value="ارسال" onclick="formget(this.form, 'اینجا نام و پسوند صفحه پردازش رو بنویسید');" />
خوب حالا در برنامتون باید یک دایو درست کنین که پاسخ پردازش در اون چاپ بشه
<div id="showresult"></div>
تموم شد شما فرم معمولی خودتون رو با با جاوا اسکریپت به اجاکس تبدیل کردین:لبخندساده::تشویق:
-- پیش نیاز-شما باید به اندازه کافی جاوا اسکریپت بلد باشین
خوب بدون توضیحات اضافی
وقتی فرمی ارسال میشه ما به یه صفحه 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 />";
?>
خوب اصل مطلب مون و اون هم صفحه فرم ماست
<!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> html</title>
<!--mtnam1372-->
<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=loadingmess age;
}
if (xmlHttp.readyState == 4) {
document.getElementById(div).innerHTML=xmlHttp.res ponseText;
}
}
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>
توضیح:
- در کد بالا اطلاعات به فایلی به نام ajax-post-form.php ارسال و نتایج از آن دریافت می شود؛ در طی این فرایند متغیر loadingmessage در حالت بین صفر تا 4 از xmlHttp.readyState اجرا می شود و یک پیام مبنی بر در حال پردازش به همراه تصویر نشان داده می شود.
- تابع Ajaxrequest برای ارسال درخواست آژاکسی است که با مرورگرهای مختلف سازگار شده و نهایتا اگر سیستم کاربر نتواند درخواست را ارسال کند پیامی به او مبنی بر پشتیبانی نکردن مرورگرش از آژاکس نشان داده خواهد شد.
- متدی که در کد اسفاده شده، متد post است.
- تابع getFormValues اطلاعات فرم را پردازش و در خود نگهداری می کند و در تابع formget مجددا به عنوان پارامتر در تابعی دیگر با نام postData و متغیر poststr ذخیره می شود که از آن در قسمت xmlHttp.send جهت ارسال اطلاعات استفاده می کنیم.
- برای سازگاری و جلوگیری از مشکلات احتمالی در ارسال اطلاعات فرم از طریق آژاکس با زبان فارسی، از تابع encodeURI استفاده کرده ایم، این تابع مقادیر فیلدها را به صورت کاراکترهای استاندارد utf8 تبدیل می کند.
هر چند در نگاه اول ممکن است کمی پیچیده به نظر برسد، اما اگر از ابتدا و کم کم با جاوا اسکریپت و آژاکس آشنا شویم، خواهیم دید که آنقدر هم سخت نیست؛ از طرفی نیازی نیست که حتما تسلط کامل روی ajax داشته باشیم، همین که بتوانیم نحوه پردازش کدها و ایجاد تغییرات دلخواه را بیاموزیم، به نظر کافی است.
چطوری ساده فرم هامون رو با جاوا اسکریپت اجاکسی کنیم:؟
میتونید این کد رو کپی واستفاده کنید کافیه کد های جاوا اسکریپت رو در زیر فرم هاتون در هرجای برنامه تون کپی پست کنید و تنها جایی که نیاز به تغییر داره رویداد ان کلیک هست که در اون دوتا پارامتر داریم که یکیش صفحه ای هست که قراره پردازش در اون انجام بشه شما باید اونو تغییر بدین به همین سادگی و به همین خوشمزگی
<input type="button" name="Send" value="ارسال" onclick="formget(this.form, 'اینجا نام و پسوند صفحه پردازش رو بنویسید');" />
خوب حالا در برنامتون باید یک دایو درست کنین که پاسخ پردازش در اون چاپ بشه
<div id="showresult"></div>
تموم شد شما فرم معمولی خودتون رو با با جاوا اسکریپت به اجاکس تبدیل کردین:لبخندساده::تشویق: