JSON-String per HTML Post

  • JSON-String per HTML Post

    Edit: Ich habe zumindest eine Lösung gefunden. Mit myString.replace(/\\/g, "") entferne ich alle Backslashes und bekomme dadurch wieder das JSON-Format.

    Hallo,

    ich versuche schon seit zwei Stunden einen JSON-String per Post-Request an den Server zu schicken um dann dort per req.body mit den Daten weiterarbeiten zu können. Der String wird vernünftig erzeugt, da er im Inputfeld korrekt angezeigt wird. Scheinbar werden jedoch '/' eingefügt.

    HTML-Quellcode: Post-Form

    1. <form action="/result" method="post" enctype="text/plain" autocomplete="off">
    2. <script>
    3. </script>
    4. <input id="obj" name="obj" value="">
    5. <button type="button" name="action" value="getResult" onclick="generateJSON(true)">generateJSON </button>
    6. <button>Generiere Knoten</button>
    7. </form>


    JavaScript-Quellcode: generateJSON()

    1. function generateJSON(loaded){
    2. if(loaded) {
    3. var stuff = {nodes: localData, edges: localEdges};
    4. stuff = JSON.stringify(stuff);
    5. console.log("Ergebnis?:" + stuff);
    6. $('#obj').val(stuff);
    7. // $('form').submit();
    8. }
    9. }

    JavaScript-Quellcode: app.js

    1. app.post('/result', urlencodedParser, function(req, res){
    2. var test = JSON.stringify(req.body.obj);
    3. console.log("Fertiges JSON?: " + req.body.obj);
    4. console.log("Fertiges JSON?: " + req.body.nodes);
    5. console.log("Fertiges JSON?: " + test);
    6. res.send('cps_success');
    7. });

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Shiroco ()

  • Das ganze scheint mir wenig durchdacht.

    Erstmal zur Reparatur deines Szenarios:

    Entferne erst mal aus dem "form"-Tag das "enctype"-Attribut. Du willst schließlich urlencoded versenden. (Das entnehme ich dem Parser in der app.js)

    req.body.obj enthält jetzt den JSON-String. Um daraus ein Objekt zu erzeugen, muss dieser erst mal geparsed werden:

    JavaScript-Quellcode: app.js

    1. app.post('/result', urlencodedParser, function(req, res){
    2. req.body.obj = JSON.parse(req.body.obj);
    3. var test = JSON.stringify(req.body.obj);
    4. console.log("Fertiges JSON?: " + req.body.obj);
    5. console.log("Fertiges JSON?: " + req.body.nodes);
    6. console.log("Fertiges JSON?: " + test);
    7. res.send('cps_success');
    8. });
    Die "\" die dir aufgefallen sind, sind nur escape-Sequenzen für die Anführungszeichen im String.


    Bei deiner Lösung codierst du die Daten erst in JSON, nur um sie kurz darauf gleich noch mal urlconform zu codieren. Das ist doch doppelter Aufwand.



    Nun zu einer besseren Lösung:

    Anbieten würde sich hier natürlich wieder AJAX. Da du JQuery verwendest, werde ich das auch mal:

    HTML-Quellcode

    1. <body>
    2. <form action="/result" method="POST">
    3. <button>Generiere Knoten</button>
    4. </form>
    5. <script>
    6. $('form').on('submit', function(e) {
    7. e.preventDefault()
    8. var $form = $(this)
    9. $.post($form.attr('action'), {
    10. nodes: localData,
    11. edges: localEdges
    12. }).done(function(data) {
    13. $('body').html(data)
    14. })
    15. })
    16. </script>
    17. </body>
    Alles anzeigen


    Das Ganze wird auch hier urlencoded versendet. Wenn du neben den generierten Daten auch noch form inputs senden möchtest, sähe das ganze beispielsweise so aus:

    HTML-Quellcode

    1. <body>
    2. <form action="/result" method="POST">
    3. <input type="text" name="optional">
    4. <button>Generiere Knoten</button>
    5. </form>
    6. <script>
    7. $('form').on('submit', function(e) {
    8. e.preventDefault()
    9. var $form = $(this)
    10. $.post($form.attr('action'), $form.serialize() + '&' + $.param({
    11. nodes: 'localData',
    12. edges: 'localEdges'
    13. })).done(function(data) {
    14. $('body').html(data)
    15. })
    16. })
    17. </script>
    18. </body>
    Alles anzeigen


    Es gibt auch Möglichkeiten den request JSON codiert zu versenden, aber lies dir hierzu bitte die JQuery Dokumentation durch. Wenn du möchtest, zeige ich dir auch noch eine Version ohne JQuery.


    Wenn du kein AJAX möchtest, könntest du auch so was machen:


    HTML-Quellcode

    1. <body>
    2. <form action="/result" method="POST">
    3. <div style="display: none;"></div>
    4. <button>Generiere Knoten</button>
    5. </form>
    6. <script>
    7. $('form').on('submit', function() {
    8. var $div = $(this).find('div').first()
    9. $div.empty()
    10. $div.append($('<input type="hidden" name="nodes" value="' + localData + '">'))
    11. $div.append($('<input type="hidden" name="edges" value="' + localEdges + '">'))
    12. })
    13. </script>
    14. </body>
    Alles anzeigen
  • Ich hatte völlig vergessen, dass ich unter anderem auch hier nach Hilfe geschrien hatte. Ich hatte irgendwann in der Nacht eine Lösung gefunden und bin dann ins Bett gefallen - Sorry, Ich habe letztendlich (auf einen Hinweis hin) "einfach" alle escape-Zeichen aus dem String gelöscht und danach funktioniere es einwandfrei. Warum diese Zeichen eingefügt wurden konnte mir der Tippgeber nicht erklären. Zumindest ist mir nun klarer was ich falsch gemacht habe. Vielen Dank dafür. Ich arbeite noch immer an dem Programm. Momentan versuche ich das ganze in zwei Frames darzustellen. Im ersten Frame soll es möglich sein das Netzwerk zu erstellen und im zweiten Frame soll das Ergebnis nach einem Click auf einen Button dargestellt werden.

    Wenn ich AJAX richtig verstehe bietet sich dies hierfür an richtig?