Почему Ajax не работает в мобильном телефоне, как в настольном компьютере?

Question

Когда я получаю данные с сервера по запросу 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("₹ " + 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-тегов в мобильном представлении вместо направления на новую страницу.

Answer 1

Моя проблема была решена простым переносом 'click-event делая ajax запрос', как показано ниже:

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

Answer 2

Кажется, что одна из ваших переменных мешает системе маршрутов вашего проекта, давайте попробуем использовать в вашей функции ajac: метод: "POST" вместо метода: "GET" и в вашем php-файле: router.post вместо router .получить. Смотрите эту ссылку для получения дополнительной информации на router.post: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes