A-AA+then

อยากทำlink แบบเปลี่ยน url ค่ะ

1,702
สวัสดีค่ะ ขอคำแนะนำเกี่ยวกับการทำ Link แบบเปลี่ยน URL แบบที่เว็บนี้ใช้หน่อยค่ะ คือตอนนี้เริ่มเขียน AJAX อยู่แต่ว่าเวลา Linkไปที่หน้าอื่น ๆ url มันไม่เปลี่ยนไปด้วยทำให้งงน่ะค่ะ เวลาจะย้อนกลับมาหน้าก่อนหน้านี้ รบกวนด้วยนะคะ

7 ความคิดเห็น

บนเว็บผม URL แบบ Ajax เป็นการทำงานของ Javascript คอยดักจับการเปลี่ยนแปลงของ URL บน Addressbar ครับ (เนื่องจาก Browser ไม่สามารถตรวจสอบ URL ลักษณะนี้ได้) ซึ่งเมื่อพบว่ามีการเปลี่ยนแปลง ก็ไปให้ Ajax ทำการ โหลดหน้าใหม่ครับ

คำอธิบายดูไม่ยาก แต่ ตอนอออกแบบจะยากกว่าครับ คำแนะนำคือ ให้ใช้ Frame Work ครับ จะช่วยให้งานง่ายขึ้น ถ้าบนเว็บผม ผมใช้ GAjax ครับ (แต่จนถึงวันนี้ผมก็ยังไม่สามารถเขียนคำอธิบายการใช้งานได้) โดยฟังก์ชั่นที่ผมใช้คือ GLoader ครับ

ผมจำได้ว่า JQuery ก็เคยมีปลั๊กอินลักษณะนี้เหมือนกัน แต่ผมจำชื่อไม่ได้ ก็ลองหาดูได้ครับ
1

ขอบคุณที่ให้แนวคิดค่ะอาจารย์ เมื่อสักครู่ลองนั่งเขียนคร่าว ๆดูตอนนี้ใช้   window.location.hash ใส่ค่าหน้าที่ต้องการให้แสดง และให้ AJAX แสดงหน้าที่ต้องการได้แล้วค่ะ แต่ว่าตอน back กลับจะใช้ function อะไรให้ AJAX ตรวจว่า url เปลี่ยนแล้วให้เปลี่ยนหน้าคะ 
 
2

555+++

จริงๆแล้วก็ใช้เทคนิคเดียวกันกับอีตอนเปลี่ยนหน้าแหละครับ

การตรวจสอบว่ามีการกด back หรือไม่ก็มีเทคนิคง่ายๆครับคือการวนลูปตรวจสอบความเปลี่ยนแปลงของ addressbar ถ้ามีการเปลี่ยนแปลงก็ให้ ajax ทำการ load url นั้นๆครับ
 
3

ทำได้แล้วค่ะอาจารย์ดีใจได้พักนึง ตอนนี้มาติดแหงกอีกแล้วค่ะ ทำไม IE เวลาเปลี่ยน Hash แล้วปุ่ม BACK ไม่ขึ้นคะ Code เดียวกันในIEไม่ได้แต่ใช้ใน Chrome ได้ไม่มีปัญหาเลย ต้องทำยังไงดีคะ
4

ปัญหาโลกแตกครับ....เพราะ IE ไม่ค่อยเหมือนชาวบ้านเขา

เดาๆว่า น่าจะต้องเปลี่ยนวิธี จริงๆแล้ว เทคนิคเดียวที่ผมบอกแต่ต้น นั่นแหละตอบคำถามทั้งหมดได้อยู่แล้ว

1.หาวิธีตรวจจับการเปลี่ยนแปลงของ addressbar ให้ได้ ซึงอย่างที่ผมบอกแค่วนลูปตรวจสอบเท่านั้น
2.ลิงค์ทั้งหมดที่เป็น ajax ใช้ href=#pageurl

เมื่อกดลิงค์ก็จะได้ #pageurl ไปที่ addressbar ซึ่งตัวตรวจจับที่ทำงานอยู่ ก็จะตรวจสอบความเปลี่ยนแปลง และไปโหลด หน้าที่เรียกมาทำงาน
5

แนะนำให้ใช้ gcms ครับตะก่อนก้เคยทำนะครับ แต่ไม่ไหวปวดหัวมาก โน่นนี้นั่น
6

อันนี้ work ครับ

$(window).on('hashchange', function() {
    .. 
});
7
^