ให้เรตสมาชิก: 3 / 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 ได้
โดย bolue พ 10 มิ.ย. 2020 2:03 pm บอร์ด MindPHP News & Feedback
1
50
พ 10 มิ.ย. 2020 2:14 pm โดย mindphp
สิ่งที่เกิดขึ้นของ pgAdmin 4 v4.22
โดย bolue พ 10 มิ.ย. 2020 10:01 am บอร์ด Python Knowledge
0
42
พ 10 มิ.ย. 2020 10:01 am โดย bolue
netbeans เชื่อมกับ gitlab ไม่ได้
โดย bolue อ 09 มิ.ย. 2020 6:36 pm บอร์ด Programming - C/C++ & java & Python
1
55
พ 10 มิ.ย. 2020 10:04 am โดย bolue
การเก็บรักษาเอกสารทางบัญชี
โดย natthanit.r2538 อ 09 มิ.ย. 2020 6:32 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
39
อ 09 มิ.ย. 2020 6:32 pm โดย natthanit.r2538
เอกสารที่ใช้ประกอบในการลงบัญชี
โดย natthanit.r2538 อ 09 มิ.ย. 2020 4:48 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
36
อ 07 ก.ค. 2020 11:12 am โดย thatsawan
วิธีการ ลบตารางออกจากฐานข้อมูล Postgres ด้วย Module psycopg2
โดย bolue อ 09 มิ.ย. 2020 3:44 pm บอร์ด Python Knowledge
0
32
อ 09 มิ.ย. 2020 3:44 pm โดย bolue
วิธีการ สร้างตารางข้อมูลในฐานข้อมูล Postgres ด้วย Module psycopg2
โดย bolue อ 09 มิ.ย. 2020 3:21 pm บอร์ด Python Knowledge
0
98
อ 09 มิ.ย. 2020 3:21 pm โดย bolue
สอบถาม ผมจะทำ wedhook Messenger ของ fackbook ทำตามวิธี ของ Getting Started แล้วไม่ได้ครับ
โดย jirawoot อ 09 มิ.ย. 2020 2:39 pm บอร์ด Programming - C/C++ & java & Python
0
44
อ 09 มิ.ย. 2020 2:39 pm โดย jirawoot
วิธีการ ลบข้อมูลออกจากฐานข้อมูล Postgres ด้วย Module psycopg2
โดย bolue อ 09 มิ.ย. 2020 1:49 pm บอร์ด Python Knowledge
0
38
อ 09 มิ.ย. 2020 1:49 pm โดย bolue
วิธีการ แก้ไขข้อมูลในฐานข้อมูล Postgres ด้วย Module psycopg2
โดย bolue อ 09 มิ.ย. 2020 1:39 pm บอร์ด Python Knowledge
0
62
อ 09 มิ.ย. 2020 1:39 pm โดย bolue
วิธีการ เพิ่มข้อมูลลงฐานข้อมูล Postgres ด้วย Module psycopg2
โดย bolue อ 09 มิ.ย. 2020 1:30 pm บอร์ด Python Knowledge
0
37
อ 09 มิ.ย. 2020 1:30 pm โดย bolue
ngrok คืออะไร - ทำ Localhost เครื่องของผู้พัฒนาอยู่ในเครื่องสามารถ online บน internet ได้
โดย jirawoot อ 09 มิ.ย. 2020 11:37 am บอร์ด Python Knowledge
0
78
อ 09 มิ.ย. 2020 11:37 am โดย jirawoot
การบัญชีต้นทุน กับการบัญชีบัญชีบริหารเกี่ยวข้องกันอย่างไร
โดย natthanit.r2538 จ 08 มิ.ย. 2020 4:50 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
39
จ 08 มิ.ย. 2020 4:50 pm โดย natthanit.r2538
หนังสือรับรองหักภาษี ณ ที่จ่าย มีความสำคัญอย่างไร
โดย natthanit.r2538 จ 08 มิ.ย. 2020 3:13 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
41
จ 08 มิ.ย. 2020 3:13 pm โดย natthanit.r2538
วิธีการ ทำตาราง ด้วย bootstrap เพื่อความสวยงาม ทำตารางย่อตามหน้าจอได้
โดย bolue จ 08 มิ.ย. 2020 10:56 am บอร์ด Booststap Knowledge
0
69
จ 08 มิ.ย. 2020 10:56 am โดย bolue
ส่วนสำคัญของใบกำกับภาษี
โดย natthanit.r2538 ส 06 มิ.ย. 2020 5:56 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
68
ส 06 มิ.ย. 2020 5:56 pm โดย natthanit.r2538
วิธีการ ไล่สีพื้นหลัง โดย css
โดย bolue ส 06 มิ.ย. 2020 5:03 pm บอร์ด CSS Knowledge
1
74
จ 08 มิ.ย. 2020 1:52 pm โดย LEG
วิธีการสร้าง nav-tabs โดย bootstrap
โดย bolue ส 06 มิ.ย. 2020 4:52 pm บอร์ด Booststap Knowledge
0
77
ส 06 มิ.ย. 2020 4:52 pm โดย bolue
วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript
โดย bolue ส 06 มิ.ย. 2020 4:24 pm บอร์ด Jquery & Ajax Knowledge
0
64
ส 06 มิ.ย. 2020 4:24 pm โดย bolue
กดภาพเล็กๆ ด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ ทำยังไง
โดย bolue ส 06 มิ.ย. 2020 11:20 am บอร์ด JavaScript & Jquery Ajax
2
98
จ 08 มิ.ย. 2020 1:52 pm โดย LEG