Почему ajax не работает на мобильных устройствах, как на десктопе?

#jquery #ajax #mobile #desktop

#jquery #ajax #Мобильный #Для рабочего стола

Вопрос:

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

Ответ №1:

Одна из ваших переменных, похоже, мешает системе маршрутов вашего проекта, давайте попробуем использовать в вашей функции ajac: метод:»POST» вместо метода:»GET» и в вашем php-файле: router.post вместо router.get . Смотрите эту ссылку для получения дополнительной информации о 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) {
      .....
     });
});