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

Posted 2023-02-24

【中文标题】通过单击链接发送 AJAX 请求而不重定向用户

【英文标题】：Send AJAX request by clicking a link without redirecting user

【发布时间】：2012-03-26 06:03:25

【问题描述】：

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

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

【问题讨论】：

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

【参考方案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);
             
      );
);

【讨论】：

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