عمل طلبية من المخدم بدون عمل تحديث للصفحة

محمود موسى2 · 13 نوفمبر 2020

السلام عليكم،

اسال عن طريقة عمل استعلام في الداتا بيز بدون عمل ريفريش للصفحة. مثال:-

اريد عمل INSERT لشئ ما في MYSQL DATABASE واريد عمله بدون عمل ريفريش للصفحة فما التقنية المستحدمة؟

مثال آخر:-

عندا يضفط المستخدم على زر اعجبني لمنتج ما في الموقع يتم اضافة رقم 1 للداتا بيز... فأريد اضافة الرقم 1 عند الضغط على اعجبني بدون عمل ريفريش للصفحة فما التقنية المستخدمة؟

تم التعديل في 13 نوفمبر 2020 بواسطة Wael Aljamal
توضيح السؤال

Yomna Raouf · 13 نوفمبر 2020

التقنية المستخدمة في هذا الأمر هي ajax هي اختصار ل Asynchronous JavaScript and Xml و هي تقنية مستخدمة في جميع مواقع الويب هذه الأيام و تمكننا هذه التقنية من التنقل داخل المواقع دون إعادة تحميل الموقع في كل مرة نطلب فيها صفحة ما فمثلًا في موقع حسوب عندما نتنقل بين أسئلة البرمجة و أسئلة العمل الحر مثلًا لا يتم تحميل الموقع بأكمله و إنما يتم تحميل الجزء الذي يعرض الأسئلة فقط. و تمكننا أيضًا من طلب بيانات من الخادم بعد أن تم تحميل الموقع و العديد من المزايا الأخرى.

لنأخذ المثال التالي لنتعرف كيفية تطبيق هذه التقنية:

لنفرض أمه لدينا ال form التالية:

<!DOCTYPE html>
 
<html>
<head>
 <title>PHP MySQL Insert Tutorial</title>
        <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
</head>
 
<body>
 <form action='insert.php' method='post' id='myform' >
 <p>
 <input type='text' name='username' placeholder='user name' id='username' />
 </p>
 
 <p>
 <input type='text' name='password' placeholder='password' id='password' />
 </p>
 
 <button id='insert'>Insert</button>
 
 <p id='result'></p>
 </form>
</body>
</html>

php-mysql-insert1.png.f445c7ea8ee47c4ee1b88e073d6928b6.png

و ال script التالي "ملف insert.php" لإضافة بيانات لقاعدة البيانات:

<?php

// ثوابت الاتصال
 define('HOST','localhost');
 define('USERNAME', 'root');
 define('PASSWORD','');
 define('DB','mydatabase');


// جملة الاتصال بقاعدة البيانات 
 $con = mysqli_connect(HOST,USERNAME,PASSWORD,DB);
 
// form قراءة البيانات التي تم إرسالها من ال 
 $username = $_POST['name'];
 $pass = $_POST['pass'];
 
// إدخال هذه البيانات لقاعدة البيانات
 $sql = "insert into users (username, password) values ('$username','$pass')";
 
 if(mysqli_query($con, $sql)){
 echo 'success';
 }
?>

الآن سنقوم باستخدام ajax لإدخال البيانات إلى قاعدة البيانات بدون تحديث الصفحة:

سنقوم بإنشاء ملف يسمى insert.js و نقوم بتضمينه في الملف الذي يحتوي html form:

<script src='insert.js'></script>

الآن سنستخدم الأكواد التالية لمنع ال form من إعادة التوجيه إلى insert.php "لاحظ ال action الخاص بال form":

$('#myform').submit(function(){
 return false;
});

إذا قمت بالضغط على ال insert button الآن لن يحدث شئ.

الآن سنقوم بتنفيذ أكواد php في الخلفية باستخدام التابع jquery.post:

$.post(
 'script to execute',
 'values to send',
 function(result){
 //get the output of the script
 }
);

سنقوم باستخدام الطريقة jquery.post السابقة داخل دالة الضغط على الزر، ليصبح الشكل النهائي لملف insert.js كما يلي:

$('#myform').submit(function(){
 return false;
});
 
$('#insert').click(function(){
 $.post( 
 $('#myform').attr('action'),
 $('#myform :input').serializeArray(),
 function(result){
 $('#result').html(result);
 }
 );
});

و بذلك نكون قد تمكنا من إدخال البيانات في قاعدة البيانات بدون تحديث الصفحة.

Wael Aljamal · 13 نوفمبر 2020

