• حذف مطالب سایت به صورت ajax

با استفاده از این آموزش از این پس میتوانید مطالب وب سایت خود را به صورت ajax حذف نمایید. در این آموزش ابتدا یک تابع برای حذف می نویسیم و سپس آنرا توسعه می دهیم تا در تمامی قسمت های سایت که نیاز به حذف مطالب داریم بتوانیم از آن استفاده کنیم.


لینک دمو و دانلود


(پیش زمینه این آموزش آشنایی با jquery و ajax می باشد اما در صورتی که آشنا نیستید کدها به صورت آماده نیز قابل استفاده می باشند)

فرض میکنیم لینکی به صورت زیر دارید:


	
  • تست خبر به جهت حذفحذف

یه کلاس در قسمت تگ a به نام del تعریف کردیم تا بتونیم از طریق jquery و به صورت ajax بهش دسترسی داشته باشیم و با استفاده از خصوصیت id مقدار id خبر مورد نظر رو میخونیم.

بدین صورت که وقتی روی گزینه حذف کلیک شد یک درخواست به صفحه ی مورد نظر ارسال بشه که این درخواست شامل آیدی خبر مورد نظر هست و خبر به صورت آجاکسی با یک افکت ساده حذف شود.

خوب حالا کدهای زیر رو در صفحه ای به نام delete.js قرار بدید.

$(function() {
$(".del").click(function(){
var delid = $(this).attr("id");
if(confirm("آیا از حذف این مطلب اطمینان دارید؟ این غیرقابل‌بازگشت خواهد بود!"))
		  {
 $.ajax({
   type: "GET",
   url: "delete.php",
   data: 'newsid=' + delid,
   success: function(){
   }
 });

		$(this).parents("li").css({ backgroundColor: "red" }, "fast")
		.animate({ opacity: "hide" }, "slow");
 }
return false;
});
});

خوب با استفاده از این کد هر زمان که روی گزینه حذف کلیک شد id خبر مورد نظر رو دریافت میکنیم و در متغییری به نام delid قرار میدیم و سپس این مقدار رو از طریق ajax به صفحه ای به نام delete.php ارسال میکنیم و حالا باید کدهای صفحه ی delete.php رو بنویسیم.


این کدهارو خیلی ساده با mysql نوشتم شما با توجه به نیاز خودتون میتونید اونهارو تغییر بدید.

در اینجا هم چک میکنیم اگر newsid ارسال شده بود کوئری حذف اجرا بشه. تا اینجا کد خیلی سخت نبود و راحت میشه ازش استفاده کرد. اما اگر بخواید از این کد همینطوری استفاده کنید به ازی هر جدولتون باید یکبار این کدهارو بنویسید که کار اصولی و درستی نیست با یه مقدار تغییر در کدهایی که نوشتیم اونو میتونیم به صورت کامل داینامیک کنیم و هرجا که خواستیم برای هر جدول و داده ای ازش استفاده کنیم. البته این مستلزم این هست که جدول های شما همه یه نام ID داشته باشند و البته اگر اینطور هم نباشه میتونید با استفاد از دستور switch مقادیر دریافتی رو بررسی کنید و کاری که میخواید انجام بدید تا دیگه نیازی نباشه هر بار که میخواید عمل حذف انجام بشه این کدهارو از ابتدا دوباره بنویسید.

ابتدا باید یه خصوصیت جدید به تگ a اضافه کنیم که من از rel استفاده میکنیم و به شکل زیر تغییرش میدم.



	
  • تست خبر به جهت حذفحذف

در واقع با اینکار اسم جدولمون رو هم تو تگ a قرار دادیم تا بتونیم ازش استفاده کنیم. حالا در صفحه ی delete.js یه متغیر دیگه به صورت زیر اضافه میکنیم.

var tblname = $(this).attr("rel");

با اینکار اسم جدول رو داخل متغییری به نام tblname قرار دادیم و کدهای صفحه ی delete.js به صورت زیر تغییر میکنه:

$(function(){
	$('.del').on('click',function(){
		var delid = $(this).attr('id');
		var tblname = $(this).attr("rel");
		if(confirm("آیا از حذف این مطلب اطمینان دارید؟ این غیرقابل‌بازگشت خواهد بود!")){
			$.ajax({
				type:'GET',
				url:'delete.php',
				data: 'tblname=' + tblname + '&id=' + delid,
				success: function(){}
			});
			$(this).parents("li").css({ backgroundColor: "red" }, "fast").animate({ opacity: "hide" }, "slow");
		}
		return false;
	});
});

با تغییر کد در قسمت ajax همراه با id نام جدول رو هم ارسال میکنیم و حالا باید در صفحه ی delete.php هم این مقادیر رو دریافت کنیم و تغییرات لازم رو انجام بدیم. کدهای صفحه delete.php به صورت زیر تغییر می کند:

if(isset($_GET['id'])){
	$id = intval($_GET['id']);
	$tblname = mysql_real_escape_string($_GET['tblname']);
	$con = mysql_connect('localhost','root','');
	$db = mysql_select_db('abrang');
	$result = mysql_query("DELETE FROM `$tblname` WHERE `ID` = '$id'");
}

لینک دمو و دانلود

نکته مهم: در استفاده از این کد دقت لازم را داشته باشید چون هیچ اعتبار سنجی روی کد انجام نشده و در هنگام استفاده خودتان باید تمامی موارد امنیتی را در نظر بگیرد.

امیدوارم بتونید از این آموزش در طراحی هاتون استفاده کنید.

موفق باشید.

 


تاریخ ثبت: ۱۳۹۳,۱۰,۱۰
بازدید: 13461
این مطلب را به اشتراک بگذارید cloob  twitter  stumbleupon  linkedin  Facebook