JQuery:Ajax.load问题

我有一张最近注册的网络访客表。其中一个专栏是一个简单的“发送电子邮件”链接，当点击Jquery时，我会使用它打开它，并启动一个ajax.load，加载到一个后端php脚本，向此人发送电子邮件

我不明白的是，如何简单地将点击的链接更改为“发送”之类的内容，而不再是链接

代码是：

$(".sendEmail").click(function(){
var element = $(this);
var guest_id = element.attr("id");                                         
$.post("WebGuest_SendEmail.php",{id: guest_id}, function(data) {
    $(this).html(data);  //NOT SURE WHAT TO DO HERE ON SUCCESS.
    });                            
return false;                              
});

---

最简单的方法是用一些文本替换链接。基本上，我们只是在调用锚元素上使用jQuery replaceWith（）函数。下面是一个简化的示例，演示了如何使用完整的HTML文件

<script src="lib/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
  $(".sendEmail").click(function(){
    var element = $(this);
    $.post("test.html", {}, function(data) {
      element.replaceWith("Sent!");    
    });
    return false;
  });
});
</script>

<a href="#" class="sendEmail">click me</a>

$（文档）.ready（函数（）{
$（“.sendmail”）。单击（函数（）{
var元素=$（此）；
$.post（“test.html”，{}，函数（数据）{
元素。替换为（“已发送！”）；
});
返回false；
});
});

您可以将链接替换为文本“已发送！”：

---

我会让用户知道发生了什么，然后告诉他们发生了什么。所以，告诉他们何时发送，然后告诉他们何时发送

像这样：

$(".sendEmail").click(function(){
    var element = $(this);
    var guest_id  = element.attr("id");
    element.replaceWith('Sending...');                                                                               
    $.post("WebGuest_SendEmail.php",{id: guest_id}, function(data) {
        $(this).html(data);  //NOT SURE WHAT TO DO HERE ON SUCCESS.
        element.replaceWith('Sent!');
    });                                                    
    return false;                                                      
});

---

当然，如果后端脚本由于某种原因失败，您可能希望恢复到。如果您对这方面的技术感兴趣，请告诉我，我将用最佳实践等更详细地解释这一点。

Oops，我应该澄清一下。将上面的示例剪切并粘贴到一个名为“test.html”的文件中，并提供一个到jquery.js的适当路径。不必等到数据到达后才用文本替换链接，正如我认为的那样，实际上，如何通知用户是一个比此示例代码演示的问题复杂得多的问题。我在这里通过显示replaceWith（）调用的位置严格地回答了这个问题。KyleFarris的解决方案是在过渡期间将文本替换为“发送…”，这是一个更好的主意，但需要注意的是，如果您想要优雅地处理服务器端错误，那么您需要检查结果代码、呈现错误消息并恢复原始链接。所有上述解决方案似乎都能奏效，感谢各位的时间。

$(".sendEmail").click(function(){
    var element = $(this);
    var guest_id  = element.attr("id");
    element.replaceWith('Sending...');                                                                               
    $.post("WebGuest_SendEmail.php",{id: guest_id}, function(data) {
        $(this).html(data);  //NOT SURE WHAT TO DO HERE ON SUCCESS.
        element.replaceWith('Sent!');
    });                                                    
    return false;                                                      
});