در این آموزش php , قصد داریم به شما نحوه insert درون خطی داده های جدول HTML5 در جدول دیتابیس MySQL توسط AJAX و Jquery را نمایش بدیم.
HTML5 به شما امکان ویرایش سلول های جدول با ست کردن خاصیت contentEditable به true را دارد.
بعد از اضافه کردن داده ها در سلول های جدول, این داده ها را با استفاده از AJAX به PHP ارسال می کنم. در صفحه PHP , ما کوئری insert را برای ذخیره کردن داده های ارسالی در دیتابیس, ایجاد می کنیم.
در این مثال از insert درون خطی توسط AJAX , ما یک جدول HTML5 برای افزودن اطلاعات محصول داریم. بعد از وارد کردن جزئیات محصول در سلول قابل ویرایش, با کلیک بر روی دکمه مورد نظر, اطلاعات را در دیتابیس ذخیره می کنیم.
ما از خاصیت Data های سفارشی برای ذخیره نام فیلد محصول استفاده می کنیم. با استفاده از این نام, مقدار وارد شده را دریافت می کنم.
این قابلیت برای فرم دهی داده های POST که به فایل PHP توسط AJAX ارسال می کنیم, بسیار کاربردی است.
جدول HTML5 برای insert درون خطی
کد زیر به شما یک جدول همراه با دکمه Save را نمایش می دهد. بعد از وارد کردن داده ها با استفاده از ویرایش درون خطی, با استفاده از دکمه save اطلاعات را تایید و ارسال می کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="txt-heading">Add Product</div> <table cellpadding="10" cellspacing="1"> <tbody> <tr> <th><strong>Name</strong></th> <th><strong>Code</strong></th> <th><strong>Description</strong></th> <th style="text-align:right;"><strong>Price</strong></th> </tr> <tr> <td contentEditable="true" data-id="product_name"></td> <td contentEditable="true" data-id="product_code"></td> <td contentEditable="true" data-id="product_desc"></td> <td contentEditable="true" data-id="product_price" style="text-align:right;"></td> </tr> </tbody> </table> <div id="btnSaveAction">Save to Database</div> |
insert درون خطی توسط AJAX در جی کوئری
اسکریپت jQuery زیر محتوایات سلول قابل ویرایش را با استفاده خاصیت data سفارشی خوانده و توسط AJAX ارسال می کند.
کد PHP , از این داده های POST شده استفاده و کوئری insert را برای افزودن به دیتابیس ایجاد می کند.بعد از موفقیت آمیز بودن عملیات insert , صفحه php سطر جدید را به عنوان پاسخ AJAX برای نمایش به کاربر بگشت می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> $("#btnSaveAction").on("click",function(){ params = "" $("td[contentEditable='true']").each(function(){ if($(this).text() != "") { if(params != "") { params += "&"; } params += $(this).data('id')+"="+$(this).text(); } }); if(params!="") { $.ajax({ url: "insert-row.php", type: "POST", data:params, success: function(response){ $("#ajax-response").append(response); $("td[contentEditable='true']").text(""); } }); } }); </script> |
فایل PHP برای افزودن داده ها به دیتابیس
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?php require_once("dbcontroller.php"); $db_handle = new DBController(); $product_name = ""; $product_code = ""; $product_desc = ""; $product_price = ""; if(!empty($_POST["product_name"])) { $product_name = $db_handle->cleanData($_POST["product_name"]); } if(!empty($_POST["product_code"])) { $product_code = $db_handle->cleanData($_POST["product_code"]); } if(!empty($_POST["product_desc"])) { $product_desc = $db_handle->cleanData($_POST["product_desc"]); } if(!empty($_POST["product_price"])) { $product_price = $db_handle->cleanData($_POST["product_price"]); } $sql = "INSERT INTO tbl_product (product_name,product_code,product_desc,product_price) VALUES ('" . $product_name . "','" . $product_code . "','" . $product_desc . "','" . $product_price . "')"; $product_id = $db_handle->executeInsert($sql); if(!empty($product_id)) { $sql = "SELECT * from tbl_product WHERE id = '$product_id' "; $productResult = $db_handle->readData($sql); } ?> <?php if(!empty($productResult)) { ?> <tr> <td><?php echo $productResult[0]["product_name"]; ?></td> <td><?php echo $productResult[0]["product_code"]; ?></td> <td><?php echo $productResult[0]["product_desc"]; ?></td> <td style="text-align:right;"><?php echo $productResult[0]["product_price"]; ?></td> </tr> <?php } ?> |
برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود
امیدوارم از آموزش insert درون خطی توسط AJAX در جی کوئری نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
آقای شفیعی واقعا ممنونم به خاطر سایت خوبتون و زحمات شما.
بسیار کاربردی بود.
سلام. بسیار خوشحالیم که مفید واقع شده.
موفق و پیروز باشید.
درود
وقت بخیر
درسته آموزش بصورت مستقیم کمکی نکرد (چون Insert درون خطی با Ajax رو بلد بودم) ولی نکته ای داشت که در هیچ سایت فارسی یا انگلیسی زبانی پیدا نکردم و اگه شما این آموزش رو ننوشته بودید پروژم همچنان متوقف مونده بود
سپاس فراوان 🙂
سلام ممنون.
خیلی خوشحالیم که مفید واقع شده.
موفق باشید.