สอบถาม แสดงผลคิวรี่จากการส่งค่าใน form แล้วแสดงผลหน้าเดิมน่ะครับ javascript

kanin03 · 25 มกราคม 2013, 20:42:07

คือผมอยากได้หน้า search ที่ส่งค่าแบบ get, หรือต้องเป็น post ไปคิวรี่ข้อมูลจาก db แล้วมาแสดงผลที่หน้าเดิมน่ะครับ
แบบไม่เปลี่ยนหน้าอ่ะครับ ควรจะต้องทำยังไงหรอครับ js,ajax

แนะนำหน่อยนะครับ

gubaaball · 25 มกราคม 2013, 20:55:37

Ajax ครับ อธิบายก็ยาวเลย ลองเสิร์ทหาดูน่ะครับเยอะแยะเลย ไม่ยากอย่างที่คิดครับ

MapTwoZa · 25 มกราคม 2013, 20:59:27

ทำหน้า output ไว้ ก็โหลดหน้านั้นมาแสดงใน div
jquery >> $('#divOutput').load('output.php?param1=xxx&param2=xxx');

rest webservice ก็ใช้
$.ajax({
type: "GET",
dataType: "jsonp",
url: "output.php?param1=xxx&param2=xxx",
success: function(data){
alert(data);
}
});

kanin03 · 25 มกราคม 2013, 21:11:56

ขอบคุณครับคุณ MapTwoZa ขอถามหน่อยครับ
jquery >> $('#divOutput').load('output.php?param1=xxx&param2=xxx');

อันนี้คือต้องไปโหลด jquery มาใส่ด้วยใช่ไหมครับถึงจะใช้ได้แล้วถ้าทำแบบนี้หน้า index ต้องเขียนรอรับข้อมูลแบบนี้ปะครับ
<div id="divOutput" style="display:none">Loading....</div>

สอบถามอีกนิดครับ แบบนี้คือกรณี post ถูกต้องไหมครับ แล้วแบบนี้เหมาะไหม หรือว่ามีวิธีแบบอื่นที่ดีกว่า

ถ้าผมเขียนแบบนี้ โดยหน้า index ส่งไปหน้า seach แล้ว ให้ result แสดงหน้า index

โค้ด เลือก

$.post("search.php", { code: $("#code").val() },function(result){ $("#show").html(result); })

จะดีหรือปล่าวอะครับ หรือวิธีนี้ไม่เหมาะอะครับ

MapTwoZa · 26 มกราคม 2013, 00:08:16

แปปนะ เด๋วมาตอบ ดอทอยู่ 55

kanin03 · 26 มกราคม 2013, 00:42:28

ผมมีคำถามอะครับ คือตอนนี้ทำได้แล้วครับแต่ติดปัญหาคือ
ถ้าผมใช้วิธีกด enter ใน textbox มันจะส่งค่าไปแบบนี้ hxxp://localhost/barcode/?code=0 ซึ่งที่อยู่จริงๆมันอยู่ที่นี่ hxxp://localhost/barcode/search.php?code=0

แต่ถึงมันจะไปถูกมันก็ไม่เข้า ajax อยู่ดี

ซึ่งถ้าใช้วิธีกดปุ่ม button มันใช้งานได้แล้ว
อันนี้ code ของผมอะครับ
หน้า index

โค้ด เลือก


<script type="text/javascript">
function search(){
			var cd = document.getElementById('code').value;
			$.get("search.php", {
			code: $("#code").val()}, 
				function(data){
					$("#div_show").html(data);
				}
			);
		}
</script>
<form action="" method="get">
			<input id="code" name="code" type="text" onkeypress="if(event.keyCode==13){ search(); }" autofocus/>
			<input type="button" id="btn1" value="ค้นหา" onclick="search()" />
			</form>

ส่วนหน้า search.php ก้ คิวรี่ธรรมดาแล้ว echo เฉยๆปกติอะครับ

โค้ด เลือก


ตย.
echo $_GET['code'];

MapTwoZa · 26 มกราคม 2013, 01:42:19

1. div เปล่าๆครับไม่ใช่ display:none
2. ขอ code แบบเต็มๆหน่อยฮะ เด๋วดูให้

3. เวลาใช้ get ผมใช้งี้
jQuery.get('checkregister.php?username='+username, function(data){
alert(data);
});

kanin03 · 26 มกราคม 2013, 01:56:01

code หน้า index ครับ

โค้ด เลือก

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Barcode!</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="TopHead">
    <div class="Logo">
		<img width="120" height="22" alt="TNP-LOGO" src="images/logo.png">
	</div>
	<script type="text/javascript">
	function search(){
			var cd = document.getElementById('code').value;
			$.get("search.php", {
			code: $("#code").val()}, 
				function(data){
					$("#div_show").html(data);
				}
			);
			document.getElementById("code").value="";
			document.getElementById("code").focus();
		}
		/*function search(){
		var cd = document.getElementById('code').value;
			$.get(
				'search.php?code=' cd,
				function(data) {
					$('#div_show').html(data);
				},
				'html'
			);
		}*/ // onclick="search()"
	</script>
    <div class="Menu">
		<div class="search-wrap">
			<form action="" method="get">
			<input id="code" name="code" type="text" onkeydown="if(event.keyCode==13) search();" autofocus/>
			<input type="button" id="btn1" value="ค้นหา" onclick="search()" />
			</form>
		</div>
	</div>
<div class="Clear"></div>
</div>
<div class="Content"><div id="div_show"></div></div>
</body>
</html>

code หน้า search

โค้ด เลือก

<?php
include("config/config.inc.php");
//if(isset($_POST['code']){
	$search = $_GET['code'];
	$result = mysql_query("SELECT * FROM barcode WHERE code LIKE '$search'");
	if (mysql_num_rows($result) <= 0 ){
		echo "ไม่พบข้อมูล";
	}else{
		$sql = "SELECT * FROM barcode WHERE code LIKE '$search'";
		$Query = mysql_query($sql) or die ("Error Query [".$sql."]");
		while($objResult = mysql_fetch_array($Query)){
			echo $objResult[code];
			echo $objResult[name];	
		}
	}
//}else{
	//echo 'Error';
//}
?>

[/code]

MapTwoZa · 26 มกราคม 2013, 03:00:54

อันนี้ที่ผมลองแก้ให้

โค้ด เลือก


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Barcode!</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
</head>
<body>
<div class="TopHead">
    <div class="Logo">
		<img width="120" height="22" alt="TNP-LOGO" src="images/logo.png">
	</div>
	<script type="text/javascript">
	function search(){
			
			var cd = document.getElementById('code').value;
			alert
			jQuery.get('test2.php?code=55', function(data){
				$('#div_show').html(data);
				});

			
			document.getElementById("code").value="";
			document.getElementById("code").focus();
		}
	</script>
    <div class="Menu">
		<div class="search-wrap">
			<form action="" method="get">
			<input id="code" name="code" type="text" onkeydown="if (event.keyCode==13) search();" onkeypress="if (event.keyCode==13)return false;" autofocus/>
			<input type="button" id="btn1" value="ค้นหา" onclick="search()" />
			</form>
		</div>
	</div>
<div class="Clear"></div>
</div>
<div class="Content"><div id="div_show"></div></div>
</body>
</html>

สิ่งที่แก้
1. เวลากด enter มันจะ submit form อ่ะครับ มันเลยไม่ไปโหลดมาให้ เลยเพิ่ม onkeypress = "if (event.keyCode == 13) return false;"
2. function search

kanin03 · 26 มกราคม 2013, 19:16:35

ขอบคุณ มากๆเลยครับทำได้แล้วครับ