كيفية اضافة تعليق او موضوع في ajax

بدأه هالي الدهوكي في 5 سبتمبر 2012 · 4 رد · 3,088 مشاهدة · في قسم البرمجة بــ Javascript

#15 سبتمبر 2012 في 23:14 صاحب الموضوع

مرحبا يا اعضاء الكرام ...

طبعا انا لا اعرف شيئا عن ajax و لكني اعرف هي تابعة مكاتب jquery او javascript يعني تستعمل في javascript

مثلا بدي اضيف تعليق بدون تحديث الصفحة كيف يمكن ذالك ؟ اعرف هي الـ ajax تفعل هذا و عندي معلومات بسيطة عنها لكن هل يمكنكم شرح العملية لو سمحتم او عمل سكربت و كتابة خطوات في الملفات //1 //2 //3 //4 بهذا الشكل .

لانه الـ اجاكس لا يمل منها المستخدم لانه ليست مثل اضافة اعتيادية تضاف بشكل اسهل .

و شكرا ....

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#27 سبتمبر 2012 في 18:50

بسم الله الرحمن الرحيم

السلام عليكم

أولاً: بالنسبة لتقنية الــ AJAX فهى تعتمد على إستخدام لغة javaScript فى التخاطب مع السرفر بدون تحميل كامل الصفحة وعلى هذا يمكننا إستخدام لغة javaScript وملفات xml مباشراً ولكن مكتبة jQuery المبنية على javaScript توفر كائن يسمى ajax يعطيك تحكم أفضل فى تقنية الـ AJAX بالإضافة لسهولة الإستخدام والإبتعاد عن إحتمال حدوث أخطاء من عدم دعم بعض المتصفحات لكود معين فهذا الكائن يقوم بذلك عوضاً عنك .

ثانياً: ما نحتاجة لفهم هذا الكائن فى مكتية jQuery :

1- معرفة أساسيات التعامل مع مكتبة jQuery .

2- معرفة الكتابة بتقنية JSON وهى إختصار JavaScript Object Notation وهى تستخدم كإحدى طرق نقل البيانات كملفات الـ xml .

3- نحتاج أى من برامج السرفر المحلى لكى تعمل تطبيقات الـ AJAX لدينا على الجهاز .

وهذا مثال بسيط على إستخدام تقنية الـ AJAX بإستخدام مكتبة jQuery وهو عبارة عن إضافة تعليق على موضوع ما:

1- إنشئ ملف باسم indx.html وبه هذا الكود :

