移动端Ajax无法如桌面端正常工作的问题求助

看起来你碰到了一个移动端Web开发的常见坑——桌面端点击按钮能通过Ajax正常更新页面元素，但移动端触发请求后却直接跳转到返回JSON的页面，我来帮你分析下原因和解决办法：

核心原因 #

这事儿大概率是移动端的event.preventDefault()没生效，导致浏览器直接执行了.get-product元素的默认行为（比如如果这个元素是<a>标签，就会直接跳转它的href指向的页面）。

具体解决方案 #

1. 给事件绑定加上触摸事件支持 #

移动端浏览器会优先触发touchstart这类触摸事件，而不是桌面端的click事件，可能你的click事件处理还没来得及阻止默认行为，浏览器已经跳转了。试试同时绑定click和touchstart事件：

$(".get-product").on('click touchstart', function (event) {
    // 先把默认行为和冒泡都按住
    event.preventDefault();
    event.stopPropagation();
    
    let url = "/product/product1";
    $.ajax({
        url: url,
        method: "GET",
        success: function (data) {
            $("#productName").html(data.name);
            $("#productPrice").html("₹ " + data.price);
        },
        // 加个错误处理，方便排查问题
        error: function(xhr, status, err) {
            console.log("Ajax请求出问题啦:", err);
        }
    });
});

2. 检查元素类型和默认行为 #

如果.get-product是<a>标签，一定要确认它的href属性不是/product/get（或者和你的请求URL冲突），而且没有其他移动端脚本（比如一些移动端UI框架）修改了它的跳转逻辑。要是可以的话，把<a>换成<button>标签会更稳妥，因为按钮本身没有跳转的默认行为。

3. 用事件委托确保事件生效 #

如果.get-product是动态生成的元素（比如通过其他Ajax加载的），直接绑定事件可能会失效，这时候用事件委托绑定到父元素或者document上：

// 绑定到更稳定的父容器，比document更优，这里举例子用document
$(document).on('click touchstart', ".get-product", function (event) {
    event.preventDefault();
    event.stopPropagation();
    
    let url = "/product/product1";
    $.ajax({
        url: url,
        method: "GET",
        success: function (data) {
            $("#productName").html(data.name);
            $("#productPrice").html("₹ " + data.price);
        }
    });
});

4. 确认服务端响应头 #

虽然这不是跳转的直接原因，但移动端浏览器对响应类型更敏感，确保服务端返回JSON时设置正确的Content-Type：

router.get('/product/:uName', function (req, res, next) {
    productServices.get(req, req.params.uName, function (error, result) {
        if (!error) {
            res.setHeader('Content-Type', 'application/json');
            res.status(200).json(result);
        } else {
            res.setHeader('Content-Type', 'application/json');
            res.status(500).json({error: error});
        }
    });
});

测试小技巧 #

你可以用Chrome的设备模拟功能，切换到移动端视图，打开控制台看看：

• 点击按钮时，事件处理函数有没有触发
• event.preventDefault()是不是真的执行了
• 有没有报错信息（比如找不到元素、Ajax请求失败）

内容的提问来源于stack exchange，提问作者Paritosh Verma