مرحبا محمود،

نعم تستطيع القيام بالتعديل بدون تحديث الصفحة باستخدام تقنية AJAX (تقنية تبادل بيانات غير متزامنة بين العميل و المخدم باستخدام جافا سكربت) حيث ترسل ضمنه طلبية للمخدم أي الاتصال مع API الخاص به و من ثم تنفيذ سكربت موجود في المخدم و بعد التحديث يرسل المخدم تقرير تنفيذ العملية و تستقبله لديك و تقوم بالتحديث المناسب في صفحة العميل.

يفضل استخدام تقنية AJAX مع مكتبة jQuery فهي تبسط الموضوع و يصبح أسهل.

مثال بسيط لإرسال بيانات المستخدم للمخدم:

<script type="text/javascript">
    function send() {
      // form تهيئة البيانات عن طريق جلبها من 
        var person = {
            name: $("#id-name").val(),
            address:$("#id-address").val(),
            phone:$("#id-phone").val()
        }
		// تهيئة العنصر الذي سيستقبل البيانات
        $('#target').html('sending..');
		// استخدام أجاكس مع جيكويري
      // رابط المخدم المناسب
      // طريقة الإرسال
      // نمط البيانات
        $.ajax({
            url: '/test/PersonSubmit',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
          
          // في حال النجاح بالاتصال
            success: function (data) {
              // تحديث محتوى العنصر الذي يستقبل البيانات
                $('#target').html(data.msg); 
            },
          // البيانات المرسلة للمخدم
            data: JSON.stringify(person)
        });
    }
</script>

حيث سيتم تحديث محتوى العنصر بدون تحديث الصفحة

يمكنك البحث عن لأمثلة أكثر في الانترنت و مشاهدة فيديوهات تعليمية على يوتيوب

بالتوفيق

أسامة كمال النبريص · 13 نوفمبر 2020

التقنية المستعملة لعمل ذلك تسمى Ajax وهي اختصار لكلمة (asynchronous JavaScript and XML) حيث يمكنك وكما ذكرت عمل استعلام في الداتابيز بدون الحاجة لعمل تحميل للصفحة. ويمكنك استعمال الاجاكس مع مكتبة jQuery حيث انها توفر الدلة $.ajax() للتعامل مع الاجاكس في الصفحة.

وهذا مثال بسيط يوضح ما ذكرت من ادخال بيانات:

$( 'form' ).submit(function( event ) {
  event.preventDefault();

  var form = $( this );

  $.ajax({
    type: 'POST',
    url: '/data/save',
    data: form.serialize(),
    dataType: 'json',
    success: function( resp ) {
      console.log( resp );
    }
  });
});

حيث ان type هو ال action الذي سيتم إرساله سواء كان GET او POST, و url هو الرابط المستخدم لتخزين أو جلب البيانات, وفي حال النجاح يتم تفعيل success,

datatype وهي نوع البيانات او شكل البيانات التي سيتم إرسالها واستقبالها عند إتمام الطلب,وهنا يتم التعامل مع البيانات المرسلة والصادرة على شكل json وهي عبارة عن سلسلة نصّيّة (string) تُمثّل البيانات، وتبدو مُشابهة لكائن JavaScript عاديّ، ولكنّها لا تستطيع تمثيل كلّ أنواع البيانات الّتي يستطيع كائن JavaScript تمثيلها. ويكون شكلها كالتالي:

{ "people" : [
  {
    "name" : "Ben",
    "url" : "http://benalman.com/",
    "bio" : "I create groovy websites, useful jQuery plugins, and play a mean funk bass. I'm also Director of Pluginization at @bocoup."
  },
  {
    "name" : "Rebecca",
    "url" : "http://rmurphey.com",
    "bio" : "Senior JS dev at Bocoup"
  },
  {
    "name" : "Jory",
    "url" : "http://joryburson.com",
    "bio" : "super-enthusiastic about open web education @bocoup. lover of media, art, and fake mustaches."
  }
] }

المحتوى عن موضوع الاجاكس متوافر بكثرة فيمكنك البحث عما تريد وتعلمها, وسنساعدك هنا في حال واجهتك اي صعوبات أو مشاكل.

عمل طلبية من المخدم بدون عمل تحديث للصفحة

السؤال

محمود موسى2

3 أجوبة على هذا السؤال

Recommended Posts

Yomna Raouf

Wael Aljamal

أسامة كمال النبريص

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية