How do I send a post request to a servlet via javascript?

I am writing a web service interested in the following scenario.

  1. There is an html file with a table and a button.
  2. When you select a field in the table, the field is assigned a new class "active"
  3. I press the button
  4. I want to get the data in the servlet that is in the first column of the selected field.

Question: how to organize a post request to a servlet via js and send the data?

If we take the data from the form, then everything turns out correct.

And I would like not to resort to using the form, but to run the script through the entire Html file, find the necessary data and send it.

Script file:

function getXmlHttp() {
    var xmlHttp = null;
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlHttp;
}

function httpReq(URL, method, data, success, error) {
    var request = getXmlHttp();
    request.open(method, URL, true);
    request.setRequestHeader("Content-type", "multipart/form-data");
    request.send(data);
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            if (request.status == 200) {
                success(request.responseText);
            }
            else {
                if (error) error(request.status);
            }
        }
    }
}


var table = document.querySelector("#selectTable")
var field = table.querySelector(".active");
var item = field.children[0];  // первый дочерний

var form = new FormData();
form.append("some_key",
        item.innerHTML);  // ну или что там нужно вытащить
httpReq("/admin", "POST", form, function(res) {
    console.log("response:", res);
});
Author: Vorobey.A, 2016-06-14

1 answers

function getXmlHttp() {
    var xmlHttp = null;
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlHttp;
}

function httpReq(URL, method, data, success, error) {
    var request = getXmlHttp();
    request.open(method, URL, true);
    request.setRequestHeader("Content-type", "multipart/form-data");
    request.send(data);
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            if (request.status == 200) {
                success(request.responseText);
            }
            else {
                if (error) error(request.status);
            }
        }
    }
}


someBtn.onclick = function(e) {
    var table = document.querySelector("селектор таблицы")
    var field = table.querySelector(".active");
    var item = field.children[0];  // первый дочерний

    var form = new FormData();
    form.append("some_key",
            item.innerHTML);  // ну или что там нужно вытащить
    form.append("another_key", another_value);

    httpReq("url...", "POST", form, function(res) {
        console.log("response:", res);
    }, function(err) {
        console.error(err);
    })
};
 3
Author: Constantine, 2016-06-14 13:54:19