Add topics
facebox tweeter Emotion

 Fix URL trong Ajax 2007-07-09 09:38:11


Hướng dẫn cách thay đổi URL trong ajax, chúng ta có thể sử dụng tính năng của anchor trong HTML
ví dụ:
<a href="#php">PHP</a>
khi click vào link có anchor thì browser không load lạii nhưng URL thay đổi http://domain.com/#php <~~ thuận tiện trong ajax

Trong ajax, khi ta click vào link thì hàm ajax sẽ gưi thông tin đến file noidung.php để lấy nội dung tương ứng nhưng trong PHP không thể lấy các giá trị từ anchor (#php) nên ta phải dùng javascript để truyền tham số cho noidung.php
<script>
url = window.location.href; //link hiện tại, ví dụ: http://domain.com/#php
c_url = url.split('#');
id = c_url[1]; //tác url và lấy giá trị phía sau #, tức là php
ajaxLoad('noidung.php?id='+id,'hienthi'); // gửi dữ liệu đến file nội dung
</script>

Đây là code demo:

<html><title>PHP BASIC - AJAX SIMPLE </title>
<body>
<script>
loadstatustext = 'Loading...';
function ajaxLoad(url,id)
{
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
}
if (x)
{
x.onreadystatechange = function()
{
el = document.getElementById(id);
el.innerHTML = loadstatustext;
if (x.readyState == 4 && x.status == 200)
{
el.innerHTML = x.responseText;
}
}
x.open("GET", url, true);
x.send(null);
}
}
</script>

<div id="hienthi">Day la noi dung file can hien thi</div>

<script>
var url = window.location.href;
if(url.indexOf('#')!=-1) c_url = url.split('#');
id = c_url?c_url[1]:'#';
ajaxLoad('noidung.php?id='+id,'hienthi');
</script>
<a href="#1" onClick="ajaxLoad('noidung.php?id=1','hienthi');">1</a> <br>
<a href="#2" onClick="ajaxLoad('noidung.php?id=2','hienthi');">2</a> <br>
<a href="#3" onClick="ajaxLoad('noidung.php?id=3','hienthi');">3</a> <br>
<a href="#4" onClick="ajaxLoad('noidung.php?id=4','hienthi');">4</a> <br>
<a href="#8" onClick="ajaxLoad('noidung.php?id=8','hienthi');">8</a> <br>
<a href="#5" onClick="ajaxLoad('noidung.php?id=5','hienthi');">5</a> <br>
<a href="#6" onClick="ajaxLoad('noidung.php?id=6','hienthi');">6</a> <br>
<a href="#7" onClick="ajaxLoad('noidung.php?id=7','hienthi');">7</a>
</body>
</html>


file noidung.php

<?php
print $_GET['id'];
?>


Chúc thành công!

Tra loi 11 comment(s) NguyÅn Minh Tân 2007-07-09 09:38:11

Phan Ngọc Tú 2008-01-23 05:25:59

Nhờ bạn giải thích rõ hơn về câu hàm split và indexOf mình chưa hiểu cái này

Tra loi

TG 2008-01-23 10:02:07

split dùng để tách 1 chuỗi theo 1 khóa
ví dụ:
str = 'abc#123';
a = str.split('#');

luc đó a sẽ là 1 array với a[0] = abc và a[1] = 123

hàm indexOf là vị trí của 1 ký tự trong chuỗi và -1 nếu ký tự không tồn tại trong chuỗi
ví dụ:
str.indexOf('#') = 3
str.indexOf('k') = -1

Tra loi

Phan Ngọc Tú 2008-01-26 12:05:48

cảm ơn nha. mình có câu này muốn hỏi : bây giờ mình đang viết một trang nhạc nhưng phần play nhạc không được tốt..(sử dụng ajax )
nó chỉ play nhạc khi người dùng click (onclick="") .mình muốn chơi bài hát khi người dùng vào từ link thì sẻ play bài đó vd : http://domain.com/#playId=32
xin chỉ giáo
P/S: hình như cái này sử dụng cái window.location.href

Tra loi

TG 2008-01-26 12:21:38

đúng rổi, dùng window.location.href để lấy url hiện tại và dùng split để tách Id bài hát ra. chúc thành công

Tra loi

Phan Ngọc Tú 2008-01-26 12:55:02

nhưng mình không biết chèn cái file js vào đâu để nó nhận ra window.location.href khi thay đổi .
mình nói rỏ cái này ..

P/S : TG cho xin cái nick yahoo cái . để tiện hỏi ...Thanks

Tra loi

TG 2008-01-26 01:01:33

có thể chèn vào đầu hoặc bỏ vào 1 function rồi dung sự kiện onload
TG's YM: xboohb

Tra loi

Phan Ngọc Tú 2008-01-26 01:11:51

có nghĩa là <body onload="return playnhac();">

Tra loi

TG 2008-01-26 01:54:35

chỉ cần vậy thôi <body onload="playnhac();">

Tra loi

Phan Ngọc Tú 2008-01-27 11:27:34

làm được rồi nhưng không phải cách của bạn . mình dùng hàm setInterval();

Tra loi

TTOL 2008-05-14 09:16:24


Chào các bạn đoạn trên hay quá nhưng mình làm vẫn chưa được các bạn giúp mình nhé .
<html><title>PHP BASIC - AJAX SIMPLE </title>
<body>
<script>
loadstatustext = 'Loading...';
function ajaxLoad(url,id)
{
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
}
if (x)
{
x.onreadystatechange = function()
{
el = document.getElementById(id);
el.innerHTML = loadstatustext;
if (x.readyState == 4 && x.status == 200)
{
el.innerHTML = x.responseText;
}
}
x.open("GET", url, true);
x.send(null);
}
}
</script>

<div id="hienthi">Day la noi dung file can hien thi</div>

<script>
var url = window.location.href;
if(url.indexOf('#')!=-1) c_url = url.split('#');
id = c_url?c_url[1]:'#';
ajaxLoad('noidung.php?id='+id,'hienthi');
</script>
<a href="#1" onClick="ajaxLoad('noidung.php?menu=1&id=1','hienthi');">1</a> <br>
<a href="#2" onClick="ajaxLoad('noidung.php?menu=1&id=2','hienthi');">2</a> <br>
<a href="#3" onClick="ajaxLoad('noidung.php?menu=2&id=3','hienthi');">3</a> <br>
<a href="#4" onClick="ajaxLoad('noidung.php?menu=1&id=4','hienthi');">4</a> <br>
<a href="#8" onClick="ajaxLoad('noidung.php?menu=2&id=8','hienthi');">8</a> <br>
<a href="#5" onClick="ajaxLoad('noidung.php?menu=3&id=5','hienthi');">5</a> <br>
<a href="#6" onClick="ajaxLoad('noidung.php?menu=3&id=6','hienthi');">6</a> <br>
<a href="#7" onClick="ajaxLoad('noidung.php?menu=4&id=7','hienthi');">7</a>
</body>
</html>

Mình muốn thêm cái menu vào tuy GET lên trình duyệt được nhưng khi F5 lại thì lại trở về trang chủ ngay chứ ko được như ví dụ hix .
bạn nào vui lòng giúp mình với
file noidung.php

<?php
print $_GET['id'];
?>

Tra loi

gaulucky92 2009-01-27 06:41:13

Bạn nào ko hiểu code của TG thì vào đây: http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

Mình làm theo + chỉnh sửa tí ===> OK
Demo: http://gaulucky92.12h.us/ajax%20with%20anchor/#view,21

Tra loi

Y kien