ให้เรตสมาชิก: 1 / 5

ดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

แนะนำการใช้งาน ajax เบื้องต้น เพื่อเตรียมตัวเป็น  "Web programming"

       ajax จะทำให้เราเข้าใจ การทำงานระหว่าง server กับ Client มากขึ้น ajax  เป็นตัวเชื่อมเเละนำ resource มาเเสดงผลโดยไม่ต้อง รีเฟตหน้า ในตัวอย่างจะใช้ ajax ใน jQuery
ตัวอย่างการเขียนคำสั่ง ajax

ไฟล์ตัวอย่าง :: code_7.html
 <!DOCTYPE html>
<html>
<head>
<title> CSS </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
font-size: 36px;
}
#mindphp{
font-size: xx-small;
background-color: #00FF00;
}
.classmindphp{
font-size: larger;
font-style: italic;
}
div {
background-color: #0000FF;
}
p.classmindphp {
background-color:#999999;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#mindphp').load('ser1.php');
})
</script>
</head>
<body>
<div>ตัวอย่าง</div>
<div id="mindphp">Mindphp.com</div>
<div class="classmindphp">ข้อความที่อยู่ใน classmindphp Mindphp.com</div>
<p class="classmindphp">ข้อความที่อยู่ใน classmindphp Tag p</p>
</body>
</html>

 

ไฟล์ตัวอย่าง :: ser_1.php
<?php
echo date('Y-m-d H:i:s');
?>

คำอธิบาย :: เราจะให้ตำแหน่ง #mindphp ให้ดึงค่ามาจาก Server
ผลที่ได้ :: ในตำแหน่งที่ #mindphp ก็จะแสดงผลเป็น 2014-06-20 11:11:47

ตัวอย่างการเขียนคำสั่ง ajax

ไฟล์ตัวอย่าง :: code_8.html
<!DOCTYPE html>
<html>
<head>
<title> CSS </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
font-size: 36px;
}
#mindphp{
font-size: xx-small;
background-color: #00FF00;
}
.classmindphp{
font-size: larger;
font-style: italic;
}
div {
background-color: #0000FF;
}
p.classmindphp {
background-color:#999999;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$.ajax({
url: 'ser1.php',
success: function( data ) {
$( "#mindphp2").html(data);
},
})

})
</script>
</head>
<body>
<div>ตัวอย่าง</div>
<div id="mindphp">Mindphp.com</div>
<div class="classmindphp">ข้อความที่อยู่ใน classmindphp Mindphp.com</div>
<p class="classmindphp">ข้อความที่อยู่ใน classmindphp Tag p</p>
<div id="mindphp2">TODO write content</div>
</body>
</html>

คำอธิบาย :: เราจะให้ตำแหน่ง #mindphp2 ให้ดึงค่ามาจาก Server  มาเเสดงผล  success โคยส่ง method เป็น data
ผลที่ได้ :: ในตำแหน่งที่ #mindphp2 ก็จะแสดงผลเป็น 2014-06-20 11:11:47

ตัวอย่างการเขียนคำสั่ง ajax

ไฟล์ตัวอย่าง :: code_9.html
<!DOCTYPE html>
<html>
<head>
<title> CSS </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
font-size: 36px;
}
#mindphp{
font-size: xx-small;
background-color: #00FF00;
}
.classmindphp{
font-size: larger;
font-style: italic;
}
div {
background-color: #0000FF;
}
p.classmindphp {
background-color:#999999;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#Mybutton').click(function(){
$.ajax({
url: 'ser1.php',
success: function( data ) {
$( "#mindphp2").html(data);

},
})
})
});
</script>
</head>
<body>
<div>ตัวอย่าง</div>
<div id="mindphp">Mindphp.com</div>
<div class="classmindphp">ข้อความที่อยู่ใน classmindphp Mindphp.com</div>
<p class="classmindphp">ข้อความที่อยู่ใน classmindphp Tag p</p>
<div id="mindphp2">TODO write content</div>
<button id="Mybutton">Mybutton</button>
</body>
</html>

