Gửi yêu cầu AJAX bằng cách nhấp vào liên kết mà không cần chuyển hướng người dùng

Question

Tôi có ứng dụng web có nhiều mục khác nhau, được tạo từ bảng MySQL. Khi người dùng cuộn qua nó, tôi muốn họ có thể nhấp vào liên kết bên cạnh mục sẽ chèn yêu cầu vào cơ sở dữ liệu MySQL. Thông thường, tôi sẽ làm điều này bằng cách tạo một trang PHP (mà tôi sẽ làm anyways) lấy tên mục & id người dùng từ URI bằng cách sử dụng phương thức $ _GET & chèn nó vào bảng. Tuy nhiên, trong trường hợp này, tôi không muốn người dùng được chuyển hướng khỏi bất cứ nơi đâu. Tôi chỉ muốn liên kết gửi yêu cầu và có thể hiển thị một thông báo nhỏ sau khi nó thành công.

Tôi figured jQuery/AJAX sẽ là tốt nhất cho điều này, nhưng như tôi không quá quen thuộc với nó, tôi không chắc chắn phải làm gì. Bất kỳ lời khuyên được đánh giá cao!

Answer 1

Bạn phải làm một cái gì đó giống như

$('.classofyourlink').click(function(e){ 
    e.preventDefault();//in this way you have no redirect 
    $.post(...);//Make the ajax call 
}); 

trong cách này, người dùng thực hiện cuộc gọi ajax bằng cách nhấn vào một liên kết mà không chuyển hướng. Dưới đây là những tài liệu cho $.post

EDIT - để vượt qua giá trị cho jQuery trong trường hợp của bạn, bạn nên làm một cái gì đó giống như

$('.order_this').click(function(e){ 
    e.preventDefault();//in this way you have no redirect 
    var valueToPass = $(this).text(); 
    var url = "url/to/post/"; 
    $.post(url, { data: valueToPass }, function(data){...});//Make the ajax call 
}); 

Answer 2

Xem http://api.jquery.com/jQuery.ajax/

$('#my-link').click(function(){ 
    $.ajax({ 
     url: "mypage.php", 
     context: document.body, 
     success: function(){ 
     $(this).addClass("done"); 
     } 
    }); 
    return false; 
}); 

Answer 3

HTML

<a id="aDelete" href="mypage.php">Delete</a> 

Script

$(function(){  
    $("#aDelete").click(function(){   
     $.post("ajaxserverpage.php?data1=your_data_to_pass&data2=second_value",function(data){ 
     //do something with the response which is available in the "data" variable 
    }); 
    }); 
    return false;  
});