اذهب إلى المحتوى
  • 0

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

Karem Mohammed2

السؤال

Recommended Posts

  • 0

لتوضيح مدى سهولة الوصول إلى المعلومات من قاعدة بيانات باستخدام 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;
?>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...