PDA

View Full Version : حرفه ای: جستجو با آژاکس



shekofeh
چهارشنبه 09 تیر 1389, 16:13 عصر
سلام.من برای سایتم میخوام جستجو بذارم(بوسیله آژاکس)
اینطور فرمی میخوام:

http://up.iranblog.com/Files/f809689c2d834792b994.JPG

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

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

mohkami
چهارشنبه 09 تیر 1389, 17:17 عصر
با سلام،
شما با به تگ 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=xmlhttp.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=xmlhttp.responseText

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

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

موفق باشید.

shekofeh
پنج شنبه 10 تیر 1389, 16:53 عصر
سلام.من با کمک شما برنامه سرچ را نوشتم اما کاری انجام نمیشود!!
در قسمت 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
پنج شنبه 10 تیر 1389, 23:19 عصر
سلام، ببینید من برای اِیجکس گفتم اونا همه باید باشه که شما تنها اون قسمتهارو عوض کنید و بقیه باید باشند تا شما بتونید جواب بگیرید.

shekofeh
جمعه 11 تیر 1389, 11:44 صبح
سلام، ببینید من برای اِیجکس گفتم اونا همه باید باشه که شما تنها اون قسمتهارو عوض کنید و بقیه باید باشند تا شما بتونید جواب بگیرید.

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

shekofeh
جمعه 11 تیر 1389, 22:34 عصر
لطفا برنامه نویسان اشکال برنامه ام را بگویید.میخواهم تحویل پروژه بدهم.