Javascript function needed for jquery post method

Question

My jQuery

 let name = document.getElementById("Name").value;
  let code = document.getElementById("Code").value;
  let type = document.getElementById("ProductTypeId").value;

$.ajax({
   url: "/Home/jQueryAddComment",
   type: "POST",
   dataType: "html",
   data: json,
   success: function(data){ 
      //var message = data.Message; 
      alert(data);
      $('.CommentSection').html(data);
   }
}

I need to convert my jQuery to pure Javascript function using fetch. It is a post method with html return. Is it possible using fetch.

Edit: Below is the get method of my Javascript:

    fetch(url + "?" + o)
        .then(function (response) {
            //check if it is redirected to custom error page
            if (response.redirected && response.url.indexOf("/Error") > 0) {
                response.text().then(function (html) {
                    debugger
                    window.location.href = response.url;
                });
            } else {
                response.text().then(function (html) {
                    document.getElementById('view-all').innerHTML = html;
                });
            }
        })
        .catch(function (err) {

            console.log('Fetch Error', err);
        });

i know only get method of fetch ..is it possile to do post with fetch and get html response..? — Lajith
– Lajith, Commented Sep 19, 2020 at 11:36
@Ajt well of course you can: developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch — Sumit Wadhwa
– Sumit Wadhwa, Commented Sep 19, 2020 at 11:38

Sumit Wadhwa · Accepted Answer · 2020-09-19 11:42:09Z

1

fetch also accepts a second argument which is a literal object containing information pertaining to the request - such as Request method, mode, headers, and POST BODY.

Straight from Mozilla docs:

var data = { name: "justin", code: "SDF", type: "some-type" };

fetch(url, {
   method: 'POST', // *GET, POST, PUT, DELETE, etc.
   mode: 'cors', // no-cors, *cors, same-origin
   cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
   credentials: 'same-origin', // include, *same-origin, omit
   headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
   },
   body: JSON.stringify(data) // body data type must match "Content-Type" header
});

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

answered Sep 19, 2020 at 11:42

Sumit Wadhwa

3,2671 gold badge27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript function needed for jquery post method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related