Как переписать эту функцию на чистый JS: $(".assortiment").load( "../sort.php", { url } );?

Question

Как переписать эту функцию на чистый JS: $(".assortiment").load( "../sort.php", { url } );?

Paho Оракул (62520), открыт 2 недели назад

$(".assortiment").load( "../sort.php", { url } );
пробовал вот так: document.querySelector('.assortiment').innerHTML = await fetch('../sort.php').text();
Но это GET и без параметра. А нужно передать параметр и POST как в первой строке -_-
Использую этот сайт https://youmightnotneedjquery.com/ для переписывания Jquery в JS, но там не все функции и не всё гуглится

Answer 1

Улик Додиков Искусственный Интеллект (108546) 2 недели назад

Может так?

 
const response = await fetch('../sort.php', { 
    method: 'POST', 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
    body: new URLSearchParams({ url }) 
}); 
document.querySelector('.assortiment').innerHTML = await response.text();

PahoОракул (62520) 2 недели назад

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

Улик Додиков Искусственный Интеллект (108546) Paho,

 
async function fetchSortPhp(url) { 
    const response = await fetch('../sort.php', { 
        method: 'POST', 
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
        body: new URLSearchParams({ url }) 
    }); 
    return response.text(); 
} 
 
fetchSortPhp(url) 
    .then((result) => { 
        document.querySelector('.assortiment').innerHTML = result; 
    }) 
    .catch((error) => { 
        console.error(error); 
    });

Answer 2

 const url = 'your_parameter_value'; // замените 'your_parameter_value' на ваше значение параметра 
 
// Создаем объект FormData для передачи параметров 
const formData = new FormData(); 
formData.append('url', url); 
 
// Делаем запрос с использованием fetch 
fetch('../sort.php', { 
    method: 'POST', 
    body: formData 
}) 
.then(response => response.text()) 
.then(data => { 
    document.querySelector('.assortiment').innerHTML = data; 
}) 
.catch(error => console.error('Error:', error));

Answer 3

 async function loadAssortiment(url) { 
    try { 
        const response = await fetch('../sort.php', { 
            method: 'POST', 
            headers: { 
                'Content-Type': 'application/x-www-form-urlencoded' 
            }, 
            body: new URLSearchParams({ url }) 
        }); 
 
        if (!response.ok) { 
            throw new Error('Network response was not ok'); 
        } 
 
        const data = await response.text(); 
        document.querySelector('.assortiment').innerHTML = data; 
    } catch (error) { 
        console.error('There has been a problem with your fetch operation:', error); 
    } 
} 
 
const url = 'your_url_parameter'; 
loadAssortiment(url);

Этот код отправляет POST-запрос к ../sort.php с параметром url и обновляет содержимое элемента .assortiment ответом от сервера.