将jQuery .ajax与dataType:json转换为纯JavaScript

时间:2015-03-24 18:42:04

标签: javascript jquery ajax json

我可以使用jQuery进行快速绘图/原型设计,但我不能在生产服务器上实现它。

我需要帮助才能获得以下简单的javascript版本。在普通的javascript版本中, submit.php 没有收到json数据。

原始jQuery:

  $.ajax({
      type: "POST",
      url: "submit.php",
      data: json,
      dataType: "json",
      success: function(json){
        alert('success');
      }
  });

普通javascript:

  var xmlhttp;

  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  }
  else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.open("POST","submit.php",true);
  xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
  xmlhttp.send(json);
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {                 
      alert('success');
    }
  }

1 个答案:

答案 0 :(得分:0)

我找到了答案!!希望其他人觉得它很有用。

jQuery添加默认标题(http://api.jquery.com/jquery.ajax/):

Content-Type: 'application/x-www-form-urlencoded; charset=UTF-8'
X-Requested-With: XMLHttpRequest

jQuery转换数据(http://api.jquery.com/jquery.ajax/):

"It is converted to a query string, if not already a string."

然后jQuery将请求作为常规POST查询字符串发送。

我在这里找到了普通JavaScript中从json转换为POST查询字符串所需的代码片段:https://github.com/oyvindkinsey/easyXDM/issues/199

以下是更新后的纯JavaScript代码:

var xmlhttp;

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("POST","submit.php",true);
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    alert('success');
  }
}

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var pairs = [];
for (var key in json) {
  pairs.push(encodeURIComponent(key) + "=" + encodeURIComponent(json[key]));
}

var data = pairs.join("&");

xmlhttp.send(data);