Send a string name via post using javascript

Question

Send a string name via post using javascript

Asked 5 years, 10 months ago

Viewed 713 times

1

Good evening, I’m only trying to send name to the server, but every time I pass the string to the server as "name:", here’s the way I’m trying:

    <!DOCTYPE html>
<html>
<head>
<script>
            var btn = document.getElementById("btn");
            btn.addEventListener("click", function(){

                var req = new XMLHttpRequest();
                var jsObj = {nome: "Test"};
                var sendData = JSON.stringfy(jsObj);

                req.open('POST', 'https://url.com');
                req.Send(sendData);

            });
</script>
</head>
<body>

<button id="btn">Send an HTTP POST request to a page and get the result back</button>

</body>
</html>

3 answers

1

The correct way to write the json data in your case would be

var jsObj = {"nome": "Test"};

See which unquoted name would be a variable, but in your case is the name of the field that will receive the content "Test".

Browser other questions tagged javascript json xml post xmlhttprequest

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2018-08-14T20:40:26+00:00

There are many mistakes, even w3schools which is a source that I never recommend has examples ready for you to know how to do that would already give a good idea, I sincerely hope you do not understand as a criticism, but as tips, your script is very wrong

First that XMLHttpRequest synchronously is a bad way to use, one because it freezes the browser depending on the response time and another that is something that probably soon will not work in the main process, only with Web Worker (no due date, but possible), the idea is to use callbacks, Adobe javascript lives on callbacks, there is no harm in learning what is almost a mandatory requirement for this language, even more in front-end (yes there is Javascript for back-end, but that’s another story and I don’t want to run away from the main topic)

To summarize this is synchronous, do not use:

req.open('POST', 'https://url.com');

This is asynchronous (it is preferred):

req.open('POST', 'https://url.com', true);

Second problem, Javascript is case-sensitive, so this is wrong:

req.Send(sendData);

Should be:

req.send(sendData);

Now on how to get JSON on the server side, I think you use PHP (from what I saw in your other questions) so use php://input for this, example:

<?php
$dados = file_get_contents('php://input');

if ($dados) {
    $json = json_decode($dados, true);

    if ($json) {
       $nome = $json['nome'];
       echo 'nome:', $nome;
    }
}

It is also necessary to either put the script at the bottom of the page or use:

document.addEventListener("DOMContentLoaded", function () {});

Do so:

<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function () {

    var btn = document.getElementById("btn");
    btn.addEventListener("click", function(){

        var req = new XMLHttpRequest();
        var jsObj = {nome: "Test"};
        var sendData = JSON.stringfy(jsObj);

        req.open('POST', 'https://url.com/pagina.php', true);

        req.onreadystatechange = function () {
            if (req.readyState != 4) return; //Ignora o resto enquanto readyState é diferente de 4 (4 = completo)

            if (req.status == 200) { //Resposta http padrão do PHP, afirma que esta tudo ok
                alert(req.responseText);//Exibe a resposta HTTP
            } else {
                alert("Erro HTTP ou conexão: " + req.status);//Exibe o código de erro HTTP ou um código de erro como "0" ou um outro numer (geralmente em IE) sobre problemas de conexão
            }
        };

        req.send(sendData);
    });
});
</script>
</head>
<body>

<button id="btn">Send an HTTP POST request to a page and get the result back</button>

</body>
</html>

by DayvisonFavacho • 26 points · Answer 2 · 2018-09-03T14:41:47+00:00

Hello, I think you could use Jquery and do as follows:

$('#btn').click(function(){
    var nome= $("#nome").val();

    $.post("caminho_da_serve", "&variavel=" + nome , function(result) {

    });
});