<!DOCTYPE html>
<html dir="rtl">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script  type="text/javascript" src="jquery-1.8.1.min.js"></script>
		<script  type="text/javascript" src="code.js"></script>
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
<body>
	<div align="right">
		<div id="userMSG"></div>
			<h1>مذكرة في أحكام التجويد</h1>
			<h3>المقدمة</h3>
			الحمد لله رب العالمين، خالق الخلق أجمعين، أرسل رسوله محمد صلى الله عليه وسلم، 
			بالهدى ودين الحق، وختم به النبوة والرسالة وأنزل معه القرآن العظيم والذكر الحكيم 
			نبراساً يضيء الشعلة في الظلمات وينير طريق الفكر والفقه. وآتاه من العلم مثله 
			وجعله رحمة للعالمين ومبلّغاً لشريعته بأكمل بيان وأحسن تعليم.
			<br>أما بعد: فهذه رسالة في علم التجويد تعتبر مرجعاً طيّباً لكل مسلم يريد أن 
			يجّود القرآن ويستشعر حلاوة التلاوة ويخرج الحروف والألفاظ من مخارجها الصحيحة. 
			وننصح لك أيها القارئ أن تراجع هذه الأحكام مع أهل الخبرة العالمين ب<font color="#800000">أحكام 
			التجويد</font>، فتلاوة القرآن وحفظه إنّما تأتي بالثمرة المرجوة منه عن طريق 
			التلقي والتوجيه ... وقد علّم النبي صلى الله عليه وسلم الصحابة القرآن الكريم كما 
			تلقاه من جبريل عليه السلام ولقَّنهم إياه بنفس الصفة وحثهم على تعليمها والقراءة 
			بها. ولذا يجب على المتعلم أن يتحرى الإتقان في القراءة وذلك بالتلقي عن المتقنين 
			الماهرين وإلا كان مخالفاً للسنة بقراءته للقرآن بغير ما أنزل. وعلى قارئ القرآن أن 
			يتلوه حق تلاوته، وحق تلاوته أن يشترك فيه : اللسان، والعقل، والقلب، فاللسان يرتل، 
			والعقل يترجم، والقلب يتعظ.
			<br>وإنني إذ أقدم هذا الجهد المتواضع آملاً أن أكون قد وفقت فيه، كما آمل أن يؤتي 
			هذا العمل ثماره المرجوة منه، فإن تم لي ذلك فهو منّة من الله تبارك وتعالى أحمده 
			عليها حمداً كثيراً، وإن لم أوفّق في ذلك فما هو إلا تقصير منّي أرجو له المعذرة من 
			الاخوة الدارسين والمغفرة من الله رب العالمين، إنه من وراء القصد وهو الهادي إلى 
			سواء السبيل.
			<br>فضل القرآن العظيم<p>القرآن الكريم هو كلام الله تعالى الذي أوحاه إلى نبيه 
			محمد عليه الصلاة والسلام فكان معجزة خالدة في صدق الدعوة وقوة الإقناع، والقرآن لا 
			تتقضّى عجائبه ولا يمله الإنسان مع كثرة التكرار. ومن الآيات التي تدل على فضله 
			والترغيب في قراءته: قوله تعالى :(<a href="#">إِنَّ الَّذِينَ يَتْلُونَ كِتَابَ 
			اللَّهِ وَأَقَامُوا الصَّلاةَ وَأَنْفَقُوا مِمَّا رَزَقْنَاهُمْ سِرّاً 
			وَعَلانِيَةً يَرْجُونَ تِجَارَةً لَنْ تَبُور</a>َ) (فاطر:29) .
			<br>ومن الأحاديث النبوية : فقد قال رسول الله صلى الله عليه وسلم :" ما اجتمع قومٌ 
			في بيت من بيوت الله يتلون كتاب الله ويتدارسونه بينهم إلا نزلت عليهم السكينة 
			وغشيتهم الرحمة وحفتهم الملائكة وذكرهم الله فيمن عنده ". وقال صلى الله عليه وسلم 
			:" البيت الذي يُقرأُ فيه القرآن يتراءى لأهل السماء كما يتراءى الكواكب لأهل الأرض 
			". وقال صلى الله عليه وسلم :" أفضل عبادة أمتي قراءة القرآن " . وقال صلى الله 
			عليه وسلم :" الذي ليس في جوفه شيء من القرآن كالبيت الخَرِب ".
			<br>وقال صلى الله عليه وسلم :" اقرءوا القرآن فإنّه يأتي يوم القيامة شفيعاً 
			لأصحابه ".
			<br>
		<div id="comments">

		</div>
		أضف تعليق :<br>
		<textarea id="newComment"></textarea><br>
		الاسم :<input type="text" id="name"><br>
		<a href="" id="insertComment">أضف التعليق الجديد</a>
	</div>
</body>
</html>

شرح الكود :

- تعربف وثيقة من نوع HTML5 .

- فى بداية الملف "فى الرأس" قمنا بتضمين مكتبة jQuery باسم jquery-1.8.1.min.js والملف الذى سوف نكتب به أكواد الـ javaScript الخاصة بنا والتى تعتمد على مكتبة jQuery وكائن ajax المُضَمَّن مع المكتبة وليكن باسم code.js وأيضاً تضمين ملف التنسيقات css وهو باسم style.css

- عمل div يأخذ id باسم userMSG سنقوم بإظهار رسائل تعريفية للمستخدم كالأخطاء التى تحدث أثناء المعالجة وخلافه .

- إقتبست مقدمة "مذكرة فى أحكام التجويد" كموضوع وإضافة تعليقات عليه .

- عمل div يأخذ id باسم comments لوضع التعليقات به .

- عمل textarea تأخذ id باسم newComment و input تأخذ id باسم name ورابط a يأخذ id باسم insertComment .

2- ننشئ ملف باسم code.js والذى قمنا بتضمينه فى بداية الصفحة كالتالى :

$( function (){
	$('#insertComment').click( function (){
		var name = $('#name').val();
		var comment = $('#newComment').val();
		var sendData = {"name":name,"comment":comment};
		$.ajax({
			url: "file.php",
			type: "POST",
			data: sendData,
			success: function(data){
				if(data==1)
					$('#comments').append('<br>'+comment+'<br><small>بواسطة :</small><i>'+name+'</i>');
				$('#userMSG').html(data);
			},
		});
		return false;
	});
});

طبعاً معروف طريقة التعامل مع مكتبة jQuery فسأنتقل لموضوعنا مباشراً .

- عند حدث الضغط على الرابط ذو الـ id=insertComment نقوم بحفظ قيمتى الاسم والتعليق name و comment ونقوم بحفظهم فى متغير sendData على شكل JSON .

- نقوم بكتابة return false فى نهاية حدث الضغط على الرابط حتى لا يتم تحديث الصفحة وهى تكافئ وضع علامة # فى الرابط ولكن ربما نحتاج وضع قيم فى الرابط فهذه الطريقة أفضل .

كائن ajax فى jQuery وهو يأخذ الشكل التالى :

$.ajax({

});

أو التالى :

jQuery.ajax({

});

وتكون الكتابة داخله على شكل JSON .

وهذه بعض القيم التى يأخذها وسنقوم بتفسيرها واحده تلو الأخرى :

		$.ajax({
			url: "file.php",
			type: "POST",
			data: sendData,
			success: function(data){
				if(data==1)
					$('#comments').append('<br>'+comment+'<br><small>بواسطة :</small><i>'+name+'</i>');
				$('#userMSG').html(data);
			},
		});

- url وهو مسار الملف المراد معالجته .

- type نوع الإرسال إما POST أو GET والإفتراضى إن لم تكتبها من الأساس هى GET والفرق بينهم هى أن GET تستخدم لنقل البيانات الصغيرة نوعاً ما .

- data وهو المتغير الذى سيتم فيه تخزين البيانات المرسلة للملف المعالح وتكتب البيانات فى المتغير المسند إليه فى شكل JSON .

- success وهو حدث نجاح معالجة الملف وهو عبارة عن دالة تأخذ عدة وسائط من أهمها وسيط باسم data وهو عبارة عن البيانات المستلمة من قِبَل الملف المعالج وهى البيانات التى يتم فراءتها من الملف المعالج , والأفضل أن تكون هذه البيانات على شكل JSON لسهولة معالجتها باستخدام دالة jQuery.parseJSON فى مكتبة jQuery ولكن الآن سنكتفى بالبيانات المستلمة فى الصورة العادية , فإن كانت البيانات المستلمة تساوى 1 يتم طباعة التعليق وإلا سوف يتم تجاهل عملية كتابة التعليق .

<?php
	if( $_POST['name']='' or $_POST['comment']=='' )
		echo "0";
	else
		echo "1";
?>

- الملف المعالج هو file.php وهو يحتوى على كود php يقوم بمعالجة البيانات المرسلة إليه عن طريق AJAX فإن كان أى من الاسم أو التعليق لا يحتوى على شئ يطيع القيمة 0 وإلا يطبع القيمة 1 وهى البيانات التى يستقبلها كائن ajax بعد معالجة الملف .

وبهذا يمكن تجربة عمل الكود .

ولمزيد من التحكم سنستخدم بعض خواص كائن ajax الأخرى ويصبح على الشكل :

		$.ajax({
			url: "file.php",
			type: "POST",
			data: sendData,
			beforeSend: function (){
				$('#imageLoading').show();
				$('#userMSG').html('<div class="errorMSG">جارى المعالجة ...</div>');
			},
			statusCode: {
				404: function (){
					$('#userMSG').html('<div class="errorMSG">الملف غير موجود</div>');
					$('#userMSG > div').fadeOut(4000);
				}
			},
			success: function(data){
				if(data==1)
				{
					$('#comments').append('<br>'+comment+'<br><small>بواسطة :</small><i>'+name+'</i>');
					$('#userMSG').html('<div class="doneMSG">تمت معالجة الملف</div>');
					$('#userMSG > div').fadeOut(4000);
				}
				else
				{
					$('#userMSG').html('<div class="errorMSG">يرجى ملئ جميع الحقول !</div>');
					$('#userMSG > div').fadeOut(4000);
				}
			},
			complete: function() {
				$('#imageLoading').hide(2000);
			}
		});

- قمنا بوضع صورة تدل على التحميل فى ملف indx.html وقمنا بإخفائها من خلال css .

- beforSend وهو حدث ما قبل معالجة الملف وخلال هذا الحدث قمنا بإظهار صورة تدل على أن معالجة الملف جارية بالإضافة لإظهار رسالة للمستخدم تفيد بهذا .

- statusCode وهو حدث أكواد معالجة الملفات على السرفر كأخطاء عدم وجود الملف وغيرها يمكنك قراءه موضوع عن HTTP Status Codes لمزيد من المعلومات عنها , وأيضاً قمنا بإظهار رسالة للمستخدم تفيد بهذا .

- success تم إضافة بعض الرسائل تظهر للمستخدم .

- complete وهو حدث الإنتهاء وغلق الإتصال مع الخادم , ونقوم بإخغاء الصورة التى تدل على المعالجة مرة أخرى .

وفى النهاية يمكنك وضع ما تريد فى الملف المعالج ككود للإتصال بقاعدة بيانات أو خلافة من إستخدامات كيفما تشاء , ولا تنسى أن البيانات المرسلة للملف المعالج تكون فى شكل JSON وأن البيانات المستلمة من الملف المعالج تخزن فى الوسيط data المعطى لدالة الحدث succes والأفضل أن تجعل البيانات المستلمة فى صورة JSON كما أسلفنا الذكر .

وهذا رابط تنزيل المجلد الذى يحتوى على جميع الملفات السابقة معاً

jQuery&AJAX.zip

والسلام عليكم ورحمة الله

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#313 سبتمبر 2012 في 13:56

شكرا جزيلا لك اخي الكريم سأتابع السكربت فيما بعد لانه عندما اقترحت الموضوع لم يكن لي عمل لكن الان انا شوي مشغول فلهاذا سأتبعه عندما اتفرغ ....

مع التحية يا غالي و ردك الجميل :)

المصمم و المبرمج هالي الدهوكي

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#41 ديسمبر 2012 في 12:51

اخي اذا ممكن تطبيق اطبقه لو سمحت لانه اعتقد بوجود خطأ يعني اتمنى تعملي تطبيق بسيط جدا جد جدا جدا جدا ... بس حتى افهم كيف تم الإضافة لو سمحت ...

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#51 ديسمبر 2012 في 15:51

السلام عليكم

قمت بإعادة تنزيل المثال وتجربته ووجدته يعمل بشكل جيد , ما الخطأ تحديداً الذي وجدته ؟

- سأحاول أن أشرح الفكرة بشكل أبسط هنا وإن شاء الله سأضع مثال عملي في قسم الـphp لأن تقنية الـAJAX تعتمد على جلب البيانات من الخادم أي علينا التعامل مع إحدى لغات الخوادم .

*أولاً : سنصمم صفحة الـ HTML لإضافة تعليق ولا ننسى أن نقوم بتضمين مكتبة jQuery بها كالتالي :

<!DOCTYPE html> 
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<script  type="text/javascript" src="jquery-1.8.1.min.js"></script> 
	</head> 
<body> 
	<div align="center"> 
		<div id="comments"></div> 
		<textarea id="textcomment"></textarea><br > 
		<a href="#" id="addcomment"> أضف تعليق </a> 
	</div> 
</body> 
</html>

* ثانياً : نضع كود jQuery فقط لإضافة تعليق بدون الإتصال بالخادم وهو :

<script  type="text/javascript"> 
	$(function (){ 
		$('#addcomment').click(function (){ 
			var comment = $('#textcomment').val(); 
			$('#comments').append(comment+'<br>'); 
		}); 
	}); 
</script>

- في حالة الضغط على ذر "أضف تعليق" يتم حفظ محتوى الـtextarea في المتغير comment وبعد ذلك يتم إدراج محتوي هذا المتغير للوسم div ذو المعرف comments والنزول سطر جديد .

وتصبح الصفحة كاملة بالشكل التالي بدون أي عملية إتصال بالخادم وإضافة تعليق من خلال javaScript فقط كالتالي :

