我将如何在香草JS中执行此Ajax jQuery？

debugcn 发表于 Dev

阿维格

我试图用Vanilla JS编写这个jQuery ajax POST请求；最初是：

$.ajax({
      method: 'POST',
      url: window.location.href + 'email',
      data: {
        toEmail: to, //var set elsewhere
        fromName: from, //var set elsewhere
        message: message, //var set elsewhere
        recaptcha: recaptcha //var set elsewhere
      }
    })
    .done(function (data) {
      handleResponse(data, form)
    })
    .fail(function (error) {
      console.error(error)
      alert('Couldn't send your email. Try again later.')
    })

handleResponse为

  function handleResponse (data, form) {
    if (!data.message) return

    if (!form) return

    const responseMessage = form.querySelector('[email-response]')
    const formData = form.querySelector('[email-data]')

    if ('success' === data.message) {
      responseMessage.classList.remove('error')
      responseMessage.classList.add('success')
      responseMessage.innerText = 'Success! Email has been sent.'
      formData.classList.add('hidden')
      return
    }

    return handleError(responseMessage, data)
  }

但是，我尝试将Ajax部分转换为：

var req = new XMLHttpRequest();
    req.onLoad = function(e){
      resolve(req.response);
    }
    req.onerror = function(e){
      console.log(e);
      alert('Couldn't send your email. Try again later.')
    };
    var data = {
        toEmail: to, //var set elsewhere
        fromName: from, //var set elsewhere
        message: message, //var set elsewhere
        recaptcha: recaptcha //var set elsewhere
      }
    }
    var url = window.location.href + 'email';
    req.open("POST",url,true);
    req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    req.send(data);

我收到控制台错误，提示req is not defined我做错了什么？如何在Vanilla JS中正确执行jQuery ajax请求？

萨卡

在Vanilla js中，您可以使用XHRHttpRequest

var http = new XMLHttpRequest();
var url = 'your url';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);

//Send the proper header information along with the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {

        // http.responseText will be anything that the server return
        alert(http.responseText);
    }
}
http.send(params);

或者，如果您传递了一个对象，则可以使用FormData

var http = new XMLHttpRequest();
var url = 'your urk';
var myForm = new FormData()

myForm.append('foo', 'bar')

http.open('POST', url, true);

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {

        // http.responseText will be anything that the server return
        alert(http.responseText);
    }
}
http.send(myForm);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。