Trying to rewrite jquery ajax with pure js fetch. Fetch get body

Question

On a Laravel driven site, there is a jquery script that controls the quantity and total price of an item in the cart. I am trying to rewrite jquery ajax in cart with pure js fetch. However, there is no way to pass body to fetch in the get request! the required parameters (quantity, product type) are passed to the body. If you put the body, the script swears that the body should not be. If you change body to data (or any other word). The request passes, but returns default zeros in values, as if this parameter was not passed. If you change the get method to post, then it gives a 404 error. Tell me how can I resolve the issue?

old script

$.ajax({
  type: "get",
  url: "{{ route('ajax.set.product.count') }}",
  data: {
    product_type: product_type,
    product_id: product_id,
    new_count: new_count,
    _token: "{{ csrf_token() }}"
  },
  dataType: "json",
  success: function(data) {
    console.log(data);
    if (data.error == 'no') {
      $('#productcount-1-' + index).val(data.new_count);
      $('#productprice-1-' + index).text(data.price_product);
      $('#productcount-2-' + index).val(data.new_count);
      $('#productprice-2-' + index).text(data.price_product);
      $('#price_all').text(data.price_all);
      if (data.poil_count > 0) $('.pcount').text(data.poil_count);
    }
  }
});

new script

fetch('{{ route('ajax.set.product.count') }}', {
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
      "X-Requested-With": "XMLHttpRequest"
    },
    method: 'get',
    credentials: "same-origin",
    body: JSON.stringify({
      product_type: product_type,
      product_id: product_id,
      new_count: new_count,
      _token: "{{ csrf_token() }}"
    }),
  }).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
  if (data.error == 'no') {
    document.getElementById('productcount-1-' + index).value = data.new_count;
    document.getElementById('productprice-1-' + index).textContent = data.price_product;
    document.getElementById('productcount-2-' + index).value = data.new_count;
    document.getElementById('productprice-2-' + index).textContent = data.price_product;
    document.getElementById('price_all').textContent = data.price_all;
    if (data.poil_count > 0) document.querySelector('.pcount').textContent = data.poil_count;
  };
})

There's no body in a `GET` request. The parameters are put in the URL in URL-encoded format. — Barmar, Dec 24 '20 at 20:59
Rewrote the variable as follows. `const params = Object.entries(body).join(`&`).replace(/,/g, `=`); ` Because only this type of link was accepted `https://sait/ajax/set-product-count?product_type=diffuzor&product_id=38&new_count=2&_token=545234` Everything works fine now. Thank you again for prompting and explaining the correct way. — SGA, Dec 24 '20 at 22:49

score 1 · Answer 1 · answered Dec 24 '20 at 21:05

Parameters in for a GET request are put in the search field of the URL, since there's no body.

const body = {
  product_type: product_type,
  product_id: product_id,
  new_count: new_count,
  _token: "{{ csrf_token() }}"
};
const params = Object.entries(body).map((k, v) => k + '=' + encodeURIComponent(v)).join('&');

fetch('{{ route('ajax.set.product.count') }}?' + params, {
    headers: {
      "Accept": "application/json",
      "X-Requested-With": "XMLHttpRequest"
    },
    method: 'get',
    credentials: "same-origin"
  }).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
  if (data.error == 'no') {
    document.getElementById('productcount-1-' + index).value = data.new_count;
    document.getElementById('productprice-1-' + index).textContent = data.price_product;
    document.getElementById('productcount-2-' + index).value = data.new_count;
    document.getElementById('productprice-2-' + index).textContent = data.price_product;
    document.getElementById('price_all').textContent = data.price_all;
    if (data.poil_count > 0) document.querySelector('.pcount').textContent = data.poil_count;
  };
})

Trying to rewrite jquery ajax with pure js fetch. Fetch get body

1 Answers1