Question

我使用JQuery示例发送表单数据并接收JSON数据。现在我想在普通/香草Javascript中做同样的事情。以下是我的JQuery代码示例：

$('.frmSubmitData').on('submit', function(e){
    e.preventDefault();
    var formData = $('#myForm').serialize();
    console.log(formData);

    $.ajax({
        type: 'POST',
        encoding:"UTF-8",
        url: 'Components/myTest.cfc?method=testForm',
        data: formData,
        dataType: 'json'
    }).done(function(obj){
        if(obj.STATUS === 200){
            console.log(obj.FORMDATA);
        }else{
            alert('Error');
        }
    }).fail(function(jqXHR, textStatus, errorThrown){
        alert("Error: "+errorThrown);
    });
});

到目前为止，这是我在普通JS中所拥有的：

function sendForm(){
   var formData = new FormData(document.getElementById('myForm')),
       xhr = new XMLHttpRequest();

    xhr.open('POST', 'Components/myTest.cfc?method=testForm');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        }else if (xhr.status !== 200) {
            alert('Request failed.  Returned status of ' + xhr.status);
        }
    };
    xhr.send(formData); 
}

我认为处理JSON数据响应的方式有问题。如果有人可以帮我解决问题，请告诉我。谢谢。

Answer 1

最理想的是，对于Firefox / Chrome / IE和旧版IE支持，请先确定请求类型：

function ajaxReq() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Browser does not support XMLHTTP.");
        return false;
    }
}

然后，发送请求：

var xmlhttp = ajaxReq();
var url = "http://random.url.com";
var params = "your post body parameters";
xmlhttp.open("POST", url, true); // set true for async, false for sync request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(params); // or null, if no parameters are passed

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       try {
           var obj = JSON.parse(xmlhttp.responseText);

           // do your work here

       } catch (error) {
           throw Error;
       }
    }
}

如何在Vanilla JS中发送AJAX post请求并接收JSON数据？

1 个答案: