Сделайте HTTP-запрос к веб-API, используя обычный JavaScript - PullRequest
Новая
       22

Сделайте HTTP-запрос к веб-API, используя обычный JavaScript

0 голосов
/ 29 сентября 2018

Я пытаюсь получить доступ к php-скрипту на сервере, который возвращает объект JSON.Я пытаюсь сделать это с чистым JS (не JQuery или React).

У меня есть следующий JS: 

//Define Parameters:
var param1 = document.getElementById("param1");
var param2 = document.getElementById("param2");

//Send data to the server:
function sendData() {

    var XHR = new XMLHttpRequest();

    //On Success:
    XHR.addEventListener("load", function(event) {
        alert(event.target.responseText);
    });

    //On Fail:
    XHR.addEventListener("error", function(event) {
        alert('Oops! Something went wrong.');
    });

    //Setup the request:
    XHR.open("POST", "https://www.example.com/folder/file.php");
    XHR.setRequestHeader('Content-Type', 'application/json');

    //Perform the request:
    XHR.send(JSON.stringify({
        param1: param1,
        param2: param2
    }));

}

Эти параметры вводятся пользователем со страницы HTML.Похоже, что запрос не отправляется с параметрами POST, а request type является OPTIONS, а не POST.

РЕДАКТИРОВАТЬ 1:

Как предлагается вкомментарии, я попытался получить запрос, и запрос работает.Кажется, он не передает мои параметры POST.Мой код выглядит следующим образом. 

//Define Parameters:
var param1 = document.getElementById("param1");
var param2 = document.getElementById("param2");

var formData = new FormData(document.getElementById('form'));
formData.append('param1', param1);
formData.append('param2', param2);

//Send data to the server:
function sendData() {

    var url = 'https://www.example.com/folder/file.php';

    fetch(url, {
    method: 'POST',
    body: formData,
    headers:{
        'Accept': 'application/json',
        'Content-Type': 'multipart/form-data'
    }
    }).then(res => res.json())
    .then(response => console.log('Success:', JSON.stringify(response)))
    .catch(error => console.error('Error:', error));

}

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

Проверяли ли вы, что в запросе на выборку отправляются данные нужного типа?Неправильный тип, полученный в поле, может испортить результаты, которые вы видите.Какие ошибки вы получаете?Эта ссылка также может описывать то, с чем вы сталкиваетесь при получении: https://stanko.github.io/uploading-files-using-fetch-multipart-form-data/

(Это действительно должен быть комментарий, но у меня нет репутации для этого, извините).

0 голосов
/ 30 сентября 2018

Удалите раздел headers в вашем запросе fetch, чтобы вместо него использовались значения по умолчанию.

...