通过单击链接发送 AJAX 请求而不重定向用户答案

【问题标题】：Send AJAX request by clicking a link without redirecting user通过单击链接发送 AJAX 请求而不重定向用户
【发布时间】：2012-03-26 06:03:25
【问题描述】：

我有一个 Web 应用程序，其中包含一堆不同的项目，这些项目是从 MySQL 表生成的。当用户滚动浏览它时，我希望他们能够单击项目旁边的链接，该链接会将请求插入 MySQL 数据库。通常，我会通过创建一个 PHP 页面（无论如何我都会这样做）来做到这一点，该页面使用 $_GET 方法从 URI 中获取项目名称和用户 ID，并将其插入到表中。但是，在这种情况下，我不希望用户被重定向到远离他们所在的任何地方。我只是希望链接发送请求，并在成功后显示一条小消息。

我认为 jQuery/AJAX 最适合这个，但由于我对它不太熟悉，我不知道该怎么做。任何提示表示赞赏！

【问题讨论】：

你试过什么？你看过 JQuery howto，因为那里有它的例子。

标签： php mysql jquery

【解决方案1】：

你必须做类似的事情

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

以这种方式，用户通过单击链接而不重定向来进行 ajax 调用。这是$.post的文档

编辑 - 在您的情况下，要将值传递给 jQuery，您应该执行类似的操作

$('.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
});

【讨论】：

如何将动态生成的值传递给 jQuery？ <a href=’#’ class='order_this'/>".$row['P/N'].”</a>
我能以某种方式重载 $row['P/N'] 值吗？

【解决方案2】：

HTML

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

脚本

$(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;    
});

【讨论】：

【解决方案3】：

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

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

【讨论】：

这不会阻止链接正常触发它只是执行 AJAX 请求
你没有阻止重定向

【解决方案4】：

$('.classOfYourLinkToBecliked').click(function(){
       $.ajax({
          type:'GET',
          'url':'yoururl',
           data: {yourdata},
           processData: false,
           contentType: false,
           cache: false,
           dataType: 'json',
           success: function(response){
             alert(response);
             }
      });
});

【讨论】：

你能补充一些解释吗？以便其他人能够理解。