Using async/await with Fetch to send POST parameters for text/html content

Question

Using async/await with Fetch to send POST parameters for text/html content

Is there a way to POST parameters for content type text/html without sending it as an object?

In my specific scenario, I need to include extra data that is not part of a form and is read from a cookie.

When posting with body : {} or body: JSON.Stringify({}), the data is posted as an object. However, I want the data to be posted as individual values.

$(document).on('click', '#update', async () => {
    try {
        const response = await fetch("/getupdate",{
            method:'POST',
            headers:{
                'Content-Type':'text/html; charset=utf-8'
            },
            body: JSON.stringify({
                "country": getCookie("country"),
                "city": getCookie("city").replace(/"/g, ""),
                "action": 1,
                "csrfmiddlewaretoken": $('input[name=csrfmiddlewaretoken]').val()
            }),
        });
    } catch (error){
        console.log(error)
    }
});

Instead of receiving individual values, I got an object -

{
    "country": "US",
    "city": "Miami",
    "action": 1,
    "csrfmiddlewaretoken": "iLoS4Bsgdyc6EhOtQKiiXrIqr9S1eojdhdyEeClA8qI5ei2WpfQQu1JrduLrbndndR"
}

I am expecting individual values to be sent like this -

    "country": "US",
    "city": "Miami",
    "action": 1,
    "csrfmiddlewaretoken": "iLoS4Bsgdyc6EhOtQKiiXrIqr9S1eojdhdyEeClA8qI5ei2WpfQQu1JrduLrbndndR"

javascript django async-await fetch

Answer 1

Answer №1

If you're not keen on transmitting the data as a JSON string/object, there are alternative options available. Here are three examples of how you can send the data:

text/plain
application/x-www-form-urlencoded
multipart/form-data

Sending the data with the content type text/html doesn't make sense because the data is unrelated to HTML code.

Personally, I would recommend using either the second or third option.

Send as text/plain (URI encoded)

This seems to be what you're asking for. You want to send the data as a plain string. However, this can get messy with line breaks and characters like ", requiring you to encode the data as URI. But keep in mind that if you do this, the server won't be able to interpret the data/string correctly, so this may not be the best choice.

$(document).on('click', '#update', async() => {
  let data = `"country": ${getCookie("country")},
              "city": ${getCookie("city").replace(/"/g, "")},
              "action": 1,
              "csrfmiddlewaretoken": ${$('input[name=csrfmiddlewaretoken]').val()}`;

  try {
    const response = await fetch("/getupdate", {
      method: 'POST',
      body: encodeURIComponent(data)
    });
  } catch (error) {
    console.log(error)
  }
});

function getCookie(str) {
  return "some string";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="csrfmiddlewaretoken" value="csrfmiddlewaretoken">
<button id="update">Update</button>

Send as application/x-www-form-urlencoded

This is the default content type when submitting data through a standard HTML form. If you don't have any files to send, this would be the recommended option. The server will be able to understand the data as if it were coming from an HTML form submission.

$(document).on('click', '#update', async() => {
  let data = new URLSearchParams();
  data.append('country', getCookie("country"));
  data.append('city', getCookie("city").replace(/"/g, ""));
  data.append('action', 1);
  data.append('csrfmiddlewaretoken', $('input[name=csrfmiddlewaretoken]').val());

  try {
    const response = await fetch("/getupdate", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: data
    });
  } catch (error) {
    console.log(error)
  }
});

function getCookie(str) {
  return "some string";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="csrfmiddlewaretoken" value="csrfmiddlewaretoken">
<button id="update">Update</button>

Send as multipart/form-data

This content type is used when sending data along with files in an HTML form. The server will be able to interpret the data similar to an HTML form submission.

$(document).on('click', '#update', async() => {
  try {
    let data = new FormData();
    data.append("country", getCookie("country"));
    data.append("city", getCookie("city").replace(/"/g, ""));
    data.append("action", 1);
    data.append("csrfmiddlewaretoken", $('input[name=csrfmiddlewaretoken]').val());

    const response = await fetch("/getupdate", {
      method: 'POST',
      body: data
    });
  } catch (error) {
    console.log(error)
  }
});

function getCookie(str) {
  return "some string";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="csrfmiddlewaretoken">
<button id="update">Update</button>

Answer 2

If you're not keen on transmitting the data as a JSON string/object, there are alternative options available. Here are three examples of how you can send the data:

text/plain
application/x-www-form-urlencoded
multipart/form-data

Sending the data with the content type text/html doesn't make sense because the data is unrelated to HTML code.

Personally, I would recommend using either the second or third option.

Send as text/plain (URI encoded)

This seems to be what you're asking for. You want to send the data as a plain string. However, this can get messy with line breaks and characters like ", requiring you to encode the data as URI. But keep in mind that if you do this, the server won't be able to interpret the data/string correctly, so this may not be the best choice.

$(document).on('click', '#update', async() => {
  let data = `"country": ${getCookie("country")},
              "city": ${getCookie("city").replace(/"/g, "")},
              "action": 1,
              "csrfmiddlewaretoken": ${$('input[name=csrfmiddlewaretoken]').val()}`;

  try {
    const response = await fetch("/getupdate", {
      method: 'POST',
      body: encodeURIComponent(data)
    });
  } catch (error) {
    console.log(error)
  }
});

function getCookie(str) {
  return "some string";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="csrfmiddlewaretoken" value="csrfmiddlewaretoken">
<button id="update">Update</button>

Send as application/x-www-form-urlencoded

This is the default content type when submitting data through a standard HTML form. If you don't have any files to send, this would be the recommended option. The server will be able to understand the data as if it were coming from an HTML form submission.

$(document).on('click', '#update', async() => {
  let data = new URLSearchParams();
  data.append('country', getCookie("country"));
  data.append('city', getCookie("city").replace(/"/g, ""));
  data.append('action', 1);
  data.append('csrfmiddlewaretoken', $('input[name=csrfmiddlewaretoken]').val());

  try {
    const response = await fetch("/getupdate", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: data
    });
  } catch (error) {
    console.log(error)
  }
});

function getCookie(str) {
  return "some string";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="csrfmiddlewaretoken" value="csrfmiddlewaretoken">
<button id="update">Update</button>

Send as multipart/form-data

This content type is used when sending data along with files in an HTML form. The server will be able to interpret the data similar to an HTML form submission.

$(document).on('click', '#update', async() => {
  try {
    let data = new FormData();
    data.append("country", getCookie("country"));
    data.append("city", getCookie("city").replace(/"/g, ""));
    data.append("action", 1);
    data.append("csrfmiddlewaretoken", $('input[name=csrfmiddlewaretoken]').val());

    const response = await fetch("/getupdate", {
      method: 'POST',
      body: data
    });
  } catch (error) {
    console.log(error)
  }
});

function getCookie(str) {
  return "some string";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="csrfmiddlewaretoken">
<button id="update">Update</button>

Answer 3

Answer №2

In my opinion, it would be best to submit the form data by constructing a FormData object instead of using JsonString. You can do this by referring to the FormData documentation for more information.

$(document).on('click', '#update', async () => {
    try {
        // Construct form data
        const data = new FormData();
        data.append("country", getCookie("country"));
        data.append("city", getCookie("city").replace(/"/g, ""));
        data.append("action", 1);
        data.append("csrfmiddlewaretoken", $('input[name=csrfmiddlewaretoken]').val());

        const response = await fetch("/getupdate",{
            method:'POST',
            body: data,
        });
    } catch (error){
        console.log(error)
    }
});

Answer 4

In my opinion, it would be best to submit the form data by constructing a FormData object instead of using JsonString. You can do this by referring to the FormData documentation for more information.

$(document).on('click', '#update', async () => {
    try {
        // Construct form data
        const data = new FormData();
        data.append("country", getCookie("country"));
        data.append("city", getCookie("city").replace(/"/g, ""));
        data.append("action", 1);
        data.append("csrfmiddlewaretoken", $('input[name=csrfmiddlewaretoken]').val());

        const response = await fetch("/getupdate",{
            method:'POST',
            body: data,
        });
    } catch (error){
        console.log(error)
    }
});

Using async/await with Fetch to send POST parameters for text/html content

Answer №1

Send as text/plain (URI encoded)

Send as application/x-www-form-urlencoded

Send as multipart/form-data

Answer №2

Similar questions

Using jQuery, learn how to successfully call a selector from dynamic content

Access and retrieve pkpass files from a server using React

Unable to find the import "@mui/x-charts/PieChart" in the file "src/components/Pie/Pie.jsx". Could the file be missing or spelled incorrectly?

In what scenarios is it more suitable to utilize style over the sx prop in Material-UI?

Enhancing, not replacing, a Template Block

I am not enhancing the array's value; rather, I am substituting it

Encountering a three.js issue while generating a large number of point lights

Use HTML to showcase an image that dynamically changes based on the outcome of a query function

Encountering an issue with Django where updating the database using an Excel file results in an error due to the presence of duplicate

How can Selenium be used to identify an Internet Explorer browser extension?

instructions for selecting div id within the same "table td" element using jQuery

How to dynamically insert elements into the HTML page using Angular

What is the best way to interpret numerous rows of Form elements simultaneously?

Switching from jQuery to vanilla JavaScript, iterating through each HTML tag in a loop

Is it possible to include ternary in the "homepage" section of the package.json file?

Redirecting with response headers in Next.js

Expand Menu Options (jQuery)

Combining Framer Motion with Next.js: Resolving conflicts between layoutId and initial props in page transitions

What is the process for specifying a method on a third-party class in TypeScript?

Why is my nested React Router component failing to load upon page refresh?