CODEWITHSUNDEEP
javascriptjquery
Lajith
Lajith

Reputation: 1877

Javascript function needed for jquery post method

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);
        });

Upvotes: 0

Views: 53

Answers (1)

Sumit Wadhwa
Sumit Wadhwa

Reputation: 3227

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

Upvotes: 1

Related Questions