How to POST data using javascript

Question

This my JS code:

$.when(d1, d2).done(function(v1, v2) {
    var url = v1;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            console.log(url);
        }
    };
    xhr.send("deployment_preference_set_fleet_health_attributes_concurrent_hosts_percentage=31");
});

After certain processing I will get a URL which will be passed to v1.

HTML Content of the corresponding URL

<input id="deployment_preference_set_fleet_health_attributes_concurrent_hosts_percentage" max="100" min="0" name="deployment_preference_set[fleet_health_attributes][concurrent_hosts_percentage]" size="3" step="any" type="number" value="30.0" />
% or less of the hosts in the fleet can be deployed to at a time.

What I want is to update the field deployment_preference_set_fleet_health_attributes_concurrent_hosts_percentage with a particular value.

I have tried using xmlhttprequest but its not working.

Its working upto console.log(v1), but I think xhr.send () is not working since the page I am trying to update is not getting updated

Any suggestion of how update the data on that particular field.

score 0 · Answer 1 · answered Feb 24 '18 at 14:38

Problem

Your syntax is off. I don't see you assigning the result of your ajax request into the DOM input object that you are aiming at.

Recommendation

Use Jquery for your AJAX calls. If you use xhr you will need to handle different formats across different browsers and that might be part of your issue.

Format

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Example

$.post( "ajax/test.html", function( responseData ) {
  $( "#deployment_preference_set_fleet_health_attributes_concurrent_hosts_percentage" ).val( responseData );
});

Reference -> https://api.jquery.com/jquery.post/

score 0 · Answer 2 · answered Feb 24 '18 at 15:41

You did not set the Content-Type header. When using the POST method, you need to set the Content-Type header (via the setRequestHeader method of the XMLHttpRequest object) or the data cannot be retrieved from the request body on the other end.

var xhr = new XMLHttpRequest(); //make xhr
xhr.open('POST', url, true);

xhr.setRequestHeader('Content-Type', 'x-www-form-urlencoded');// <-- do this!

xhr.send('my_data=hi&your_data=no');

In your case, all you need to do is define the Content-Type header at some point before doing xhr.send().

How to POST data using javascript

2 Answers2