converting an fetch api call to ajax

user_2485109 0
Viewed 618

i am using a code from a site where onsubmit the call is made and a call is made

$(":submit").click(async (event) => {

i am not aware of this syntax.

my example using the simple $.ajax call and making a post call to the page

so the above function is like this

$(":submit").click(async (event) => {
        event.preventDefault();
        let response = await fetch("page.cfm");
        const reader = response.body.getReader();
        const len = response.headers.get("Content-Length") * 1;

my ajax call is like this

$.ajax({
                url: "page.cfm",
                cache: false,
                data : $('#form').serialize(),
                method: "post",
                beforeSend: function() {
                    $('div.results').html('Please wait');
                },
                success: function(response){
                    $('div.results').html(response);
                }

how can i format the above to my ajax call

jquery ajax javascript
2 Answers

Include form data in the body. Make sure that your await fetch is inside async functions.

$('document').ready( async function() {
  $("#test_fetch").submit( async function(e) {
    e.preventDefault(); // avoid to execute the actual submit of the form.
    var form = $(this);
    var url = form.attr('action');
            
    let response = await fetch(url,{
      method:"post",
      body: $(form).serialize()
    });
    ...
  });
});
user_14550030

You have to change the request to POST and pass the data.
Then read the data from the response

$(":submit").click(async (event) => {
    event.preventDefault();
    $('div.results').html('Please wait');
    let response = await fetch("page.cfm", {method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: $('#form').serialize()});
    const html = await response.text();
    $('div.results').html(html);
});
user_13530110
Related