Dạo gần đây, trên các diễn đàn, có rất nhiều người đặt câu hỏi "làm sao để fix được url khi sử dụng AJAX ?!". Điều gì tốt khi fix được url trong ajax ?! nó có thể giúp ích cho bạn khi bạn muốn trang web của bạn sẽ được chia sẽ nội dung qua URL và vẫn sài được AJAX. Ở bài viết này tôi sẽ hướng dẫn cách thay đổi URL trong ajax, và chúng ta sẽ sử dụng tính năng anchor trong HTML để làm điều này.
Ví dụ:
Khi dùng ajax, thì ajax sẽ gởi thông tin đến file noidung.php để lấy nội dung tương ứng cho mổi lần request. Trong PHP không thể lấy các giá trị từ anchor (#php) nên chúng ta phải dùng Javascript để truyền tham số cho noidung.php.
Xem đoạn code dưới đây.
Trước hết, chúng ta cần embed jquery.js vào document
PHP của chúng ta sẽ thế này:
Ví dụ:
- Code:
<a href="#php">PHP</a>
Khi dùng ajax, thì ajax sẽ gởi thông tin đến file noidung.php để lấy nội dung tương ứng cho mổi lần request. Trong PHP không thể lấy các giá trị từ anchor (#php) nên chúng ta phải dùng Javascript để truyền tham số cho noidung.php.
Xem đoạn code dưới đây.
- Code:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <script type="text/javascript" src="http://kenphan.info/clientscript/js/jquery.min.js"></script>
6. <script type="text/javascript">
7. $(window).ready(function(){
8. var url = window.location.href; //đường dẫn hiện tại, ví dụ: http://domain.com/#php
9. var c_url = url.split('#'); // split array
10. var id = c_url[1]; // lấy giá trị phía sau dấu #
11. ajax(id);
12. // hàm gọi AJAX
13. function ajax (param) {
14. $.ajax({
15. url: "noidung.php",// đường dẫn file back-end
16. type: "POST",// phương thức truyền POST OR GET
17. data: ({ id : param }), // truyền tham số đến file nội dung
18. dataType: "html",// kiểu dữ liệu callback
19. beforeSend: function(){}, // trước khi request
20. success: function(msg){
21. alert(msg);
22. }
23. });
24. }
25. // xử lý button
26. $('a[rel=clickme]').click(function(){
27. var href = $(this).attr('href');
28. if(href.indexOf('#') != -1) hrefhref = href.split('#');
29. id = href?href[1]:'#';
30. ajax(id);
31. });
32. });
33. </script>
34. <title>Fix URL với jQuery AJAX</title>
35. </head>
36. <body>
37. <a href="#1" rel="clickme">Click me 1</a>
38.
39. <a href="#2" rel="clickme">Click me 2</a>
40.
41. <a href="#3" rel="clickme">Click me 3</a>
42.
43. <a href="#4" rel="clickme">Click me 4</a>
44.
45. <a href="#5" rel="clickme">Click me 5</a>
46. </body>
47. </html>
Trước hết, chúng ta cần embed jquery.js vào document
- Code:
1. <script type="text/javascript" src="http://kenphan.info/clientscript/js/jquery.min.js"></script>
- Code:
1. var url = window.location.href; //đường dẫn hiện tại, ví dụ: http://domain.com/#php
2. var c_url = url.split('#'); // split array
3. var id = c_url[1]; // lấy giá trị phía sau dấu #
4. ajax(id);
- Code:
1. function ajax (param) {
2. $.ajax({
3. url: "noidung.php",// đường dẫn file back-end
4. type: "POST",// phương thức truyền POST OR GET
5. data: ({ id : param }), // truyền tham số đến file nội dung
6. dataType: "html",// kiểu dữ liệu callback
7. beforeSend: function(){}, // trước khi request
8. success: function(msg){
9. alert(msg);
10. }
11. });
12. }
- Code:
1. // xử lý button
2. $('a[rel=clickme]').click(function(){
3. var href = $(this).attr('href');
4. if(href.indexOf('#') != -1) href = href.split('#');
5. id = href?href[1]:'#';
6. ajax(id);
7. });
- Code:
# <a href="#1" rel="clickme">Click me 1</a>
#
# <a href="#2" rel="clickme">Click me 2</a>
#
# <a href="#3" rel="clickme">Click me 3</a>
#
# <a href="#4" rel="clickme">Click me 4</a>
#
# <a href="#5" rel="clickme">Click me 5</a>
PHP của chúng ta sẽ thế này:
- Code:
1. <?php
2. if($_POST['id'] == '') {
3. echo 'default';
4. } else {
5. echo $_POST['id'];
6. }
7. ?>
