الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

تحديث جزء معين في الصفحة بإستخدام تقنية Ajax

بدأه روحاء ~ في 14 مايو 2012 · 6 رد · 2,117 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم ورحمة الله وبركاته

لدي كود يعمل بحث في الداتا بيس ، أحتاج نتيجة البحث تظهر في نفس الصفحة ( الصفحة اللي موجود فيها الـ form ) - يعني يصير تحديث للصفحة وتظهر نتيجة البحث ، ولو عملت بحث مرا ثاني تظهر النتيجة الجديدة وهكذا .

وإذا فيه إمكانية :$

أبغى إذا البحث يكون Auto-completing Search .

هذا الكود ( الكود شغال تمام )

<?xml version = "1.0"  encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title>Search the Database</title>
    </head>

    <body>

    <form action="search.php" method="post">
     Search (by movie name | Director): <input type="text" name="term" />
    <input type="submit" name="submit" value="Submit" />
    </form>


 <?php

  echo '<div id="container">';

  define('DB_NAME', 'feature_films');
  define('DB_USER', 'root');
  define('DB_PASSWORD', '');
  define('DB_HOST', 'localhost');

	// Connect to database server
	$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);

	if(!$link) {
    die ('Could not connect: ' . mysql_error ()); 
    }

	// Select database
	$db_selected = mysql_select_db(DB_NAME, $link);

	if(!$db_selected) {
    die ('Can\'t use ' . DB_NAME . ': ' . mysql_error());
    }

  //store the post variable as $term and build our query. 
  if (isset($_POST['term']))    
{    

  $term = $_POST['term']; 
  $sql = mysql_query("select * from films where Film like '%$term%' or Director like '%$term%'");




   print("<table align=\"center\" border=\"1\" width=\"100%\"><b>"); 
   echo "<tr> <th>ID</th> <th>Film</th> <th>Original_release_date</th> <th>Director</th> <th>IMDB_rating</th> </tr></b>"; 

	 while($row = mysql_fetch_array($sql)) {

	  print("<tr>"); 
    print("<th width=\"2%\">".$row["ID"]."</th>"); 
    print("<td width=\"20%\">".$row["Film"]."</td>"); 
    print("<td width=\"2%\">".$row["Original_release_date"]."</td>"); 
    print("<td width=\"5%\">".$row["Director"]."</td>"); 
    print("<td width=\"2%\">".$row["IMDB_rating"]."</td>"); 
    print("</tr>"); 

	  }}
?>

    </body>
</html>

( من فرج عن مؤن كربة من كرب الدنيا ، فرّج الله عنه كربه من كرب يوم القيامة )

أنتظركم ()

تم تعديل هذه المشاركة بواسطة روحاء ~ في 14 مايو 2012 في 03:15

1
#2

أنصحك بالتفرغ حوالي 120 دقيقة وقراءة هذا الدرس لفهم استخدام الأجاكس بكل سهولة من هنا

وإذا كان لديك المزيد من الساعات يمكن تعلم جي كويري من هنا

فهي اسهل في استخدام الأجاكس وتقوم بالعديد من الأمور بدل عنك (: بالتوفيق

وإذا كنت على اطلاع بالجي كويري يمكنك المرور على الأجاكس فيها بأقل من عشرين دقيقة من هنا

وإذا كان لاتملك-ي- أي وقت (:: فلقد قمت بوضع فانكشن في الكود السابق ليصبح البحث مثل طلبك

copy and paste );

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title>Search the Database</title>
    </head>

    <body>
 <?  if (!isset($_GET['term']))   
{
	?> 

 <form  name="f1">
  Search (by movie name | Director): <input type="text" name="term"  id="term" onkeyup="search_film(document.f1.term.value)" />
    <input type="submit" name="submit" value="Submit" />
    </form>
    <?
}
 ?>



 <?php

  echo '<div id="container">';

  define('DB_NAME', 'feature_films');
  define('DB_USER', 'root');
  define('DB_PASSWORD', '123');
  define('DB_HOST', 'localhost');

        // Connect to database server
        $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);

        if(!$link) {
    die ('Could not connect: ' . mysql_error ()); 
    }
        // Select database
        $db_selected = mysql_select_db(DB_NAME, $link);   
        if(!$db_selected) {
    die ('Can\'t use ' . DB_NAME . ': ' . mysql_error());
    }
  //store the post variable as $term and build our query. 
  if (isset($_GET['term']))    
{    

  $term = $_GET['term']; 
  $sql = mysql_query("select * from films where Film like '%$term%' or Director like '%$term%'");
   print("<table align=\"center\" border=\"1\" width=\"100%\"><b>"); 
   echo "<tr> <th>ID</th> <th>Film</th> <th>Original_release_date</th> <th>Director</th> <th>IMDB_rating</th> </tr></b>"; 



         while($row = mysql_fetch_array($sql)) {

          print("<tr>"); 
    print("<th width=\"2%\">".$row["ID"]."</th>"); 
    print("<td width=\"20%\">".$row["Film"]."</td>"); 
    print("<td width=\"2%\">".$row["Original_release_date"]."</td>"); 
    print("<td width=\"5%\">".$row["Director"]."</td>"); 
    print("<td width=\"2%\">".$row["IMDB_rating"]."</td>"); 
    print("</tr>"); 

          }}
?>
<div id="myDiv" style="background:#999">

</div>
<script type="text/javascript">
function search_film(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

xmlhttp.open("GET","search.php?term="+str,true);
xmlhttp.send();
}
</script>

</script>
    </body>
</html>

تم تعديل هذه المشاركة بواسطة موفق جمال زكريا في 15 مايو 2012 في 18:28

1
#3

الأخ موفق

لما أبحث عن كلمة معينة النتيجة القديمة مازالت موجودة ، يعني تظهرلي نتيجتين ، القديمة في جدول والجديدة في جدول فوق جدول القديمة

والفورم تبع البحث يظهر مرتين في نفس الصفحة :/

صورة

al-tqat.PNG

ياليت تحمل الداتابيس من هنا عشان تفهم المشكلة

جزاك الله خير

#4

قمت بتجربة السكربت السابق على كروم وموزيلا وانترنت اكسبلورر 8 وهو يعمل بشكل صحيح

أختي الكريمة ربما تجربين السكربت على متصفح انترنت اكسبلور 6

على كل الأحوال أنصحك بإستخدم دالة الأجاكس للجي كويري

وقمت بإستبدال الفانكش التعيس السابق بسطر واحد 

$("#myDiv").html(htmlobj.responseText);

حتى يصبح الكود بشكله الجديد كما يلي : 

<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title>Search the Database</title></head> 
<body>
 <?  if (!isset($_GET['term']))   
{
        ?> 
 <script src="jquery-1.7.2.min.js"></script>
 <form  name="f1">
  Search (by movie name | Director): <input type="text" name="term"  id="term"  onkeyup="newf();" />
    <input type="submit" name="submit" value="Submit" />
    </form>
    <?
}
 ?>


 <?php

  echo '<div id="container">';
  define('DB_NAME', 'feature_films');
  define('DB_USER', 'root');
  define('DB_PASSWORD', '123');
  define('DB_HOST', 'localhost');

        // Connect to database server
        $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);

        if(!$link) {
    die ('Could not connect: ' . mysql_error ()); 
    }
        // Select database
        $db_selected = mysql_select_db(DB_NAME, $link);   
        if(!$db_selected) {
    die ('Can\'t use ' . DB_NAME . ': ' . mysql_error());
    }
  //store the post variable as $term and build our query. 
  if (isset($_GET['term']))    
{    

  $term = $_GET['term']; 
  if ($term=="") 
  	$term="__++**";
  $sql = mysql_query("select * from films where Film like '%$term%' or Director like '%$term%'");
   echo("<table align=\"center\" border=\"1\" width=\"100%\"><b>"); 
   echo "<tr> <th>ID</th> <th>Film</th> <th>Original_release_date</th> <th>Director</th> <th>IMDB_rating</th> </tr></b>"; 



         while($row = mysql_fetch_array($sql)) {

          print("<tr>"); 
    print("<th width=\"2%\">".$row["ID"]."</th>"); 
    print("<td width=\"20%\">".$row["Film"]."</td>"); 
    print("<td width=\"2%\">".$row["Original_release_date"]."</td>"); 
    print("<td width=\"5%\">".$row["Director"]."</td>"); 
    print("<td width=\"2%\">".$row["IMDB_rating"]."</td>"); 
    print("</tr>"); 

          }}
		  mysql_close($link);
?>
</table>


<div id="myDiv" style="background:#999">

</div>
<script>

function newf()
{
var s =document.f1.term.value;
htmlobj=$.ajax({url:"search.php?term=" +s,async:false});

$("#myDiv").html(htmlobj.responseText);
}



</script>
    </body>
</html>

ويلزمك ملف Jquery وضعته لك في المرفقات مع التعديل للسكربت

jquery-1.7.2.min.js

search.php

#5

جربته على اكسبلورر9

لكن مازالت النتيجة القديمه تظهر ، لما أضغط على زر البحث تختفي القديمة وتظهر الجديدة ،

أنا أبغى بمجرد ما أكتب أي حرف يبدأ البحث ويظهر النتيجة الجديدة وتختفي القديمة

هل هذا ممكن في الجافا سكربت ؟

أسعدك الله

#6

هناك خلل ما .. أنا تجاهلت الزر تماما ... اعتبري أنه غير موجود .. نسيت حذفه

نعم أنا وضعت لك عملية البحث في الحدث onkeyup لمربع النص

هل وضعتي الملفين في المرفقات من جديد !!!!!

هذه النتيجة التي جربتها عندي تفضلي شوفيها في المرفقات

test-search.php.rar

#7

والله ماهي راضية تضبط :/

الزر الثاني لازال موجود والبحث مايتم الا اذا نقرت عالزر ،

أجاكس تحتاج أداة ولا لا ؟ لأني أول مرا أستخدمها

الله يجزاك الجنة

مواضيع مشابهة