คำอธิบาย :: เราจะให้ตำแหน่ง #mindphp2 ให้ดึงค่ามาจาก Server  มาเเสดงผล  success โคยส่ง method เป็น data หลังจากทำการคลิกที่ปุ่ม
ผลที่ได้ :: ในตำแหน่งที่ #mindphp2 ก็จะแสดงผลเป็น 2014-06-20 11:11:47 หลังจากทำการคลิกที่ปุ่ม

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เมื่อมีโอกาสทำงาน...
โดย mindphp พฤ 21 มิ.ย. 2018 12:59 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
4
พฤ 21 มิ.ย. 2018 12:59 am โดย mindphp
R - รายละเอียดวิธีคิดต้นทุนสินค้า [2018-06][007]
โดย Rujikon พ 20 มิ.ย. 2018 8:06 pm บอร์ด Mindphp Task (ทดลองงาน)
0
1
พ 20 มิ.ย. 2018 8:06 pm โดย Rujikon
สอบถามเกี่ยวกับ onclick html
โดย AePongsak พ 20 มิ.ย. 2018 6:33 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
14
พ 20 มิ.ย. 2018 6:33 pm โดย AePongsak
B - ปุ่มปริ้น inv มี 2 ปุ่ม
โดย thatsawan พ 20 มิ.ย. 2018 6:25 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
พ 20 มิ.ย. 2018 6:25 pm โดย thatsawan
R - รายละเอียดวิธีคิดต้นทุนสินค้า [2018-06][007]
โดย Rujikon พ 20 มิ.ย. 2018 4:21 pm บอร์ด Hachanna - Testter
1
9
พ 20 มิ.ย. 2018 9:00 pm โดย Rujikon
B - หน้า Detail ช่องว่างด้านล่างเยอะไป
โดย AePongsak พ 20 มิ.ย. 2018 2:23 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
0
4
พ 20 มิ.ย. 2018 2:23 pm โดย AePongsak
B - คลิกที่รูปแล้วไม่ไปหน้า Detail
โดย AePongsak พ 20 มิ.ย. 2018 2:20 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
0
2
พ 20 มิ.ย. 2018 2:20 pm โดย AePongsak
B - กรอบหน้าดาวน์โหลดไม่โค้ง
โดย AePongsak พ 20 มิ.ย. 2018 2:11 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
0
3
พ 20 มิ.ย. 2018 2:11 pm โดย AePongsak
B - ไม่เห็นตัวเลขที่ แบ่งหน้าสินค้า
โดย AePongsak พ 20 มิ.ย. 2018 2:07 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
0
2
พ 20 มิ.ย. 2018 2:07 pm โดย AePongsak
B - ช่องสินค้ากว้างกว่าช่องอื่น
โดย AePongsak พ 20 มิ.ย. 2018 2:06 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
0
2
พ 20 มิ.ย. 2018 2:06 pm โดย AePongsak
Q - ทำรูปภาพในหน้า order ให้เปลี่ยนสีตามที่เลือก
โดย Parichat พ 20 มิ.ย. 2018 11:17 am บอร์ด Joomla Dev
20
47
พ 20 มิ.ย. 2018 7:53 pm โดย Parichat
เข้าดู supplier แล้วเกิด error
โดย wilawan พ 20 มิ.ย. 2018 10:33 am บอร์ด บริษัท เซนิธ เบบี้ แคร์ จำกัด - Tester
4
9
พ 20 มิ.ย. 2018 11:05 am โดย thatsawan
งานประจำวันที่ 20 มิถุนายน 2561
โดย Rujikon พ 20 มิ.ย. 2018 10:43 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
10
พ 20 มิ.ย. 2018 6:20 pm โดย Rujikon
งานประจำวันที่ 20 มิถุนายน 2561
โดย taemmynatchapon พ 20 มิ.ย. 2018 10:42 am บอร์ด M063 - ณัชพล ชัยวุฒิ
1
5
พ 20 มิ.ย. 2018 7:38 pm โดย taemmynatchapon
B-ไม่สามารถดูข้อมูลใน Lead ได้
โดย watcharin พ 20 มิ.ย. 2018 10:14 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
6
พ 20 มิ.ย. 2018 10:14 am โดย watcharin
งานประจำวันที่ 20 มิถุนายน 2561
โดย Parichat พ 20 มิ.ย. 2018 9:48 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
2
พ 20 มิ.ย. 2018 7:47 pm โดย Parichat
งานประจำวันที่ 20 มิถุนายน 2561
โดย wilawan พ 20 มิ.ย. 2018 9:43 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
3
15
พ 20 มิ.ย. 2018 5:58 pm โดย wilawan
ฺB - ทำไมไม่มีการคำนวณต้นทุนเงินบาทครับ [2018-06][006]
โดย Rujikon อ 19 มิ.ย. 2018 5:40 pm บอร์ด Hachanna - Testter
8
41
พ 20 มิ.ย. 2018 5:34 pm โดย Rujikon
Q - จัดรูปให้ติดกัน
โดย Parichat อ 19 มิ.ย. 2018 3:23 pm บอร์ด Joomla Dev
28
54
อ 19 มิ.ย. 2018 7:00 pm โดย Parichat
Q - สอบถามการตั้งค่า Access Right ของ User ใหม่สำหรับใช้งาน WH/CLM [2018-06][001]
โดย Rujikon อ 19 มิ.ย. 2018 3:53 pm บอร์ด อาร์ซีพี โกลบอล จำกัด - Tester
0
12
อ 19 มิ.ย. 2018 3:53 pm โดย Rujikon