Geek Answers Handbook

Using jquery ajax vs native xhr

I am not too familiar with jQuery and I am trying to make a mail request using jquery ajax. I used to use xhr, and I'm not quite sure if I recycled it correctly. If someone could give me some feedback, that would be very 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);  
    }
  });
}
}
+4
source share
2 answers

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

script:

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

+1

More articles:


All Articles