Tipo comunes de Content-Type

application/x-www-form-urlencoded
Los datos se convierten en pares clave-valor codificados como clave1=valor1&clave2=valor2, dondee tanto las claves como los valores están codificados en URL.

multipart/form-data (para envío de archivos)
Procesa los datos del formulario como un mensaje único, dividiendo cada campo con un delimitador específico.

application/json
Transforma los datos en una cadena serializada en formato JSON

application/octet-stream
Flujo binario de archivo

text/xml para transmisión y almacenamiento de datos

Utilización de FormData

// Crear instancia de FormData
// const formDatos = new FormData();

// Obtener FormData desde un formulario existente
const formDatos = new FormData(document.getElementById(identificadorDom));

// Incorporar información
formDatos.append("campo1", "dato1");
formDatos.append("campo1", "dato2");
formDatos.append("campo1", "dato3");

// Recuperar valor por clave
console.log(formDatos.get("campo1"));
console.log(formDatos.getAll("campo1"));

// Modificar valor existente
formDatos.set("campo1", "nuevoValor");
console.log(formDatos.getAll("campo1"));

// Verificar existencia de clave
console.log(formDatos.has("campo1"));

// Eliminar entrada específica
formDatos.delete("campo1");
console.log(formDatos.has("campo1"));

formDatos.set("campo1", "dato1");
// Iteración de elementos
for (let [llave, valor] of formDatos.entries()) {
    console.log(llave, valor);
}

Solicitudes POST con jQuery Ajax

<form id="formulario">
    <input type="text" name="usuario" value="juan" />
    <input type="file" name="archivo" />
</form>
<button type="button" onclick="enviarJquerySerializado('formulario')">jQuery Ajax serializado</button>
<button type="button" onclick="enviarJqueryFormData('formulario')">jQuery Ajax FormData</button>
<button type="button" onclick="enviarJqueryJson()">jQuery Ajax JSON</button>

<script>
    const direccion = "http://localhost:3000/php-demos/solicitud.php";
    
    function enviarJquerySerializado(idElemento) {
      const datosSerializados = $("#" + idElemento).serialize();
      $.ajax({
        url: direccion,
        type: "post",
        data: datosSerializados,
        dataType: "json",
        beforeSend: function () {},
        success: function (respuesta) {
          console.log(respuesta);
        },
        error: function (objetoXhr, estadoTexto, errorLanzado) {
          console.log(estadoTexto, errorLanzado);
        },
      });
    }

    function enviarJqueryFormData(idElemento) {
      const formDatos = new FormData(document.getElementById(idElemento));
      $.ajax({
        type: "post",
        url: direccion,
        data: formDatos,
        dataType: "json",
        cache: false,
        processData: false,
        contentType: false,
        beforeSend: function () {},
      })
        .done(function (resultado, estadoTexto, objetoXhr) {
          console.log(resultado, estadoTexto);
        })
        .fail(function (objetoXhr, estadoTexto, errorLanzado) {
          console.log(estadoTexto, errorLanzado);
        })
        .always(function (datos, estadoTexto, objetoXhr) {
        });
    }

    function enviarJqueryJson() {
      const cadenaDatos = JSON.stringify({ x: 5, y: 10 });
      $.ajax({
        url: direccion,
        type: "post",
        cache: false,
        data: cadenaDatos,
        dataType: "json",
        processData: false,
        contentType: "application/json",
        success: function (respuesta) {
          console.log(respuesta);
        },
        beforeSend: function () {},
        error: function () {},
      });
    }
</script>

<solicitud.php> $_REQUEST, 'archivos' => $_FILES, 'contenido_crudo' => $contenidoCrudo, 'json_datos' => $datosJson]); </solicitud.php>### Respuestas obtenidas

// Respuesta al enviar datos serializados del formulario
{"informacion":{"usuario":"juan"},"archivos":[],"contenido_crudo":"usuario=juan","json_datos":null}

// Respuesta al enviar datos FormData
{"informacion":{"usuario":"juan"},"archivos":{"archivo":{"name":"documento.pdf","type":"application/pdf","tmp_name":"C:\\Temp\\tempFile.tmp","error":0,"size":4500}},"contenido_crudo":"","json_datos":null}

// Respuesta al enviar datos JSON
{"informacion":[],"archivos":[],"contenido_crudo":"{\"x\":5,\"y\":10}","json_datos":{"x":5,"y":10}}

Implementación con Fetch API

<button type="button" onclick="enviarFetchSerializado('formulario')">Fetch serializado</button>
<button type="button" onclick="enviarFetchFormData('formulario')">Fetch FormData</button>
<button type="button" onclick="enviarFetchJson()">Fetch JSON</button>

<script>
    function enviarFetchSerializado(idElemento) {
      const datosSerializados = $("#" + idElemento).serialize();
      fetch(direccion, {
        method: "post",
        body: datosSerializados,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((respuesta) => {
          if (!respuesta.ok) {
            throw new Error(respuesta.statusText);
          }
          return respuesta.json();
        })
        .then((respuesta) => console.log(respuesta))
        .catch((error) => console.log(error));
    }

    function enviarFetchFormData(idElemento) {
      const formDatos = new FormData(document.getElementById(idElemento));
      fetch(direccion, {
        method: "post",
        body: formDatos,
      })
        .then((respuesta) => {
          if (!respuesta.ok) {
            throw new Error(respuesta.statusText);
          }
          return respuesta.json();
        })
        .then((respuesta) => console.log(respuesta))
        .catch((error) => console.log(error));
    }

    function enviarFetchJson() {
      const cadenaDatos = JSON.stringify({ x: 5, y: 10 });
      fetch(direccion, {
        method: "post",
        body: cadenaDatos,
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((respuesta) => respuesta.json())
        .then((respuesta) => console.log(respuesta))
        .catch((error) => console.log(error));
    }
</script>

Implementación con Axios

<button type="button" onclick="enviarAxiosSerializado('formulario')">Axios serializado</button>
<button type="button" onclick="enviarAxiosFormData('formulario')">Axios FormData</button>
<button type="button" onclick="enviarAxiosJson()">Axios JSON</button>

<script>
    function enviarAxiosSerializado(idElemento) {
      const datosSerializados = $("#" + idElemento).serialize();
      axios({
        method: "post",
        url: direccion,
        data: datosSerializados,
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
      })
        .then((respuesta) => {
          if (respuesta.status == "200") {
            console.log(respuesta.data);
          }
        })
        .catch((error) => console.log(error));
    }

    function enviarAxiosFormData(idElemento) {
      const formDatos = new FormData(document.getElementById(idElemento));
      axios({
        method: "post",
        url: direccion,
        data: formDatos,
        headers: { "Content-Type": "multipart/form-data" },
      })
        .then((respuesta) => {
          if (respuesta.status == "200") {
            console.log(respuesta.data);
          }
        })
        .catch((error) => console.log(error));
    }

    function enviarAxiosJson() {
      const objetoDatos = { x: 5, y: 10 };
      axios({
        method: "post",
        url: direccion,
        data: objetoDatos,
      })
        .then((respuesta) => {
          if (respuesta.status == "200") {
            console.log(respuesta.data);
          }
        })
        .catch((error) => {
          if (error.response) {
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
          } else if (error.request) {
            console.log(error.request);
          } else {
            console.log("Error", error.message);
          }
        });
    }
</script>