ថ្ងៃនេះ ខ្ញុំនឹងបង្ហាញជូននូវកូដជាឧទាហរណ៍សំរាប់ការបញ្ជូនទិន្នន័យពី form ក្នុងទំរង់ជា json data ទៅកាន់ server ដោយប្រើប្រាស់ jQuery Ajax។ ជាទូទៅវាត្រូវបានគេប្រើប្រាស់ សំរាប់បញ្ជូនទិន្នន័យពី form ទៅកាន់ server ដោយមិន refresh page។ អ្នកអាចប្រើប្រាស់ ក្នុងករណីដែលនៅលើ webpage របស់អ្នកតែមួយមាន form ជាច្រើនសំរាប់បញ្ជូនទិន្នន័យទៅកាន់ server។ តោះចាប់ផ្តើមសរសេរកូដដូចខាងក្រោមនេះ៖
១. បង្កើតជា webpage មួយដែលមាន formមួយសំរាប់បញ្ជូនទិន្នន័យទៅកាន់ server
<!-- our form -->
<form id='userForm'>
<div><input type='text' name='firstname' placeholder='Firstname' /></div>
<div><input type='text' name='lastname' placeholder='Lastname' /></div>
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<!--
where the response will be displayed
ប្លុកនេះ សំរាប់បង្ហាញទិន្នន័យដែលទទួលបានពី server មកវិញកាលណា អ្នកបានបញ្ជូនទិន្នន័យ
-->
<div id='response'></div>
សូមកុំភ្លេចហៅ jqUery.js ចូលទៅក្នុង webpage របស់អ្នក ហើយអ្នកសរសេរវានៅក្នុងចន្លោះ
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
</head>
រួចសរសេរកូដJavaScript ដូចខាងក្រោមនេះ (សូមសរសេរនៅពីលើចំ )
</body>
<script>
$(document).ready(function(){
$('#userForm').submit(function(){
// បង្ហាញព័ត៌មាន នៅពេលដែលបញ្ជូនទិន្នន័យទៅកាន់ server
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - ជា php file សំរាប់handle ការបញ្ជូនទិន្នន័យពី form
* $(this).serialize() - សំរាប់បំលែងទីន្នន័យរបស់ formទៅជា json format
* function(data){... - data ជាទិន្នន័យដែលទទួលបានពី ការបញ្ជូនមកវិញរបស់ server តាមរយៈ post_receiver.php
*/
$.post('post_receiver.php', $(this).serialize(), function(data){
// បង្ហាញទិន្នន័យដែលទទួលបានពី server
$('#response').html(data);
}).fail(function() {
// បង្ហាញព័ត៌មាន ក្នុងករណីការបញ្ជូនមិនទទួលបានជោគជ័យ
alert( "Posting failed." );
});
// ជៀសវាង ការrefresh page
return false;
});
});
</script>
នេះជា post_receiver.php
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
ខ្ញុំសង្ឍឹមថា អ្នកអនុវត្តដោយជោគជ័យ! សូមចែករំលែកនូវអ្វីដែលអ្នកបានអនុវត្តមកកាន់ពួកយើងផង!
