JQuery olmadan sunucuya bir JSON gönderme ve karşılığında bir JSON alma


115

Sunucuya bir JSON göndermem ve JQuery kullanmadan kullanıcı tarafında ortaya çıkan JSON'u almam gerekiyor.

Bir GET kullanmam gerekirse, JSON'u parametre olarak nasıl geçiririm? Çok uzun olma riski var mı?

POST kullanmam gerekiyorsa onload, GET'te bir işlevin eşdeğerini nasıl ayarlayabilirim ?

Yoksa farklı bir yöntem mi kullanmalıyım?

REMARK

Bu soru basit bir AJAX göndermekle ilgili değil. Kopya olarak kapatılmamalıdır.


Kullanmanız gerekiyor XMLHttpRequest. Adından bağımsız olarak, onu JSON verileri için kullanabilirsiniz (ve aslında jQuery bunu arka planda yapar).
elixenide

2
Verileri POST yapardım. Şuna bir göz atın: youmightneedjquery.com . Vanilla JS ile verileri nasıl alabileceğinizi / gönderebileceğinizi gösterir.
HaukurHaf

1
@Ed Cottrell Başvurulan sorunun bununla hiçbir ilgisi yok. Referans, sendingoldukça genel bir şey olan (SADECE) bir ajax talebini almaktır . Bu, istiyor sendingama ve receiving JSONsaf JavaScript'te. Ayrıca, bu JSON'u geri göndermek için, sorunun bu bölümünü nasıl çözeceğinizi bilmeniz gerekir ki bu server-side, başvurulan soruda bahsedilmeyen başka bir şeydir.
hex494D49

1
@Ed Cottrell Bahsettiğiniz sorunun onaylanmış bir cevabı yok ve Ajax talebini oluşturmak için eski yöntemleri kullanıyor. Bu soruya tam bir cevap vermiyor. Sorum geleneksel bir Ajax POST veya GET'den daha incelikli. Asıl noktayı kaçırdın.
Jérôme Verstrynge

1
@JVerstry onreadystatechange, onloadaşağıdaki kabul edilen yanıtta gösterildiği gibi taklit etmek için kullandığınız şeydir . Ayrıştırmak için sadece JSON.parse()(yine, cevapta gösterildiği gibi) kullanın, ancak sorudaki dizgeden bahsettiğinizden beri bunu zaten bildiğinizi varsayıyordum. Bu noktaları kapsayan 1 değil 2 soruya işaret ederek size yardımcı olmaya çalıştım. Açıkçası bazı farklar var - nadiren tam olarak aynı olan 2 soru - ancak JSON'u nasıl zorlayacağınızı ve ayrıştıracağınızı zaten biliyorsanız bu önemsizdir. Bununla birlikte, siz ve @ hex494D49 aynı fikirde olmadığından, bunu yeniden açılmak üzere aday gösteriyorum.
elixenide

Yanıtlar:


221

POST yöntemini kullanarak JSON formatında veri gönderme ve alma

// 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);

GET yöntemini kullanarak JSON formatında veri gönderme ve alma

// 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();

PHP kullanarak sunucu tarafında JSON formatında veri işleme

<?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);
?>

Bir HTTP Alma isteğinin uzunluğunun sınırı, 2kB - 8kB arasında hem sunucuya hem de kullanılan istemciye (tarayıcı) bağlıdır. Bir URI sunucunun kaldırabileceğinden daha uzunsa, sunucu 414 (İstek-URI Çok Uzun) durumunu döndürmelidir.

Not Birisi, durum değerleri yerine durum adlarını kullanabileceğimi söyledi; başka bir deyişle, xhr.readyState === xhr.DONEyerine kullanabilirim xhr.readyState === 4Sorun, Internet Explorer'ın farklı durum adları kullanması, bu nedenle durum değerlerini kullanmak daha iyidir.


4
Olmalı xhr.status === 200.
17:37

JSON verilerini localhost'ta barındırılan REST API'ye göndermek için aynı kodu kullanıyorum ancak hatayı alıyorumXHR failed loading: POST
viveksinghggits

@viveksinghggits Öncelikle, yukarıdaki kodun localhost'unuzda çalışıp çalışmadığını kontrol edin. Olursa (ve işe yararsa), sorun sunucu tarafınızda bir yerde olmalıdır; değilse, bana bildirin ve ben kontrol edeceğim. Bu şekilde, kodunuzdan hiçbir şey olmadan, size yardımcı olamam.
hex494D49

@ hex494D49 cevabınız için çok minnettarım, aslında XHR'yi formun gönderim eylemi üzerine bir tıklama olayıyla ateşlenecek şekilde değiştirdiğimde ateşliyordum. CORS hatası aldım, bu anlaşılabilir ve bunun için sunucu tarafı kodumu değiştiriyorum. Bunun hakkında burada yazdım medium.com/@viveksinghggits/…
viveksinghggits

6

Yeni API getirmeyi kullanma :

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}`)                
Sunucu 200 (tamam) yerine başka bir durum gönderdiğinde işlem yapmanız gerekir, bu sonucu reddetmelisiniz çünkü boş bırakılırsanız, json'u ayrıştırmaya çalışacak, ancak yok, bu yüzden bir hata atacak


1
JSON.stringifyİki kez kullanıyorsun .
Shukant Pal
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.