<!DOCTYPE html> 
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<script  type="text/javascript" src="jquery-1.8.1.min.js"></script> 
		<script  type="text/javascript"> 
			$(function (){ 
				$('#addcomment').click(function (){ 
					var comment = $('#textcomment').val(); 
					$('#comments').append(comment+'<br>'); 
				}); 
			}); 
		</script> 
	</head> 
<body> 
	<div align="center"> 
		<div id="comments"></div> 
		<textarea id="textcomment"></textarea><br > 
		<a href="#" id="addcomment"> أضف تعليق </a> 
	</div> 
</body> 
</html>

- الآن نحن نريد إرسال التعليق لملف لمعالجته والعودة إلينا ببعض البيانات , لهذا الغرض سنقوم بإستخدام كائن الـajax ضمن مكتبة jQuery كالتالي :

$.ajax({ 
	url: "file.php", 
	type: "POST", 
	data: sendData, 
	success: function(comeData){ 

	} 
});

- متغير url وهو مسار ملف معالجة البيانات , type نوع الإرسال للبيانات المرسلة , data البيانات المرسلة لملف المعالجة , success في حالة نجاح معالجة الملف تأخذ دالة لتنفيذ أمر معين وهذه الدالة تأخذ وسائط من أهمها البيانات القادمة من ملف المعالجة وأعطينا لها الاسم comeData , ويمكن الإستغناء عن type والـ data في حالة أننا لا نريد إرسال بيانات للملف المعالج ونريد جلب بيانات فقط .

- كما أشرت سابقاً أن كائن ajax يعتمد في كتابة خصائصه وفي نقل البيانات على طريقة json لنقل البيانات - وهذا مقال بالعربية للأستاذ خالد الشمعة تحدث به بإستفاضة عنها - وعلى هذا سنقوم بتخزين البيانات المرسلة في المتغير sendData على شكل json كالتالي :

var comment = $('#textcomment').val(); 
var sendData = {"comm":comment};

- مثلاً المف المعالج file.php سيقوم بإعادة البيانات المرسلة في حالة أنها لا تحتوي غير الحروف الإنجليزية والمسافة الفارغة فقط وإلا يعود بنص الخطأ سنستخدم لغة الخادم php لفعل هذا كالتالي :

<?php 
	if(isset($_POST['comm'])) 
	{ 
		if(!preg_match('/[^A-Za-z ]/',$_POST['comm'])) 
			echo $_POST['comm']; 
		else 
			echo 'يجب أن يكون التعليق بالحروف الإنجليزية فقط والمسافة الفارغة'; 
	} 
	else 
		echo 'لا توجد قيمة مدخلة'; 
?>

وفي النهاية يصبح الكود كاملاً على الشكل التالي :

<!DOCTYPE html> 
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<script  type="text/javascript" src="jquery-1.8.1.min.js"></script> 
		<script  type="text/javascript"> 
			$(function (){ 
				$('#addcomment').click(function (){ 
					var comment = $('#textcomment').val(); 
					var sendData = {"comm":comment}; 
					$.ajax({ 
						url: "file.php", 
						type: "POST", 
						data: sendData, 
						success: function(comeData){ 
							$('#comments').append(comeData+'<br>'); 
						} 
					}); 
				}); 
			}); 


		</script> 
	</head> 
<body> 
	<div align="center"> 
		<div id="comments"></div> 
		<textarea id="textcomment"></textarea><br > 
		<a href="#" id="addcomment"> أضف تعليق </a> 
	</div> 
</body> 
</html>

وهذا رابط تنزيل المثال السابق

ajax&jQuery.zip

إن شاء الله يكون المثال واضح

تم تعديل هذه المشاركة بواسطة ahmedsaoud31 في 1 ديسمبر 2012 في 15:55

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

مواضيع مشابهة

كيفية اضافة موضوع جدبد الى منتداي1 رد · 10 يوليو 2010
كود اضافة تعليق8 رد · 10 أغسطس 2010
التعليق على موضوع الاستعلامات الموزعه4 رد · 16 أبريل 2005
تعليق على موضوع (ما هو مفهوم بيئة عمل الدوت نيت)15 رد · 20 مارس 2005
إضافه تعليق للفريم2 رد · 24 ديسمبر 2005
إضافة تعليق في التقرير0 رد · 2 أغسطس 2006