1. Tổng quan
1.1. Method: GET
|
1 2 3 4 5 6 7 8 9 10 11 |
$.ajax({ 'url': "http://localhost:3000/admin/users/list", 'method': "GET", 'contentType': 'application/json' }) .done(function (result) { }) .fail(function (error) { }) .always(function () { }); |
2.1. Phương thức AJAX với dữ liệu trả về dạng html
|
1 2 3 4 5 6 7 8 9 10 11 |
$.ajax({ type: 'POST', url: 'vidu.php', dataType: 'html', data: { abc: "content abc", def: "content def" } }).done(function(ketqua) { $('#noidung').html(ketqua); }); |
-- File: vidu.php
|
1 2 3 4 5 6 7 |
<?php if (isset($_POST['id'])) { echo 'Bạn đã gửi dữ liệu ID = ' . $_POST['id'] . ' thành công'; } else { echo 'Không có dữ liệu được gửi sang'; } ?> |
2.2. Phương thức AJAX với dữ liệu trả về dạng JSON
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$.ajax({ type: 'POST', url: 'data.php', data: { id: "1", }, dataType: 'json', success: function(data) { if (data.complate == '1') { alert('Có dữ liệu gửi sang'); } else { alert('Không có dữ liệu gửi sang'); } }, error: function() { alert('Có lỗi trong quá trình xử lý'); } }); |
-- File: data.php
|
1 2 3 4 5 6 7 8 9 10 |
<?php $data = array(); if(isset($_POST['id'])) { $data['complate'] = '1'; }else{ $data['complate'] = '0'; } echo json_decode($data); ?> |
2. Ví dụ cách xử lý AJAX trên 1 trang
-- Ví dụ 1:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php if (isset($_POST['ajax']) && isset($_POST['name'])) { echo $_POST['name']; exit; } ?> <!doctype html> <html> <body> <input type='text' name='name' placeholder='Write here !!!' id='name'> <div id='response'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { $('#name').keyup(function() { var value = $('#name').val(); $.ajax({ type: 'post', data: { ajax: 1, name: value }, success: function(response) { $('#response').text('You wrote : ' + response); } }); }); }); </script> </body> </html> |
-- Ví dụ 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<?php if (isset($_POST['ajax']) && isset($_POST['checked'])) { $checked_arr = $_POST['checked']; echo json_encode($checked_arr); exit; } ?> <!doctype html> <html> <body> <form method='post' action> <input type='checkbox' value='JavaScript'> JavaScript <br /> <input type='checkbox' value='PHP'> PHP <br /> <input type='checkbox' value='jQuery'> jQuery <br /> <input type='checkbox' value='AJAX'> AJAX <br /> <input type='button' value='click' id='but'> <div id='response'></div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { $('#but').click(function() { var checkarr = []; $("input[type=checkbox]:checked").each(function(index, element) { checkarr.push($(element).val()); }); if (checkarr.length > 0) { $.ajax({ type: 'post', data: { ajax: 1, checked: checkarr }, dataType: 'json', success: function(response) { $('#response').text('Response : ' + JSON.stringify(response)); } }); } }); }); </script> </body> </html> |
