带有ajax的电话协议答案

【问题标题】：telephone protocol with ajax带有ajax的电话协议
【发布时间】：2013-08-30 09:09:30
【问题描述】：

我希望增加（在数据库中）在移动浏览器中点击电话号码的次数。我在锚上使用tel:// 协议，如：

<a class='phone-number' href='tel:12345678901'>Call Now!</a>

这个想法是在点击链接时向服务器发送一个 AJAX 请求。

$(".phone-number").click(function(e){
    var url = "phone_tap.php";
    var data = {id: 1};
    $.post(url, data, function(r){
        if(r.success){}
    });
}

但是，在 Web 和移动浏览器中，AJAX 请求似乎被浏览器取消，因为它调用了它的本机程序。

以前有人经历过吗？解决方案？

发现完全相同的问题here 没有答案。

【问题讨论】：

我想知道你是否在touchstart上调用它会触发

标签： jquery mobile

【解决方案1】：

感谢大家的回答 - 但是，我通过寻找涉及 mailto:// 协议而不是 tel:// 协议的 a similar issue 找到了解决方案。

解决方法是使用jQuery$.ajax的async: false属性：

$.ajax({
    url: url,
    data: data,
    dataType: 'json',
    async: false,
    method: "POST"
}).then(function(r){
    if(r.success){}
}, 'json');

【讨论】：

请注意可能的后果？
它是异步JAX。使用async:false，您将使其同步。所以根本没有错误，但至少有代码味道。

【解决方案2】：

您可以将响应重定向到它，而不是在您的 html 中的 href 中添加数字，在增加服务器上的计数器后。

您可以完全删除 ajax 调用，只需为每个号码链接到 phone_tap.php?id=...。

在phone_tap.php 中，您必须执行以下操作：

UPDATE statistics SET number_of_taps=number_of_taps+1 WHERE id=:id

并以类似以下内容结束：

header('location: tel:' . $phone_number);

这对我来说似乎是最简单的方法，而且作为奖励，它还可能会阻止爬虫从您的网页中获取电话号码。（只是拒绝 robots.txt 中的访问并不会真正阻止任何人）

【讨论】：

【解决方案3】：

也许这行得通。

将链接改为：

<a class="phone-number" href="#" data-number="123456789">Call ya!</a>

点击处理程序：

$(".phone-number").on("click", function(ev) {
    ev.preventDefault();

    var url = "phone_tap.php";
    var data = {id: 1};
    $.post(url, data, function(r){
        if(r.success){
            window.location = "tel://" + $(this).data("number");
        }
    });
});

【讨论】：