send a JSON per post with JavaScript

Question

send a JSON per post with JavaScript

See...according to the comments I would have to edit the thread, but as much as I do nothing...

I have to send a json per post, and when sending it I would have to receive one in which it would tell me if the login is correct or incorrect.

Here the login Form:

<form name="login" action="">
    <input type="text" id="email" placeholder="User">
    <input type="password" id="pass" placeholder="Password">
    <button type="submit" id="send" onclick="sendForm()">Enter</button>
    <div class="moreoptions">
        <div class="ico">
            <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
            <a href="#">I forgot my password</a>
        </div>
        <div class="ico">
            <span class="glyphicon glyphicon-save" aria-hidden="true"></span>
            <a href="#">Register</a>
        </div>
    </div>
</form>

And this is the javascript function you call by hitting the button # send

function sendForm(){
    var fpU = ROT47(document.forms[0].elements[0].value);
    var fpP = ROT47(document.forms[0].elements[1].value);


var objJSON = {
    pfd: "login",
    fpU: fpU,
    fpP: fpP,
    browserInfo: {
        appCodeName: navigator.appCodeName,
        appName: navigator.appName,
        appVersion: navigator.appVersion,
        cookieEnabled: navigator.cookieEnabled,
        language: navigator.language,
        platform: navigator.platform,
        userAgent: navigator.userAgent
    },
    datasite: {
            "@accountID": "2",
            "@siteID": "3"
    }
};

$('#send').click(function(){
    var data = objJSON;
    $.ajax({
        url : 'https://www.evstest.com/G3v1LastVersion/portal/portal_action.php',
        data : data,
        method : 'post', //en este caso
        dataType : 'json',
        success : function(response){
            alert("funciona bien");
        },
        error: function(error){
            alert("No funciona");
        }
    });
});
}

I have tried to do an alert to see the JSON if it is well built and if. then the code that supposedly it sends it, it seems to do nothing, because the lines of code of the alerts are not executed, where if it says that it has been sent or not.

I hope this will help you try to help me. Greetings and thanks again

1

Author: Rodrypaladin, 2016-11-04

Source

2 answers

score 3 · Answer 1

You owe all your html elements a id

<input type="email" id="email" name="user" placeholder="E-mail">
    <input type="password" name="pass" id="pass" placeholder="Password">

To the button of your form also give a id

 <div class="ico" id="registrar"
            <span class="glyphicon glyphicon-save" aria-hidden="true"></span>
            <a href="#">Register</a>
        </div>

In your JS code you must capture the click event of your

JQuery

$('#registrar').click(function(){
        var data = { email : $('#email').val(), password : $('#pass').val() };
        $.ajax({
                url : 'tu_url'
                data : data, 
                method : 'post', //en este caso
                dataType : 'json',
                success : function(response){
                       //codigo de exito
                },
                error: function(error){
                       //codigo error
                }
        });
});

Javascript

var http = new XMLHttpRequest();
var url = "tu_url";
var email = document.getElementById('email');
var password = document.getElementById('pass');
http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
http.open("POST", url, true);

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) { 
       //aqui obtienes la respuesta de tu peticion
       alert(http.responseText);
    }
}
http.send(JSON.stringify({email:email, password: password}));

score 0 · Answer 2

If you want to send it naturally you could do this:

Add a hidden field before the submit button: <input type="hidden" name="json">
Modify your send function a bit:

function sendForm(e) {
    e.preventDefault();
    var sendJSON = "{...
    sendJSON = JSON.stringify(sendJSON);

    document.getElementsByTagName('json').value = sendJSON;
    document.form[0].submit();
}

Make sure to pass the JSON to string beforehand and that it is well formed so that no error arises.