How to post array / data structure via javascript?

Question

I'm using HTML & JavaScript at the client side, and NodeJs as the server side.

I have a form which contains several radio buttons. When the client click on submit button, I want to send (post) the results to the server.

<html>
<head>
<script type="text/javascript" >

var questionCounter = 0;
var questionId = 0;
var ans = [];

function check(id, result) {                                                                                                                        
   ans[id.substring(1)] = result;                                  
}

function printQueue(question) {     

    questionId++;
    questionCounter++;  
    var radioName="Q"+questionCounter;
    var id = "Q" + questionCounter;                 
    document.write("<p> <b> " + question + " </b> </p>");                                                                                                                       
    document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
                    " onclick=\"check(this.id, this.value)\" value=\"5\">Very Good<br>");
    document.write ("<input type=\"radio\" id=" + id + " name=" + radioName + 
                        " onclick=\"check(this.id, this.value)\" value=\"4\">Good<br>");
    document.write ("<input type=\"radio\" id=" + id + " name=" + radioName + 
                        " onclick=\"check(this.id, this.value)\" value=\"3\">OK<br>");
    document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
                        " onclick=\"check(this.id, this.value)\" value=\"2\">Bad<br>");
    document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
                        " onclick=\"check(this.id, this.value)\" value=\"1\">Vary Bad<br>");
}




function onSubmit() {

    // check we answered all the Questions
    for (var i = 1; i <= questionCounter; i++)
    {
        if (ans[i] == undefined)
        {
            window.alert("You forgot to answer Q:" + i);    
            return false;
        }
    }   

    return true;
}


</script>

</head>

<body>

<form action="http://127.0.0.1:8081/process_post" method="POST">                                        
<script type="text/javascript" >                
printQueue("1.  XXX ? ");
printQueue("2.  YYY  ? ");
printQueue("3.  ZZZ  ? ");
printQueue("4.  TTT  ? ");
</script>

<br>                                    
<input type="submit" value="Submit" onclick="return onSubmit()">
<br>                        
</form>

</body>
</html>

what is the right way to send (post) the results to the server:

a. send an array with the results (array of numbers)
b. send a structure or class with the result
c. any other way ?

How can I post the result to the server ? Now I'm getting [Object, Object] results at the server side:
```
app.post('/process_post', urlencodedParser, function (req, res) {
   console.log("Got request: (post-res) " + res);
})
```
So how can I post the client results to the server ?

Please provide solution in Javascript/Html without Jquery use.

Thanks

score 2 · Accepted Answer · edited May 23 '17 at 11:51

I generally use $.ajax for this purpose but since you have asked not to use jquery, so in that case you need to make XHR Request to the endpoint specified in you node application.

Client Side

var xmlhttp;

if (window.XMLHttpRequest) {

    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}

else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
       if(xmlhttp.status == 200){
           console.log('request successfull : ', xmlhttp.responseText);
       }
       else if(xmlhttp.status == 400) {
          alert('There was an error 400')
       }
       else {
           alert('something else other than 200 was returned')
       }
    }
}

xmlhttp.open("post", "~/process_post", true);
xmlhttp.send(JSON.stringify(..........)); //your custom data

Server Side Node

app.post('/process_post', urlencodedParser, function (req, res) { 
    console.log("Got request: " + res.body);
});

Just looking for some another question already asked on Stackoverflow, I find this useful for you.

i didn't get you... JSON.stringify() sends json data only... don't go by xhr's name... it support data formats apart from xml too like json, html or plain text... — Akshay Soam, Sep 02 '15 at 04:46

score 1 · Answer 2 · answered Sep 02 '15 at 04:01

1

Use $.ajax

Suppose if your using array called sample like in below

var sample=[1,2,3,4];

then your ajax call should be like this

$.ajax({
       url: "test.html",
       data: sample,
       }).done(function(result) {

         //do the stuffs with the result here
       });

This call will send the sample array to test.html (as per our example) Then the response will be stored in result variable

Let me know if it is helpful

answered Sep 02 '15 at 04:01

Rajesh kannan

624
3
16

I'm not familiar with ajax. But: why do we need to set the url value ? (the url is already defined at action tag in the
– Sep 02 '15 at 04:04
1

Url is your server address. It can be your webservice URL or a normal server side page. Ajax is the way of sending client side data to Server as you are expected – Rajesh kannan Sep 02 '15 at 04:11
1

Thanks, My q is: Do I need to add the url in ajax, because the url is already defined at:
?
– Sep 02 '15 at 04:12
1

Please don't answer a non-jquery question with jquery. It really doesn't help. – slebetman Sep 02 '15 at 04:17

How to post array / data structure via javascript?

2 Answers2