使用jquery ajax vs native xhr

Question

I'm not too familiar with JQuery, and I'm trying to make a post request using jquery ajax. I was previously using xhr, and I'm not totally sure if I'm reworking it correctly. If someone could give me some feedback, that would be greatly appreciated!

Here is my original code with 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();
    }
});

Here is my adjusted code using 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

You have a mistake in your url param, try taking the single quotes out:

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

Also, a little bit of background on using HTTP requests.

In general there are two primary ways of passing data to the server. One method is via URL params, in this case it would be a GET request, and you pass the params on the query string (like you've done in your URL).

The other way is via POST. With the POST verb, you pass data in the body of the request in a delimited format. In this case, you would provide the ajax call with the data: param. Doing both is redundant.

Following best practices, you shouldn't use a GET request to modify data (except in some rare circumstances). If you're modifying data, you should use a POST, PUT, PATCH or other verb.

Answer 2

Way too complex. With JQuery AJAX is slim. Here I replace all data.append() with an inline object. I've also removed the query string because it's the same information as in the data block. I've also fixed the URL line, which has some misplaced quotes:

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

From here you can replace the date/ID/subject/blurb with your fetch methods. Example:

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);  
  }
});

The whole script is now:

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);  
    }
  });
});