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

You should remove the query string in favor of the post data. The data can be set in a much more compact form without using append. — pid
– pid, Commented Jul 22, 2014 at 21:47

pid · Accepted Answer · 2014-07-22 21:57:07Z

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

Clayton Gulick · Accepted Answer · 2014-07-22 21:57:48Z

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.

Collectives™ on Stack Overflow

Using jquery ajax vs native xhr

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related