Отправка JSON на сервер и получение взамен JSON без JQuery

115

Мне нужно отправить JSON (который я могу преобразовать) на сервер и получить полученный JSON на стороне пользователя без использования JQuery.

Если мне следует использовать GET, как передать JSON в качестве параметра? Есть ли риск, что это будет слишком долго?

Если мне нужно использовать POST, как мне установить эквивалент onloadфункции в GET?

Или мне следует использовать другой метод?

Замечание

Этот вопрос не об отправке простого AJAX. Его не следует закрывать как дубликат.

Жером Верстринж
источник
Вам нужно использовать XMLHttpRequest. Несмотря на название, вы можете использовать его для данных JSON (и именно так jQuery делает это в фоновом режиме).
elixenide
2
Я бы опубликовал данные. Взгляните на это: youmightnotneedjquery.com . Он показывает, как вы можете получать / отправлять данные с помощью vanilla JS.
HaukurHaf
1
@Ed Cottrell Указанный вопрос не имеет к этому никакого отношения. Ссылка касается (ТОЛЬКО) sendingзапроса ajax, что является довольно общей вещью. Этот просит, sendingно и receiving JSONв чистом JavaScript. Кроме того, чтобы отправить этот JSON обратно, вы должны знать, как решить эту часть проблемы, server-sideчто является еще одной вещью, не упомянутой в указанном вопросе.
hex494D49 01
1
@Ed Cottrell На упомянутый вами вопрос нет утвержденного ответа, и для создания запроса Ajax используются старые методы. Он не дает полного ответа на этот вопрос. Мой вопрос более тонкий, чем традиционный Ajax POST или GET. Вы упустили суть.
Jérôme Verstrynge 01
1
@JVerstry onreadystatechange- это то, что вы используете для эмуляции onload, как показано в принятом ответе ниже. Для синтаксического анализа вы просто используете JSON.parse()(опять же, как показано в ответе), но я предполагал, что вы уже знали об этом, так как упомянули в вопросе строковую обработку. Я попытался помочь вам, указав не на 1, а на 2 вопроса по этим вопросам. Очевидно, есть некоторая разница - редко бывает два абсолютно идентичных вопроса - но это тривиально, если вы уже знаете, как структурировать и анализировать JSON. Тем не менее, поскольку вы и @ hex494D49 не согласны, я предлагаю открыть его повторно.
elixenide 01

Ответы:

221

Отправка и получение данных в формате JSON методом POST

// Sending and receiving data in JSON format using POST method
//
var xhr = new XMLHttpRequest();
var url = "url";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    }
};
var data = JSON.stringify({"email": "hey@mail.com", "password": "101010"});
xhr.send(data);

Отправка и получение данных в формате JSON методом GET

// Sending a receiving data in JSON format using GET method
//      
var xhr = new XMLHttpRequest();
var url = "url?data=" + encodeURIComponent(JSON.stringify({"email": "hey@mail.com", "password": "101010"}));
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    }
};
xhr.send();

Обработка данных в формате JSON на стороне сервера с помощью PHP

<?php
// Handling data in JSON format on the server-side using PHP
//
header("Content-Type: application/json");
// build a PHP variable from JSON sent using POST method
$v = json_decode(stripslashes(file_get_contents("php://input")));
// build a PHP variable from JSON sent using GET method
$v = json_decode(stripslashes($_GET["data"]));
// encode the PHP variable to JSON and send it back on client-side
echo json_encode($v);
?>

Предел длины HTTP-запроса Get зависит от используемого сервера и клиента (браузера) и составляет от 2 до 8 кБ. Сервер должен вернуть статус 414 (Request-URI Too Long), если URI длиннее, чем сервер может обработать.

Примечание. Кто-то сказал, что я могу использовать имена состояний вместо значений состояний; другими словами, я мог бы использовать xhr.readyState === xhr.DONEвместо xhr.readyState === 4. Проблема в том, что Internet Explorer использует разные имена состояний, поэтому лучше использовать значения состояний.

шестнадцатеричный494D49
источник
4
Должно быть xhr.status === 200.
ответила
Я использую тот же код для отправки данных JSON в REST API, который размещен на локальном XHR failed loading: POST
хосте,
@viveksinghggits Сначала проверьте, работает ли приведенный выше код на вашем локальном хосте. Если это так (и должно работать), проблема должна быть где-то на стороне вашего сервера; если нет, дайте мне знать, и я проверю. Таким образом, без вашего кода я не могу вам помочь.
hex494D49 06
@ hex494D49 так благодарен за ваш ответ, я действительно запускал XHR для действия отправки формы, когда я изменил его, чтобы он запускался событием щелчка на. Я получил ошибку CORS, это понятно, и я меняю для этого код на стороне сервера. Я писал об этом здесь medium.com/@viveksinghggits/...
viveksinghggits
6

Использование нового API- интерфейса :

const dataToSend = JSON.stringify({"email": "hey@mail.com", "password": "101010"});
let dataReceived=""; 
fetch("",{credentials:'same-origin',mode:'same-origin',method:"post",body:dataToSend})
              .then(resp => {
                if(resp.status==200){
                   return resp.json()
                }else{
                    console.log("Status: "+resp.status);
                    return Promise.reject("server")
                }
              })
           .then(dataJson =>{
                 dataReceived = JSON.parse(dataJson);
             })
              .catch(err =>{
                if(err=="server")return
                console.log(err);
            })
            
 console.log(`Received: ${dataReceived}`)                
Вам нужно обработать, когда сервер отправляет другой статус, а не 200 (хорошо), вы должны отклонить этот результат, потому что, если вы оставите его пустым, он попытается проанализировать json, но его нет, поэтому он выдаст ошибку

Джон Бэлвин Ариас
источник
1
Вы используете JSON.stringifyдважды.
Шукант Пал