Metoder för att skicka formulär i JavaScript

Formulär kan skickas på två sätt: med GET-metoden eller POST-metoden. Sättet att skicka formuläret regleras av attributet method i formuläret.

Till exempel, låt oss ange GET-metoden för formuläret:

public/form.html<form action="/handler/" method="GET">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

Och nu POST-metoden:

public/form.html<form action="/handler/" method="POST">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

Låt oss nu se vad skillnaden är mellan de två sätten att skicka. I fallet med GET-metoden kommer formulärdata att synas i webbläsaren i form av en så kallad frågesträng (query string), som representerar par av typen nyckel-värde, där nyckeln kommer att vara namnet på formulärelementet, och värdet - datan som matats in i det. Dessa värden kommer att separeras med et-tecken.

Data som skickas med GET-metoden kommer på vår server att hamna i egenskapen get i objektet med data:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.get); // kommer att visas i serverkonsolen
    return 'form data received';
  }
}

Och data som skickas med POST-metoden kommer på vår server att hamna i egenskapen post i objektet med data:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.post); // kommer att visas i serverkonsolen
    return 'form data received';
  }
}

För korthets skull kan man göra en destructuring, för att få vår data i en separat variabel:

server.jsexport default {
  '/handler/': function({get, post}) {
    console.log(get);
    console.log(post);
    return 'form data received';
  }
}