|
|
|
สอบถามปัญหา ajax รับค่าจาก php แบบไม่มีการ action หรือ กดปุ่มใดๆ |
|
|
|
|
|
|
|
ผมได้ประยุกต์จาก code นี้
https://www.webslesson.info/2017/04/inline-edit-data-by-using-x-editable-with-php-and-mysql.html
code PHP แสดงตาราง
Code (PHP)
<table class="table table-bordered table-striped">
<thead>
<tr>
<th width="10%">ID</th>
<th width="40%">Name</th>
<th width="10%">Gender</th>
<th width="30%">Designation</th>
<th width="10%">Age</th>
</tr>
</thead>
<tbody id="employee_data">
</tbody>
</table>
อันนี้ ajax ซึ่งจะรับค่าจาก php คือ $_GET['key']) แบบไม่มีการ action หรือ กดปุ่มใดๆ
Code (JavaScript)
function fetch_employee_data()
{
$.ajax({
url:"fetch.php",
method:"POST",
dataType:"json",
success:function(data)
{
for(var count=0; count<data.length; count++)
{
var html_data = '<tr><td>'+data[count].id+'</td>';
html_data += '<td data-name="name" class="name" data-type="text" data-pk="'+data[count].id+'">'+data[count].name+'</td>';
html_data += '<td data-name="gender" class="gender" data-type="select" data-pk="'+data[count].id+'">'+data[count].gender+'</td>';
html_data += '<td data-name="designation" class="designation" data-type="text" data-pk="'+data[count].id+'">'+data[count].designation+'</td>';
html_data += '<td data-name="age" class="age" data-type="text" data-pk="'+data[count].id+'">'+data[count].age+'</td></tr>';
$('#employee_data').append(html_data);
}
}
})
}
อันนี้ code PHP
Code (PHP)
<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM employee WHERE key=$_GET['key']"; <------------เอาค่า $_GET['key'] มาเป็นเงือนไขตรงนี้
$result = mysqli_query($connect, $query);
$output = array();
while($row = mysqli_fetch_assoc($result))
{
$output[] = $row;
}
echo json_encode($output);
?>
คำถามก็คือ ผมใช้ Ajax รับค่าจาก php แบบไม่มีการ action หรือกดปุ่ม เพื่อใช้เป็นเงื่อนไขของข้อมูลตาราง
รบกวน เพื่อน พี่ๆ ที่ชำนาญ หน่อยนะครับ
Tag : PHP, JavaScript, Ajax, jQuery, Bootstrap Framework, WampServer
|
|
|
|
|
|
Date :
2018-09-16 01:05:00 |
By :
Takashi_7 |
View :
660 |
Reply :
8 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ถ้าไม่มีการ action ใดๆแต่ต้องการใช้ function
ที่ html บันทัดสุดท้าย ให้ใส่ script
Code (PHP)
<script>
setTimeout( ชื่อฟังก์ชั่นที่ต้องการ, xx);
// xx = เวลาเป็นวินาทีกะว่า browser render เสร็จแล้ว
</script>
แต่แนะนำให้ใช้ event body onload ครับ เพื่อชั่วร์ว่า browser render เสร็จแล้วจริงๆ
Code (PHP)
<body onload="ฟังก์ชั่นที่ต้องการ()">
แต่ถ้าใช้ jquery อยู่แล้ว
Code (JavaScript)
$(document).ready(()=>{
ฟังก์ชั่นที่ต้องการ();
});
|
|
|
|
|
Date :
2018-09-16 07:45:55 |
By :
Chaidhanan |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
fetch_employee_data( )
function นี้เขียนไว้ที่ไหน
และ tag <body> จะมีอยู่แค่ อันเดียว ทั้งไฟล์ html ครับ ถ้ามีมากกว่านี้ แสดงว่าเขียนผิดไวยกรณ์
<html>
<head>
...
</head>
<body> <<<< ----
....
</body>
</html>
|
|
|
|
|
Date :
2018-09-16 18:13:24 |
By :
Chaidhanan |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ไม่รู้ใช่แบบนี้ไหม
Code (JavaScript)
function fetch_employee_data(key)
{
$.ajax({
url:"fetch.php?Key="+key,
method:"GET",
dataType:"json",
success:function(data)
{
for(var count=0; count<data.length; count++)
{
var html_data = '<tr><td>'+data[count].id+'</td>';
html_data += '<td data-name="name" class="name" data-type="text" data-pk="'+data[count].id+'">'+data[count].name+'</td>';
html_data += '<td data-name="gender" class="gender" data-type="select" data-pk="'+data[count].id+'">'+data[count].gender+'</td>';
html_data += '<td data-name="designation" class="designation" data-type="text" data-pk="'+data[count].id+'">'+data[count].designation+'</td>';
html_data += '<td data-name="age" class="age" data-type="text" data-pk="'+data[count].id+'">'+data[count].age+'</td></tr>';
$('#employee_data').append(html_data);
}
}
})
}
|
|
|
|
|
Date :
2018-09-17 10:50:59 |
By :
ดินทราย |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
การวาง ลำดับการทำงานของโปรแกรม มีความสำคัญอยู่ไม่น้อย
ถ้าเราเรียกใช้ function ก่อนที่มันจะถูกประกาศ ก็จะ error ก็ดูอะไรควรอยู่ต้นไฟล์ อะไรควรอยู่ท้ายไฟล์
หรือการใช้ event เพื่อเรียกใช้งาน ก็จะสามารถจัดลำดับการทำงานได้เป็นอย่างดี
สงสัยทำไมถีงไม่อยากใช้ event ในการทำงาน ทั้งง่ายสดวก ในการวางโปรแกรม ให้เป็นระเบียบและเข้าใจได้ง่าย
|
|
|
|
|
Date :
2018-09-17 11:50:43 |
By :
Chaidhanan |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ลองอ่าน asynchronous เพิ่มเติม
ต่อยอดด้วย ECMAScript ตอนนี้เวอร์ชั่น 2018 แล้วนะ
|
|
|
|
|
Date :
2018-09-17 17:10:24 |
By :
xman |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body onload="fetch_employee_data( key )"> สีแดงไม่ใส่ให้มัน ล่ะครับ
หรือกำหนด default ไว้ที่ function ก็ได้
function fetch_employee_data( key = 'xxx' ){
|
|
|
|
|
Date :
2018-09-19 10:58:58 |
By :
Chaidhanan |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 04
|