|
|
|
ajax + php สอบถามเรื่องเมื่อมีการซับมิตข้อมูล(form.php)แล้วเข้าฐานข้อมูลแล้วมายังอีกหน้าแรก(index.php)โดยไม่มีการรีเฟรช |
|
|
|
|
|
|
|
หลักการง่ายๆ
เปิดไฟล์ index.php
popup หน้ากรอกข้อมูล
กรอกเสร็จ ตรวจสอบ ส่ง ajax request สิ่งที่ต้องการไปยัง server
server ตอบกลับ ตรวจสอบสิ่งที่ต้องการ
จะ response อะไรก็ว่ากันไป
เสร็จแล้ว ซ่อนหน้า popup
ใช้ javascript(client) ในการโต้ตอบกับ php (server)
|
|
|
|
|
Date :
2014-12-18 02:33:18 |
By :
Chaidhanan |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ในหน้า save ใส่ echo แสดงผลบันทึกก็ได้ครับ
Code (PHP)
echo "<script>alert('ระบบบันทึกข้อมูลเรียบร้อยแล้ว'); window.parent.location='index.php?mode=edit&cat=".$id."';</script>";
|
|
|
|
|
Date :
2014-12-18 09:19:23 |
By :
LAGO |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ขอบคุณสำหรับแนวการคิดนะคะ ขอลองไปทดลองก่อนค่ะ ขอบคุณมากค่าา -/\-
|
|
|
|
|
Date :
2014-12-18 16:10:02 |
By :
munkminkgirl |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ยังไม่ได้เลยค่ะ ใครพอจะเขียนโค้ดง่ายๆพอเป็นตัวอย่างให้หน่อยได้ไหมคะ ขอบคุณมากๆค่า
|
|
|
|
|
Date :
2014-12-18 22:57:23 |
By :
munkminkgirl |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
เอาโค้ดมาดูครับ
|
|
|
|
|
Date :
2014-12-18 23:01:14 |
By :
ทิต |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ตอบความคิดเห็นที่ : 5 เขียนโดย : ทิต เมื่อวันที่ 2014-12-18 23:01:14
รายละเอียดของการตอบ ::
หนูเอาโค้ดมาให้ดูแล้วนะคะะะ > ___ <
อันนี้เป็นหน้าแรกค่ะ
Code (PHP)
<html>
<head>
<title>WTF</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body Onload="JavaScript:doCallAjax('1');">
<div id = "total">
<div class = "header">
<h1>Where’s The Food.</h1>
</div>
<div id="myDiv">
<button type="button" class = "mybt" onclick="myFunction()">แนะนำอาหาร</button>
<div class = "containner">
<h2>Choose me if you want.</h2>
<table width="680" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="168" valign="top">
<?
$objConnect = mysql_connect("localhost","","") or die("Error Connect to Database");
mysql_query("SET NAMES UTF8");
mysql_query("SET character_set_results=utf8");
$objDB = mysql_select_db("");
$strSQL = "SELECT * FROM files ORDER BY FilesID ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<?
echo"<table border=\"0\" cellspacing=\"1\" cellpadding=\"1\"><tr>";
$intRows = 0;
while($objResult = mysql_fetch_array($objQuery))
{
$intRows++;
echo "<td>";
?>
<a href="JavaScript:doCallAjax('<?=$objResult["FilesID"];?>');">
<!--onMouseOver="JavaScript:doCallAjax('<?=$objResult["GalleryID"];?>');"-->
<img src="ViewImage.php?FilesID=<?=$objResult["FilesID"];?>" width="70" height="53" border="0"></a>
<?
echo"</td>";
if(($intRows)%3==0)
{
echo"</tr>";
}
else
{
echo "<td><br/>";
}
}
echo"</tr></table>";
?>
<?
mysql_close($objConnect);
?>
</td>
<td width="250" height = "250" valign="top"><span id="mySpan"></span></td>
</tr>
</table>
</div>
</div>
<div class= "footer" id="foot">
</div>
</div>
</body>
</html>
อันนี้เป็นหน้า insert ข้อมูลค่ะ
Code (PHP)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ThaiCreate.Com Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class = "food" >
<form id="myForm" name="myForm" method="post" enctype="multipart/form-data" action="PageUploadToMySQL2.php" >
<h2>What do you Recommend?</h2>
<div>ชื่อเมนู : <input type="text" name="txtName" id="txtName"></div><br/>
<div>ราคา : <input type="text" name="txtPrice" id="txtPrice"> บาท</div><br/>
<div>ร้าน : <input type="text" name="txtShopname" id="txtShopname"></div><br/>
<div>รูปภาพ : <input type="file" name="filUpload"></div><br/>
<input name="btnSubmit" class = "mybt" id = "sub" type="submit" value="Submit">
<button type="button" class = "mybt" onclick="myFunction1()">Back</button>
</form>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<span id="result"></span>
</div>
</div>
</body>
</html>
อันนี้หน้า save ค่ะ
Code (PHP)
<?
if($_FILES["filUpload"]["name"] != "")
{
//*** Read file BINARY ***'
$fp = fopen($_FILES["filUpload"]["tmp_name"],"r");
$ReadBinary = fread($fp,filesize($_FILES["filUpload"]["tmp_name"]));
fclose($fp);
$FileData = addslashes($ReadBinary);
$objConnect = mysql_connect("localhost","","") or die("Error Connect to Database");
$objDB = mysql_select_db("");
mysql_query("SET NAMES UTF8");
mysql_query("SET character_set_results=utf8");
$strSQL = "INSERT INTO files ";
$strSQL .="(Name,Price,Shopname,FilesName) VALUES ('".$_POST["txtName"]."','".$_POST["txtPrice"]."','".$_POST["txtShopname"]."','".$FileData."')";
$objQuery = mysql_query($strSQL);
header("location:AjaxPHPGallery1.php");
}
?>
</body>
</html>
อันนี้หน้าสคริปค่ะ
Code (JavaScript)
var HttPRequest = false;
function loadXMLDoc(url,cfunc)
{
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=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("PageUploadToMySQL1.php",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
function myFunction1()
{
loadXMLDoc("AjaxPHPGallery1.php",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("total").innerHTML=xmlhttp.responseText;
}
});
}
function doCallAjax(ID) {
HttPRequest = false;
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;
}
var url = 'AjaxPHPGallery2.php';
var pmeters = "tID="+ID;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
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;
}
}
}
คือตอนนี้หนู insert ข้อมูลเข้าฐานข้อมูลแล้วนะคะ แต่หนูคิดว่ายังไม่ใช่แบบ ajax ใช้วิธีเรียก header("location:AjaxPHPGallery1.php");
แบบนี้ไปก่อน ช่วยดูให้หน่อยนะคะ
|
ประวัติการแก้ไข 2014-12-18 23:39:47 2014-12-18 23:40:00 2014-12-19 01:24:34
|
|
|
|
Date :
2014-12-18 23:38:24 |
By :
munkminkgirl |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ผมไม่แน่ใจกับคำถามเท่าไรนะครับลองดูตัวนี้ดูครับ ถูกใจหรือไม่ถูกใจก็ลองประยุกต์เอาละกันครับ
อันนี้แบบ jquery.fancybox http://st.bbl.ac.th/1/index.php
หน้า form นะครับ
Code (PHP)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ThaiCreate.Com Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class = "food" >
<form action="PageUploadToMySQL2.php" method="post" enctype="multipart/form-data" name="form2" target="xData">
<h2>What do you Recommend?</h2>
<div>ชื่อเมนู : <input type="text" name="txtName" id="txtName"></div><br/>
<div>ราคา : <input type="text" name="txtPrice" id="txtPrice"> บาท</div><br/>
<div>ร้าน : <input type="text" name="txtShopname" id="txtShopname"></div><br/>
<div>รูปภาพ : <input name="files" type="file" id="files"></div><br/>
<input name="btnSubmit" class = "mybt" id = "sub" type="submit" value="Submit">
<button type="button" class = "mybt" onclick="myFunction1()">Back</button>
</form>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<span id="result"></span>
</div>
</div>
</body>
</html>
อันนี้หน้า save นะครับ
Code (PHP)
<?
session_start();
include('config.php');
?>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<?
if($id<1){
$filesSQL = "insert into files set
Name='$txtName',
Price='$txtPrice',
Shopname='$txtShopname'";
mysql_db_query($dbname, $filesSQL);
$id = mysql_insert_id();
}
//ตรวจสอบไฟล์ภาพ
if($files_size>10) {
$len = strlen($files_name);
$filetype = strtolower(substr($files_name,$len-3,3));
if($filetype=="jpg" || $filetype=="png" || $filetype=="gif" ) {
// เปลี่ยนชื่อไฟล์
$filenewcon = strstr($files_name,'.');
$newname = mktime();
$file = "files/pic-".$newname.$filenewcon;
if (!copy($files, $file)) { alert('ไม่สามารถอัพโหลดไฟล์ไม่สำเร็จ ไฟล์อาจมีขนาดใหญ่เกินไป กรุณาตรวจสอบอีกครั้ง'); exit(); }
if(is_file($oldfile)) unlink($oldfile);
//เป็นไฟล์
} else {
err('ระบบ ไม่อนุญาตให้อัพโหลดไฟล์นี้ !!','err_txt');
}
} else {
$file= $oldfile;
}
$filesSQL = "update files set FilesName='".$file."' where FilesID='".$id."'";
mysql_query($filesSQL);
echo "<script>alert('ระบบบันทึกข้อมูลเรียบร้อยแล้ว'); window.parent.location='index.php';</script>";
?>
|
ประวัติการแก้ไข 2014-12-19 01:46:13
|
|
|
|
Date :
2014-12-19 00:55:20 |
By :
LAGO |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 04
|