javascript - Hvordan sende et JSON-objekt ved å bruke HTML-skjema data

Så jeg har dette HTML-skjemaet:

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

Hva vil være den enkleste måten å sende dataene fra dette skjemaet som et JSON-objekt til serveren min når en bruker klikker på send?

OPPDATERING: Jeg har kommet så langt, men det ser ikke ut til å fungere:

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var j = {
            "first_name":"binchen",
            "last_name":"heris",
        };
        xhr.send(JSON.stringify(j));

Hva gjør jeg galt?

Svar #1

Få komplett skjema data som array og JSON-streng den.

var formData = JSON.stringify($("#myForm").serializeArray());

Du kan bruke det senere i ajax. Eller hvis du ikke bruker ajax; legg det i et skjult tekstområde og send det til serveren. Hvis disse dataene sendes som json-streng via vanlige formdata, må du dekode det. Du vil da få alle dataene i et array.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

Svar #2

HTML gir ingen måte å generere JSON fra skjema-data på.

Hvis du virkelig vil håndtere det fra klienten, må du ty til å bruke JavaScript for å:

  1. hent dataene dine fra skjemaet via DOM
  2. organiser det i et objekt eller en matrise
  3. generer JSON med JSON.stringify
  4. POST det med XMLHttpRequest

Du ville sannsynligvis ha det bedre ved å holde deg til application/x-www-form-urlencoded-data og behandle det på serveren i stedet for JSON. Skjemaet ditt har ikke noe komplisert hierarki som ville ha hatt nytte av en JSON-datastruktur.

Oppdatering som svar på omfattende omskriving av spørsmålet…

  • Din JS har ingen readystatechange-håndterer, så du gjør ingenting med responsen
  • Du utløser JS når send-knappen klikkes uten å avbryte standardoppførselen. Nettleseren vil sende inn skjemaet (på vanlig måte) så snart JS-funksjonen er fullført.

Svar #3

Bruk FormData API

  1. Fang skjemaopplysningene ved hjelp av FormData API formData=new FormData(form)
  2. Konverter det til JSON ved å bruke JSON.stringify(Object.fromEntries(formData))
  3. Send denne strigifiserte JSON-en som AJAX-payload
var form = document.getElementById('myForm');
form.onsubmit = function(event){
        var xhr = new XMLHttpRequest();
        var formData = new FormData(form);
        //open the request
        xhr.open('POST','http://localhost:7000/tests/v1.0/form')
        xhr.setRequestHeader("Content-Type", "application/json");

        //send the form data
        xhr.send(JSON.stringify(Object.fromEntries(formData)));

        xhr.onreadystatechange = function() {
            if (xhr.readyState == XMLHttpRequest.DONE) {
                form.reset(); //reset form after AJAX success or do something else
            }
        }
        //Fail the onsubmit to avoid page refresh.
        return false; 
    }

Tatt fra en artikkel jeg skrev her: https://metamug.com/article/html5/ajax-form-submit.html

Svar #4

Du kan prøve noe sånt som:

<html>
<head>
    <title>test</title>
</head>

<body>
    <form id="formElem">
        <input type="text" name="firstname" value="Karam">
        <input type="text" name="lastname" value="Yousef">
        <input type="submit">
    </form>
    <div id="decoded"></div>
    <button id="encode">Encode</button>
    <div id="encoded"></div>
</body>
<script>
    encode.onclick = async (e) => {
        let response = await fetch('http://localhost:8482/encode', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
        })

        let text = await response.text(); // read response body as text
        data = JSON.parse(text);
        document.querySelector("#encoded").innerHTML = text;
      //  document.querySelector("#encoded").innerHTML = `First name = ${data.firstname} <br/> 
      //                                                  Last name = ${data.lastname} <br/>
      //                                                  Age    = ${data.age}`
    };

    formElem.onsubmit = async (e) => {
      e.preventDefault();
      var form = document.querySelector("#formElem");
     // var form = document.forms[0];

        data = {
          firstname : form.querySelector('input[name="firstname"]').value,
          lastname : form.querySelector('input[name="lastname"]').value,
          age : 5
        }

        let response = await fetch('http://localhost:8482/decode', {
                method: 'POST', // or 'PUT'
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
        })

        let text = await response.text(); // read response body as text
        document.querySelector("#decoded").innerHTML = text;
    };
</script>
</html>

Relaterte artikler