ต้องการทราบวิธีการค้นหาภาพยนตร์ ด้วย ชื่อเรื่อง เรื่องย่อ และชื่
พอดีว่า หนู ทำโปรเจก vod อ่ะค่ะ แล้ว จำเป็นต้องนำ ajax มาช่วยด้วย ซึ่งหนูไม่เคยใช้ ajax เลย
ตอนนี้ หนู ต้องการทราบวิธีการค้นหาภาพยนตร์ ด้วย ชื่อเรื่อง เรื่องย่อ และชื่อนักแสดง ด้วย ajax ค่ะ
ไม่ทราบว่า ต้องเริ่มต้นยังไง ดีคะ
ตาราง ของภาพยนตร์ หนูสร้าง ดังนี้ค่ะ
Table structure for table `movie`
--
CREATE TABLE `movie` (
`movie_id` int(11) NOT NULL auto_increment COMMENT 'รหัสภาพยนตร์',
`movie_name` varchar(100) NOT NULL COMMENT 'ชื่อภาพยนตร์',
`movie_adstract` text NOT NULL COMMENT 'เรื่องย่อ',
`movie_genre_id` int(11) NOT NULL COMMENT 'รหัสประเภทภาพยนตร์',
`movie_zone_id` int(11) NOT NULL COMMENT 'รหัสโซนภาพยนตร์',
`movie_image` blob NOT NULL COMMENT 'รูปภาพยนตร์',
`movie_number_visitor` bigint(20) NOT NULL COMMENT 'จำนวนผู้เข้าชม',
`movie_file_trailer` varchar(50) NOT NULL COMMENT 'ไฟล์ภาพยนตร์ตัวอย่าง',
`movie_file_full` varchar(50) NOT NULL COMMENT 'ไฟล์ภาพยนตร์เต็ม',
PRIMARY KEY (`movie_id`)
) ENGINE=MyISAM DEFAULT CHARSET=tis620 COMMENT='ตารางภาพยนตร์' AUTO_INCREMENT=1 ;
และตารางนักแสดง ดังนี้ค่ะ
Table structure for table `actor`
--
CREATE TABLE `actor` (
`actor_id` int(11) NOT NULL COMMENT 'รหัสนักแสดง',
`actor_name` varchar(20) NOT NULL COMMENT 'ชื่อนักแสดง',
`actor_lname` varchar(30) NOT NULL COMMENT 'นามสกุลนักแสดง',
PRIMARY KEY (`actor_id`)
) ENGINE=MyISAM DEFAULT CHARSET=tis620 COMMENT='ตารางนักแสดง';
พี่ผู้รู้ ช่วยให้คำตอบหนูหน่อยนะคะ ขอบคุณค่ะ
แต่เมื่อนำดัดแปลงเป็นตารางภาพยนตร์ ของหนูดู ก็ แสดงผลไม่สำเร็จ ค่ะ หนูส่งไฟล์ มาให้ พี่ ดู นะคะ
//AjaxPHPEditRecord1.php
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="JavaScript">
var HttpRequest = false;
<!-- // ********************************* -->
function checkBrowser(){
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttpRequest = new XMLHttpRequest();
if (HttpRequest.overrideMimeType) {
HttpRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttpRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
}
<!-- //************************************** -->
function doCallAjax(Mode) {
HttpRequest = false;
checkBrowser();
var url = 'AjaxPHPEditRecord2.php';
if(Mode == "ADD") {
// var pmeters = "tmovie_id=" + encodeURI( document.getElementById("txtmovie_id").value) +
var pmeters ="tmovie_name=" + encodeURI( document.getElementById("atxtmovie_name").value ) +
"&tmovie_adstract=" + encodeURI( document.getElementById("atxtmovie_adstract").value ) +
"&tmovie_genre_ide=" + encodeURI( document.getElementById("atxtmovie_genre_id").value ) +
"&tmovie_zone_id=" + encodeURI( document.getElementById("atxtmovie_zone_id").value ) +
//"&tmovie_image=" + encodeURI( document.getElementById("atxtmovie_image").value ) +
"&tmovie_number_visitor=" + encodeURI( document.getElementById("atxtmovie_number_visitor").value ) +
"&tmovie_file_trailer=" + encodeURI( document.getElementById("atxtmovie_file_trailer").value ) +
"&tmovie_file_full=" + encodeURI( document.getElementById("atxtmovie_file_full").value ) +
"&tMode=" + Mode;
alert(pmeters);
}
if(Mode == "UPDATE") {
var pmeters = "tmovie_id=" + encodeURI( document.getElementById("txtmovie_id").value) +
"tmovie_name=" + encodeURI( document.getElementById("atxtmovie_name").value ) +
"&tmovie_adstract=" + encodeURI( document.getElementById("atxtmovie_adstract").value ) +
"&tmovie_genre_ide=" + encodeURI( document.getElementById("atxtmovie_genre_id").value ) +
"&tmovie_zone_id=" + encodeURI( document.getElementById("atxtmovie_zone_id").value ) +
//"&tmovie_image=" + encodeURI( document.getElementById("atxtmovie_image").value ) +
"&tmovie_number_visitor=" + encodeURI( document.getElementById("atxtmovie_number_visitor").value ) +
"&tmovie_file_trailer=" + encodeURI( document.getElementById("atxtmovie_file_trailer").value ) +
"&tmovie_file_full=" + encodeURI( document.getElementById("atxtmovie_file_full").value )+
"&tMode=" + Mode;
}
if(Mode == "LIST") {
var pmeters = "";
}
HttpRequest.open('POST',url,true);
HttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
HttpRequest.setRequestHeader("Content-length", pmeters.length);
HttpRequest.setRequestHeader("Connection", "close");
HttpRequest.send(pmeters);
HttpRequest.onreadystatechange = function()
{
if(HttpRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "<image src='images/ajax_load.gif'>";
}
if(HttpRequest.readyState == 4) // Return Request
{
document.getElementById("editForm").style.display = 'none';
document.getElementById("addForm").style.display = 'none';
document.getElementById("startAdd").style.display = '';
document.getElementById("txtmovie_id").value = '';
document.getElementById("txtmovie_name").value = '';
document.getElementById("txtmovie_adstract").value = '';
document.getElementById("txtmovie_genre_id").value = '';
document.getElementById("txtmovie_zone_id").value = '';
// document.getElementById("txtmovie_image").value = '';
document.getElementById("txtmovie_number_visitor").value = '';
document.getElementById("txtmovie_file_trailer").value = '';
document.getElementById("txtmovie_file_full").value = '';
document.getElementById("mySpan").innerHTML = HttpRequest.responseText;
}
}
}
function ShowADD() {
document.getElementById("addForm").style.display = '';
document.getElementById("editForm").style.display = 'none';
document.getElementById("startAdd").style.display = 'none';
document.getElementById("txtmovie_id").value = '';
document.getElementById("txtmovie_name").value = '';
document.getElementById("txtmovie_adstract").value = '';
document.getElementById("txtmovie_genre_id").value = '';
document.getElementById("txtmovie_zone_id").value = '';
// document.getElementById("txtmovie_image").value = '';
document.getElementById("txtmovie_number_visitor").value = '';
document.getElementById("txtmovie_file_trailer").value = '';
document.getElementById("txtmovie_file_full").value = '';
}
function ShowEdit(smovie_id,smovie_name,smovie_adstract,smovie_genre_id,smovie_zone_id,smovie_image,smovie_number_visitor,smovie_file_trailer,smovie_file_full) {
document.getElementById("editForm").style.display = '';
document.getElementById("addForm").style.display = 'none';
document.getElementById("startAdd").style.display = 'none';
document.getElementById("txtmovie_id").value = smovie_id;
document.getElementById("txtmovie_name").value = smovie_name;
document.getElementById("txtmovie_adstract").value = smovie_adstract;
document.getElementById("txtmovie_genre_id").value = smovie_genre_id;
document.getElementById("txtmovie_zone_id").value = smovie_zone_id;
//document.getElementById("txtmovie_image").value = smovie_image;
document.getElementById("txtmovie_number_visitor").value = smovie_number_visitor;
document.getElementById("txtmovie_file_trailer").value = smovie_file_trailer;
document.getElementById("txtmovie_file_full").value = smovie_file_full;
}
function ajaxDelete(Mode, txtmovie_id) {
HttpRequest = false;
checkBrowser();
//alert('test');
var url = 'AjaxPHPEditRecord2.php';
var pmeters = "tmovie_id=" + txtmovie_id + "&tMode=" + Mode;
HttpRequest.open('POST',url,true);
HttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
HttpRequest.setRequestHeader("Content-length", pmeters.length);
HttpRequest.setRequestHeader("Connection", "close");
HttpRequest.send(pmeters);
HttpRequest.onreadystatechange = function(){
if(HttpRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttpRequest.readyState == 4) // Return Request
{
// document.getElementById("mySpan").innerHTML = HttpRequest.responseText;
doCallAjax('LIST');
}
}
}
</script>
<body Onload="JavaScript:doCallAjax('LIST');">
<h1>:: Movie ::</h1>
<form enctype="multipart/form-data" name="frmMain">
<span id="editForm" style="display='none';">
<table width="700" border="1">
<tr>
<th width="91">movie_id</th>
<th width="98">movie_name</th>
<th width="198">movie_adstract</th>
<th width="97">movie_genre_id</th>
<th width="59">movie_zone_id</th>
<th width="71">movie_image</th>
<th width="198">movie_number_visitor</th>
<th width="97">movie_file_trailer</th>
<th width="59">movie_file_full</th>
</tr>
<tr>
<td><input type="text" name="txtmovie_id" id="txtmovie_id" size="5" disabled="true"></td>
<td><input type="text" name="txtmovie_name" id="txtmovie_name" size="25"></td>
<td><label for="textarea"></label>
<textarea name="textarea" cols="50" rows="10" id="textarea"></textarea></td>
<td><input type="text" name="txtmovie_genre_id" id="txtmovie_genre_id" size="5"></td>
<td ><input type="text" name="txtmovie_zone_id" id="txtmovie_zone_id" size="5"></td>
<td><input type="file" name="filefieldmovie_image" id="filefieldmovie_image">
<td><input type="text" name="txtmovie_number_visitor" id="txtmovie_number_visitor" size="5"> </td>
<td><input type="text" name="txtmovie_file_trailer" id="txtmovie_file_trailer" size="25"></td>
<td><input type="text" name="txtmovie_file_full" id="txtmovie_file_full" size="25"></td>
</tr>
</table>
<input type="button" name="btnUpdate" id="btnUpdate" value="Update" OnClick="JavaScript:doCallAjax('UPDATE');">
<input type="button" name="btnCancelUpdate" id="btnCancelUpdate" value="CancelUpdate" OnClick="JavaScript:doCallAjax('LIST');">
<br><br>
</span>
<span id="addForm" style="display='none';">
<table width="700" border="1">
<tr>
<th width="91">movie_id</th>
<th width="98">movie_name</th>
<th width="198">movie_adstract</th>
<th width="97">movie_genre_id</th>
<th width="59">movie_zone_id</th>
<th width="71">movie_image</th>
<th width="198">movie_number_visitor</th>
<th width="97">movie_file_trailer</th>
<th width="59">movie_file_full</th>
</tr>
<tr>
<td><input type="text" name="txtmovie_id" id="txtmovie_id" size="5" disabled="true"></td>
<td><input type="text" name="txtmovie_name" id="txtmovie_name" size="25"></td>
<td><label for="textarea"></label>
<textarea name="textarea" cols="50" rows="10" id="textarea"></textarea></td>
<td><input type="text" name="txtmovie_genre_id" id="txtmovie_genre_id" size="5"></td>
<td ><input type="text" name="txtmovie_zone_id" id="txtmovie_zone_id" size="5"></td>
<td><input type="file" name="filefieldmovie_image" id="filefieldmovie_image">
<td><input type="text" name="txtmovie_number_visitor" id="txtmovie_number_visitor" size="5"> </td>
<td><input type="text" name="txtmovie_file_trailer" id="txtmovie_file_trailer" size="25"></td>
<td><input type="text" name="txtmovie_file_full" id="txtmovie_file_full" size="25"></td>
</tr>
</table>
<input type="button" name="btnADD" id="btnADD" value="ADD" OnClick="JavaScript:doCallAjax('ADD');">
<input type="button" name="btnCancelADD" id="btnCancelADD" value="CancelADD" OnClick="JavaScript:doCallAjax('LIST');">
<br><br>
</span>
<div id="startAdd" style="display='none';">
<input type="button" name="btnShowADD" id="btnShowADD" value="ADD" OnClick="JavaScript:ShowADD();">
</div>
<span id="mySpan"></span>
</form>
</body>
</html>
//AjaxPHPEditRecord2.php
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<?php
include "conn.php";
$strMode = $_POST["tMode"];
$strID = $_POST["tmovie_id"];
if($strMode == "ADD") {
$strSQL = "INSERT INTO movie SET ";
$strSQL .="movie_name = '".$_POST["tmovie_name"]."' ";
$strSQL .=",movie_adstract = '".$_POST["tmovie_adstract"]."' ";
$strSQL .=",movie_genre_id = '".$_POST["tmovie_genre_id"]."' ";
$strSQL .=",movie_zone_id = '".$_POST["tmovie_zone_id"]."' ";
$strSQL .=",movie_image = '".$_POST["tmovie_image"]."' ";
$strSQL .=",movie_number_visitor = '".$_POST["tmovie_number_visitor"]."' ";
$strSQL .=",movie_file_trailer = '".$_POST["tmovie_file_trailer"]."' ";
$strSQL .=",movie_file_full = '".$_POST["tmovie_file_full"]."' ";
// $strSQL .="WHERE movie_id = '".$_POST["tmovie_id"]."' ";
$objQuery = mysql_query($strSQL);
} else if($strMode == "UPDATE") {
$strSQL = "UPDATE movie SET ";
$strSQL .="movie_name = '".$_POST["tmovie_name"]."' ";
$strSQL .=",movie_adstract = '".$_POST["tmovie_adstract"]."' ";
$strSQL .=",movie_genre_id = '".$_POST["tmovie_genre_id"]."' ";
$strSQL .=",movie_zone_id = '".$_POST["tmovie_zone_id"]."' ";
$strSQL .=",movie_image = '".$_POST["tmovie_image"]."' ";
$strSQL .=",movie_number_visitor = '".$_POST["tmovie_number_visitor"]."' ";
$strSQL .=",movie_file_trailer = '".$_POST["tmovie_file_trailer"]."' ";
$strSQL .=",movie_file_full = '".$_POST["tmovie_file_full"]."' ";
$strSQL .="WHERE movie_id = '".$_POST["tmovie_id"]."' ";
$objQuery = mysql_query($strSQL);
} else if($strMode == "DELETE") {
$strSQL = "DELETE FROM movie ";
$strSQL .="WHERE movie_id = '".$strID."' ";
$objQuery = mysql_query($strSQL);
}
$strSQL = "SELECT * FROM movie WHERE Name LIKE '%".$strSearch."%' ORDER BY movie_id ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<table width="592" height="54" border="1">
<tr>
<th width="83"> <div align="center">movie_id</div></th>
<th width="119"> <div align="center">movie_name</div></th>
<th width="143"> <div align="center">movie_adstract</div></th>
<th width="95"> <div align="center">movie_genre_id</div></th>
<th width="57"> <div align="center">movie_zone_id</div></th>
<th width="65"> <div align="center">movie_image</div></th>
<th width="83"> <div align="center">movie_number_visitor</div></th>
<th width="119"> <div align="center">movie_file_trailer</div></th>
<th width="143"> <div align="center">movie_file_full</div></th>
<th width="37"> <div align="center">Edit</div></th>
<th width="49"> <div align="center">Delete</div></th>
</tr>
<?
while($objResult = mysql_fetch_array($objQuery))
{
?>
<tr>
<td><div align="center"><?=$objResult["movie_id"];?></div></td>
<td><?=$objResult["movie_name"];?></td>
<td><?=$objResult["movie_adstract"];?></td>
<td><div align="center"><?=$objResult["movie_genre_id"];?></div></td>
<td align="right"><?=$objResult["movie_zone_id"];?></td>
<td align="right"><?=$objResult["movie_image"];?></td>
<td><div align="center"><?=$objResult["movie_number_visitor"];?></div></td>
<td><div align="center"><?=$objResult["movie_file_trailer"];?></div></td>
<td><div align="center"><?=$objResult["movie_file_full"];?></div></td>
<td align="center"><a href="JavaScript:ShowEdit('<?=$objResult["movie_id"];?>','<?=$objResult["movie_name"];?>','<?=$objResult["movie_adstract"];?>','<?=$objResult["movie_genre_id"];?>','<?=$objResult["movie_zone_id"];?>','<?=$objResult["movie_image"];?>','<?=$objResult["movie_number_visitor"];?>','<?=$objResult["movie_file_trailer"];?>','<?=$objResult["movie_file_full"];?>')">Edit</a></td>
<td align="center"><a href="JavaScript:ajaxDelete('DELETE','<?=$objResult["movie_id"];?>');" onClick="return confirm('Are you sure you want to delete?')">Del</a></td>
</tr>
<?
}
?>
</table>
<?
mysql_close($objConnect);
?>
</body>
</html>
-----------------------------------------------------// conn.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<?php
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("vod_st");
mysql_query("set names utf8");
?>
</body>
</html>
ที่ผิดก็คือตรงนี้ แสดงว่าค่าค้นหาไม่ส่งมา ก็ต้องย้อนกลับไปดูว่า ค่าค้นหา ส่งมายังไง ครับ หามาใส่ให้ถูก
ถ้าไม่รู้ ลองหาตัวอย่างอื่นๆ ประกอบ เพื่อทำให้ถูกตามหลักการ ตามลิงค์ที่ผมให้ไว้ด้านบน ครับ ลองดูนะครับ