Как правильно отправить ajax запрос?

Question

[ZaurK]

Здравствуйте! Пытаюсь отправить ajax-запрос из вьюшки, но получаю ошибку POST localhost:8080/account/interface 400 (Bad Request)
Функция request вызывается при нажатии на кнопку, но вот с url какая-то беда. Запрос написан НЕ на jQuery, потому что там код уже на js есть, и решил на нем же отправить запрос. Обработчиком является экшен interface в контроллере accauntController. Вот часть кода во вьюшке:

var ajax = new XMLHttpRequest();

function request(){
url = 'interface'
ajax.onreadystatechange = response
ajax.open('POST', url, true)
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
ajax.send('name=me&msg=mymsg&time=2019')

}

Мне посоветовали передавать в запросе $csrfToken, но что-то не пошло у меня это, не силен в js. Подскажите, плз, как правильно это реализовать?

Comments

[Сослан Хлоев]

Кажется некритично отсутствие ; в коцах строк, но советуют их все таки ставить.

ajax.onreadystatechange = response

response функция?
Попробуйте url = 'interface/';

[ZaurK]

Сослан Хлоев, Да, response это функция, я по одному уроку смотрел, там этот код работает, но вот к yii2 применить не могу пока что. url = 'interface/' - тоже не прошел

[Сослан Хлоев]

ZaurK, а код обработчика будет?

[ZaurK]

Сослан Хлоев, Сослан, обработчик там на данный момент просто actionInterface в контроллере accountController, до него даже не доходит дело, поэтому не реализовал его. По идее в нем данные должны будут в базу заноситься, но мне бы сначала просто их передать. Сам этот акшн конечно уже есть в контроллере.

Answer 1

[Doston]

<div id="names"></div>
<!-- AJAX: Asynchronious Javascript And XML -->
<form action="test.php" method="post">
  <input type="text" name="firstname" id="firstname"><br>
  <input type="text" name="lastname" id="lastname"><br>
  <button type="button" name="myBtn" onclick="ajax_post();">Отправить</button>
</form>
<script type="text/javascript">
  function ajax_post(){
    var hr = new XMLHttpRequest();
    var url = "test.php";
    var fn = document.getElementById('firstname').value;
    var ln = document.getElementById('lastname').value;
    var vars = "firstname="+fn+"&lastname="+ln;
    hr.open("POST",url,true);
    hr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    hr.onreadystatechange = function(){
      if(hr.readyState == 4 && hr.status == 200){
        var return_data = hr.responseText;
        document.getElementById('names').innerHTML = return_data;
      }
    }
    hr.send(vars);
    document.getElementById('names').innerHTML = 'Данные отправляются, пожалуйста, подождите...';
  }
</script>