2017-07-04 7 views
0

Ich erstelle derzeit ein einfaches webbasiertes Datenvisualisierungstool. Ich möchte im Grunde in der Lage sein, die Benutzerauswahl an den Server zu senden (den ich mit Express erstellt habe), um die Datenbank abzufragen. Das Problem ist, ich bin nicht sicher, wie man die Daten an den Server sendet und dann am anderen Ende erhält, um dies zu tun.Daten vom Client an die Serverseite senden

Ich möchte, dass die Daten auf dem Server, auf dem Klicken einer

var data = { 
 
    Admission_type: ""; 
 
    Gender: ""; 
 
    Max_age: 89, 
 
    Min_age: 0 
 
}; 
 

 
$("#PlotBtn").click(function() { 
 
    
 
});

+0

machen Sie eine Ajax-Anfrage und senden Sie sie an eine Route. Verwenden Sie diese Route dann in Ihrer Serverdatei, um auf die variablen Daten zuzugreifen. – noobcode

Antwort

1

Die häufigste Vanille JS Wege-Taste gesendet werden Daten an einen Server zu senden ist mit zu einem machen XMLHttpRequest (XHR). Es scheint, als ob Sie versuchen, ein Objekt zu übergeben, und JSON ist vielleicht die flexibelste Art, Daten zu und von einem Server zu senden. Also das einfachste Stück Code, die Daten an den Server ist so etwas wie diese senden würde:

var xhr = new XMLHttpRequest; 
xhr.open("GET", "https://yourserver.domain.com/data"); 
xhr.send(); 

Dies ist jedoch nur die Informationen sendet und es hat keine Möglichkeit, die Reaktion der Handhabung. Es gibt viele Möglichkeiten, dies zu tun, sowie viele Optionen, wie die Informationen gesendet werden, aber dies sind die Barebones, die Sie benötigen, um die Antwort zu erhalten.

Werfen Sie einen Blick auf die oben verlinkte Dokumentation, um weitere Optionen und andere Ereignisse zu sehen, die Sie hören können.

+0

Und wie bekomme ich die Daten auf der Serverseite? – Jacob

+0

Das hängt davon ab, welche Servertechnologie Sie auf der anderen Seite verwenden. –

0

Es gibt eine Menge Möglichkeiten, Daten über das Netzwerk zu senden. Wie erklärt @ Asinus, der gebräuchlichste Weg ist, XMLHttpRequest (aka xhr) zu verwenden, aber die modernsten Browser bietet bessere Möglichkeit, den Zweck zu erreichen. Einer von ihnen ist der Fetch API. Es ist leistungsfähiger als sein Vorgänger xhr!

Ich empfehle Ihnen, einen Blick auf diese blog post über Fetch zu werfen. Hier wird ein Beispiel für die Verwendung:

fetch('https://jsonplaceholder.typicode.com/posts/1', { 
    method: 'get' 
}).then(response => { 
    console.log(response.json()); // Response, everything is fine 
}).cath(err => { 
    console.log(err); // Failure: an error occurred 
}); 

In Ihrem Fall, wenn Sie die Daten an den Server senden möchten, müssen Sie eine POST Anfrage machen Restful zu sein.

Verwandte Themen