javascript - 使用 jquery ajax 与 native xhr

Question

我不太熟悉 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);  
    }
  });
}
}

Answer 1

太复杂了。使用 JQuery AJAX 很 slim 。在这里，我将所有 data.append() 替换为一个内联对象。我还删除了查询字符串，因为它与数据 block 中的信息相同。我还修复了 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);  
    }
  });
});