javascript - Jquery AJAX 替换为 Vanilla js 难度

Question

首先我想描述一下问题所在。

这是我的 Jquery 代码，它很好。

 $.ajax({ url: 'ajaxHandler.php',
     data: {'list' : 'list'},
     type: 'post',
     dataType:'json',
     success: function(output) {
                  alert(output);
              },
      error: function(request, status, error){
        alert("Error: Could not delete");
      }
  });

但问题是我只是想在 vanilla js 中创建相同的内容。

var request = new XMLHttpRequest();
    request.open("POST", url, true);
    //Send the proper header information along with the request
    request.setRequestHeader("Content-type", 'application/json; charset=UTF-8');
    request.onreadystatechange = function() {

      if (request.readyState == 4 && request.status == 200) {
          alert(request.responseText);
      };
    }
    var dataParam = {
        'list': 'list'
    };

    var $json = JSON.stringify(dataParam);
    request.send($json);

谁能告诉我我的错误在哪里。

    <?php
    require_once 'tasksController.php';
    $dataFunction =  (string)($_POST['list']);
    echo $dataFunction;

    ?>

这是我的警报:注意: undefined index :C:\xampp........\ajaxHandler.php 中第 3 行的列表

Answer 1

问题是 jQuery 不是发送 JSON，而是将对象作为 www-urlencoded 数据发送，并期望得到 JSON 返回。

var request = new XMLHttpRequest();
var data    = new FormData();

data.append('list','list');

request.onreadystatechange = function() {
  if (request.readyState === 4 && request.status === 200) {
    var result = JSON.parse(request.responseText);
    console.log(result);
  }
}

request.open("POST", 'ajaxHandler.php', true);
request.send(data);