使用 jquery ajax 与原生 xhr答案

【问题标题】：Using jquery ajax vs native xhr使用 jquery ajax 与原生 xhr
【发布时间】：2014-09-13 21:59:14
【问题描述】：

我对 JQuery 不太熟悉，我正在尝试使用 jquery ajax 进行发布请求。我以前使用过 xhr，但我不确定我是否正确地修改了它。如果有人可以给我一些反馈，那将不胜感激！

这是我使用 xhr 的原始代码：

j("#saveButton").click(function() {
    var ID = j(".selected-list")[0].getAttribute('id');
var subject = j('input').val();
    var blurb = j("#blurb_stream").val();
var date = j('datepicker').val();
if(blurb.length != '' && ID != undefined && subject.length != ''){
xhr.open("POST", envUrl + "streams/" + ID + "/touches?subject=" + subject + "&body=" + blurb + "&schedule_on=" + date, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            console.log('saved!');
            } else {
            alert('not working');
            }
    }
    xhr.send();
    }
});

这是我使用 ajax 调整后的代码：

j("#saveButton").click(function() {
    var ID = j(".selected-list")[0].getAttribute('id');
var subject = j('input').val();
    var blurb = j("#blurb_stream").val();
var date = j('datepicker').val();
var data = new FormData();
data.append("date", "date");
data.append("ID", "ID");
data.append("subject", "subject");
data.append("blurb", "blurb");    
// check this!
    if(blurb.length != '' && ID != undefined && subject.length != ''){
  j.ajax({
    url: 'envUrl + "streams/" + ID + "/touches?subject=" + subject + "&body=" + blurb + "&schedule_on=" + date',
    type: "POST",
    data: data,
    success: function(){
      alert(1);  
    }
  });
}
}

【问题讨论】：

您应该删除查询字符串以支持发布数据。无需使用append，数据可以以更紧凑的形式设置。

标签： javascript jquery ajax post

【解决方案1】：

您的 url 参数有误，请尝试去掉单引号：

j.ajax({
    url: envUrl + "streams/" + ID + "/touches?subject=" + subject + "&body=" + blurb + "&schedule_on=" + date,
    type: "POST",
    data: data,
    success: function(){
      alert(1);  
    }
  });

另外，还有一点关于使用 HTTP 请求的背景知识。

通常有两种主要的方式将数据传递到服务器。一种方法是通过 URL 参数，在这种情况下，它将是一个 GET 请求，然后您将参数传递给查询字符串（就像您在 URL 中所做的那样）。

另一种方式是通过 POST。使用 POST 动词，您可以在请求正文中以分隔格式传递数据。在这种情况下，您将向 ajax 调用提供数据：param。两者都做是多余的。

按照最佳做法，您不应使用 GET 请求来修改数据（极少数情况除外）。如果要修改数据，则应使用 POST、PUT、PATCH 或其他动词。

【讨论】：

【解决方案2】：

太复杂了。用 JQuery AJAX 是苗条的。在这里，我将所有 data.append() 替换为内联对象。我还删除了查询字符串，因为它与数据块中的信息相同。我还修复了 URL 行，其中有一些错位的引号：

j.ajax({
  url: envUrl + "streams/" + ID + "/touches",
  type: "POST",
  data: { "date": date, "ID": ID, "subject": subject, "blurb": blurb },
  success: function () {
    alert(1);  
  }
});

您可以在此处将date/ID/subject/blurb 替换为您的获取方法。示例：

j.ajax({
  url: envUrl + "streams/" + ID + "/touches",
  type: "POST",
  data: {
    "date":    j('datepicker').val(),
    "ID":      j(".selected-list")[0].getAttribute('id'),
    "subject": j('input').val(),
    "blurb":   j("#blurb_stream").val()
  },
  success: function () {
    alert(1);  
  }
});

整个脚本现在是：

j("#saveButton").click(function () {
  j.ajax({
    url: envUrl + "streams/" + ID + "/touches",
    type: "POST",
    data: {
      "date":    j('datepicker').val(),
      "ID":      j(".selected-list")[0].getAttribute('id'),
      "subject": j('input').val(),
      "blurb":   j("#blurb_stream").val()
    },
    success: function () {
      alert(1);  
    }
  });
});

【讨论】：