جستجو با آژاکس

[shekofeh]

سلام.من برای سایتم میخوام جستجو بذارم(بوسیله آژاکس)
اینطور فرمی میخوام:



که جستجو بر اساس دو گزینه نام کتاب یا نام نویسنده صورت میگیرد.

میتونم listbox را نذارم تا کارم راحتتر شود.چون این دو فیلد نام کتاب ونویسنده در یک جدول هست.
چطور مقداری که در قسمت text وارد میشود را بگیرم و به جاوا اسکریپ بفرستم؟
در قسمت php هم کمکم کنید که باید جستجو را انجام دهد.
لطفا راهنماییم کنید

[mohkami]

با سلام،
شما با به تگ input میگید وقتی که دکمه فشرده شد و برداشته شد این جستجو صورت بگیره لذا برای این کار:

<input onkeyup="search1()" type="text" id="nam" />

و برای list باید value او رو برابر با اون اسم ستون در table دیتابیستون قرار بدید مثلاً در این مثال اسم ستونها در table بدین ترتیبندAuthor (نویسنده) و Book لذا:

  <select id="type" >

    <option selected="selected" value="Book">کتاب</option>

    <option value="Author">نویسنده</option>    

  </select>

وما برای نمایش نتیجه نیاز به جایی داریم لذا باید یک تگ جدید ایجاد کنیم که از تگ div استفاده میکنیم و در زیر قسمتهای بالا آنرا قرار میدهیم،توجه کنید که درون این تگ هیچ مقداری ما در body قرار نمیدهیم و تنها بصورت زیر قرار میگیرد:

<div id="result"></div>

حال به بحث جاوااسکریپت و کارهای اِیجکس(Ajax) میپردازیم:
متدهای زیر برای استفاده از تکنولوژی اِیجکس هستند تنها قسمهایی که توضیح میدهم(رنگ قرمز هستند در کد) را خود برنامه نویس تغییر میدهد.

<script type="text/javascript">

function search1()

{

xmlhttp=null;

if (window.XMLHttpRequest)

  {// code for IE7, Firefox, Opera, etc.

  xmlhttp=new XMLHttpRequest();

  }

else if (window.ActiveXObject)

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

if (xmlhttp!=null)

  {

 

  var nam=document.getElementById('nam').value;

  var type=document.getElementById('type').value;

  xmlhttp.open('GET','searcher.php?nam='+nam+'&type='+type,true);

  xmlhttp.onreadystatechange=state_Change;

  xmlhttp.send(null); 

  }

else

  {

  alert("Your browser does not support XMLHTTP.");

  }

}



function state_Change()

{

  

  if (xmlhttp.readyState==4)

  {// 4 = "loaded"

  if (xmlhttp.status==200)

    {// 200 = "OK"

        document.getElementById("result").innerHTML=xmlhtt  p.responseText

    }

  else

    {

    alert("Problem retrieving XML data:" + xmlhttp.statusText);

    }

  }

}

</script>

search1()
نام تابعی است که شما آنرا در تگ input صدا میزنید.


var nam=document.getElementById('nam').value;
var type=document.getElementById('type').value;
با استفاده از این 2 خط شمامحتویات موجود در قسمت تکست و لیست خود را میگیرید. توجه کنید به id که من برای این تگها در body استفاده کردم و نامه که داخل پرانتزهای 2 خط بالا قرار دادم.


xmlhttp.open('GET','searcher.php?nam='+nam+'&type='+type,true);
این خط مقادیر را با استفاده از متد GET به آدرسی میفرستد که ما برای آن انتخاب کرده ایم.(با رنگ قرمز



document.getElementById("result").innerHTML=xmlhtt p.responseText

شما با این خط مقدار بدست آمدا از جواب فایل php را درون تگی با id که ما تعیین کردیم result قرار میدهد.

فایلهارو اینجا میذارم بازهم اگه سوالی بود بپرسید.

موفق باشید.

[shekofeh]

سلام.من با کمک شما برنامه سرچ را نوشتم اما کاری انجام نمیشود!!
در قسمت html :

<form  name="se" method="post" dir="rtl" >

    جستجوی کتاب:

    <input type="text" name="sa" id="sa"  onKeyUp="search1();">&nbsp;

    <select name="s" id="s" class="texts">

    <option value="" selected="selected"> </option>

    <option value='namebook' >نام کتاب</option> 

    <option value='namewriter'  >نام نویسنده</option> 

    </select>

    </form>

    <div id="div1"></div> </p> 

در قسمت جاوا اسکریپ:

<script >

function search1()

{

 var sa=document.getElementById('sa').value;

 var s=document.getElementById('s').value;

 agent.call('','find','callfind',sa,s);

 

}

function callfind($r)

{

 document.getElementById('div1').innerHTML=r;

 

}

</script>

در قسمت php هم:

function find($sa,$s)

 {

  $query="select * from `book` where $s='".$sa."'" ;

$res=mysql_query($query);

if ( isset($res) and (mysql_num_rows($res)>0) )

 {

  $r.="<table>

    <tr>

     <td>کتاب نام</td>

     <td>نویسنده نام</td>

    </tr>";

  while( $row=mysql_fetch_object($res) )

  {

   $r.="<tr>

     <td>$row->Bname</td>

     <td>$row->Bwriter</td>;"

  }

  $r.="</tr></table>";

  return $r;

 }

 

}

اشکالش کجاست؟

[mohkami]

سلام، ببینید من برای اِیجکس گفتم اونا همه باید باشه که شما تنها اون قسمتهارو عوض کنید و بقیه باید باشند تا شما بتونید جواب بگیرید.

[shekofeh]

سلام، ببینید من برای اِیجکس گفتم اونا همه باید باشه که شما تنها اون قسمتهارو عوض کنید و بقیه باید باشند تا شما بتونید جواب بگیرید.

سلام.من از فرمی که شما گفتید استفاده نمیکنم.من از فایل agent.phpاستفاده میکنم.

[shekofeh]

لطفا برنامه نویسان اشکال برنامه ام را بگویید.میخواهم تحویل پروژه بدهم.