تحديث البيانات php عبر تقنية ajax بطريقة modal

Karem Mohammed2 · 18 أكتوبر 2022

اريد تحديث البيانات بدون تحميل الصفحة عبر ajax في php عن طريقة عرض modal

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

برجاء اجابتي

Ahmed Sadek Elamine Touahria · 18 أكتوبر 2022

لتوضيح مدى سهولة الوصول إلى المعلومات من قاعدة بيانات باستخدام Ajax و PHP ، سنقوم ببناء استعلامات MySQL سريعًا وعرض النتائج على "ajax.html". ولكن قبل أن نمضي قدمًا ، لنقم بعمل أرضي. قم بإنشاء جدول باستخدام الأمر التالي.

ملاحظة - نفترض أن لديك امتيازًا كافيًا لإجراء عمليات MySQL التالية.

CREATE TABLE `ajax_example` (
   `name` varchar(50) NOT NULL,
   `age` int(11) NOT NULL,
   `sex` varchar(1) NOT NULL,
   `wpm` int(11) NOT NULL,
   PRIMARY KEY  (`name`)
)

الآن قم بتفريغ البيانات التالية في هذا الجدول باستخدام عبارات SQL التالية.

INSERT INTO `ajax_example` VALUES ('ahmed', 120, 'm', 20);
INSERT INTO `ajax_example` VALUES ('amine', 75, 'm', 44);
INSERT INTO `ajax_example` VALUES ('iyad', 45, 'm', 87);
INSERT INTO `ajax_example` VALUES ('abd alatif', 22, 'f', 72);
INSERT INTO `ajax_example` VALUES ('mohammed', 27, 'f', 0);
INSERT INTO `ajax_example` VALUES ('ammar', 35, 'f', 90);

ملف HTML من جانب العميل
الآن ، لنحصل على ملف HTML من جانب العميل وهو ajax.html وسيحتوي على الكود التالي

<html>
   <body>
      
      <script language = "javascript" type = "text/javascript">
         <!--

            function ajaxFunction(){
               var ajaxRequest;  // المتغير الذي يجعل اجاكس ممكنًا!
               
               try {
                  ajaxRequest = new XMLHttpRequest();
               }catch (e) {
                  try {
                     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                  }catch (e) {
                     try{
                        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                     }catch (e){
                        alert("متصفحك لا يدعم اجاكس");
                        return false;
                     }
                  }
               }
					// إنشاء وظيفة ستتلقى البيانات
                // مرسلة من الخادم وسيتم تحديثها
                // قسم div في نفس الصفحة.
					
               ajaxRequest.onreadystatechange = function(){
                  if(ajaxRequest.readyState == 4){
                     var ajaxDisplay = document.getElementById('ajaxDiv');
                     ajaxDisplay.innerHTML = ajaxRequest.responseText;
                  }
               }
               
// الآن احصل على القيمة من المستخدم وقم بتمريرها إلى
                // نص الخادم.
					
               var age = document.getElementById('age').value;
               var wpm = document.getElementById('wpm').value;
               var sex = document.getElementById('sex').value;
               var queryString = "?age=" + age ;
            
               queryString +=  "&wpm=" + wpm + "&sex=" + sex;
               ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
               ajaxRequest.send(null); 
            }
         //-->
      </script>
		
      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' />
         <br />
         
         Sex: <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
			
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
			
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

ملاحظة - تكون طريقة تمرير المتغيرات في الاستعلام وفقًا لمعيار HTTP

URL?variable1=value1;&variable2=value2;

ملف PHP من جانب الخادم
والآن أصبح البرنامج النصي من جانب العميل جاهزًا. الآن يتعين علينا كتابة نص برمجي من جانب الخادم الخاص بنا والذي سيجلب العمر و wpm والجنس من قاعدة البيانات وسيرسلها مرة أخرى إلى العميل. ضع الكود التالي في ملف "ajax-example.php".

<?php
   
   $dbhost = "localhost";
   $dbuser = "dbusername";
   $dbpass = "dbpassword";
   $dbname = "dbname";
   
// الاتصال بخادم MySQL
mysql_connect($dbhost, $dbuser, $dbpass);
   
// حدد قاعدة البيانات
mysql_select_db($dbname) or die(mysql_error());
   
// استرداد البيانات من Query String
$age = $_GET['age'];
   $sex = $_GET['sex'];
   $wpm = $_GET['wpm'];
   
// Escape User Input للمساعدة في منع حقن SQL
$age = mysql_real_escape_string($age);
   $sex = mysql_real_escape_string($sex);
   $wpm = mysql_real_escape_string($wpm);
   
// بناء الاستعلام
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
   
   if(is_numeric($age))
   $query .= " AND age <= $age";
   
   if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
   
   $qry_result = mysql_query($query) or die(mysql_error());
   
   $display_string = "<table>";
   $display_string .= "<tr>";
   $display_string .= "<th>Name</th>";
   $display_string .= "<th>Age</th>";
   $display_string .= "<th>Sex</th>";
   $display_string .= "<th>WPM</th>";
   $display_string .= "</tr>";
   
   while($row = mysql_fetch_array($qry_result)) {
      $display_string .= "<tr>";
      $display_string .= "<td>$row[name]</td>";
      $display_string .= "<td>$row[age]</td>";
      $display_string .= "<td>$row[sex]</td>";
      $display_string .= "<td>$row[wpm]</td>";
      $display_string .= "</tr>";
   }
   echo "Query: " . $query . "<br />";
   
   $display_string .= "</table>";
   echo $display_string;
?>

تحديث البيانات php عبر تقنية ajax بطريقة modal

السؤال

Karem Mohammed2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Ahmed Sadek Elamine Touahria

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية