为什么 ajax 在移动设备上不像在桌面上那样工作？答案

【问题标题】：Why ajax is not working in mobile as in desktop?为什么 ajax 在移动设备上不像在桌面上那样工作？
【发布时间】：2019-04-19 10:41:08
【问题描述】：

当我通过 ajax 请求从服务器接收数据时：

(1) 在桌面视图中 <p id="productName"></p> 和 <p id="productPrice" ></p> 值已更改（预期行为）。

(2) 通话完成后，在移动视图中，我被定向到页面（非预期）'/product/get' 并输出 json 数据。

HTML 代码：

<p id="productName"></p>
<p id="productPrice" ></p>

Ajax 调用：

$(".get-product").on('click', function (event) {
        event.preventDefault();
        let url = "/product/product1";
        $.ajax({
            url: url,
            method: "GET",
            success: function (data) {
                $("#productName").html(data.name);
                $("#productPrice").html("&#8377; " + data.price);
            }
        });
    });

服务器端代码（Nodejs）：

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

预计移动视图中两个 p-tag 的值会发生变化，而不是定向到新页面。

【问题讨论】：

标签： jquery ajax mobile desktop

【解决方案1】：

您的一个变量似乎干扰了您项目的路由系统，让我们尝试在您的 ajac 函数中使用：method:"POST" 而不是 method:"GET" 和在您的 php 文件中：router.post 而不是 router 。得到。有关 router.post 的更多信息，请参阅此链接：https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes

【讨论】：

【解决方案2】：

我的问题通过包装“点击事件制作 ajax 请求”解决了，如下所示：

$(document).ready(function(){
     $(".get-product").on('click', function (event) {
      .....
     });
});

【讨论】：