Это правильный синтаксис для отправки запроса GET URL?

Question

ЧТОБЫ ВСТАВИТЬ значения в мою таблицу, я попробовал этот объект GET xmlhttprequest.Правильный ли мой синтаксис в URL?Это не работает.

document.getElementById('allsubmit').addEventListener('click',sendPost);
  var com = document.getElementById('inputcompany').value;
  var cat = document.getElementById('selectCategory').value;
  var subcat = document.getElementById('selectsubCategory').value;
  var descrip = document.getElementById('textdescription').value;
  var exp = document.getElementById('datepicker').value;

  function sendPost() {
   var xhr = new XMLHttpRequest();
    xhr.open('GET',"addingthevacancy.php?company='"+com+"'?category='"+cat+"'?subcategory='"+subcat+"'?description='"+descrip+"'?expdate='"+exp,true);

xhr.onprogress = function() {
      //
}

xhr.onload = function() {
    console.log("Processed..."+xhr.readystate);
    console.log(this.responseText);
}

xhr.send();
}

Я не знаю, что здесь не так.

Answer 1

Несколько проблем:

1. Параметры должны быть разделены &, а не ?.
2. Параметры URL не должны заключаться в кавычки.
3. Параметры должны быть закодированы с использованием encodeURIComponent().
4. Вам необходимо получить значения входа внутри функции sendPost();Ваш код устанавливает переменные при первой загрузке страницы, а не при отправке пользователем.
5. Если кнопка является кнопкой отправки, вам нужно вызвать e.preventDefault(), чтобы переопределить отправку по умолчанию.

Использование GET для запросов, которые вносят изменения на сервере, обычно не рекомендуется, POST обычно следует использовать для этих типов запросов.Браузеры кэшируют GET запросов, поэтому, если вам действительно нужно это сделать, вы должны добавить параметр cache-buster (дополнительный, неиспользуемый параметр, содержащий случайную строку или метку времени, которая меняется каждый раз, просто чтобы предотвратить совпадение URL с кэшированнымURL).

document.getElementById('allsubmit').addEventListener('click', sendPost);

function sendPost(e) {
  e.preventDefault();
  var com = encodeURIComponent(document.getElementById('inputcompany').value);
  var cat = encodeURIComponent(document.getElementById('selectCategory').value);
  var subcat = encodeURIComponent(document.getElementById('selectsubCategory').value);
  var descrip = encodeURIComponent(document.getElementById('textdescription').value);
  var exp = encodeURIComponent(document.getElementById('datepicker').value);

  var xhr = new XMLHttpRequest();
  xhr.open('GET', "addingthevacancy.php?company=" + com + "&category='" + cat + "&subcategory=" + subcat + "&description=" + descrip + "&expdate=" + exp, true);

  xhr.onprogress = function() {
    //
  }

  xhr.onload = function() {
    console.log("Processed..." + xhr.readystate);
    console.log(this.responseText);
  }

  xhr.send();
}