How to catch JSON object on server side and respond back (in javascript)

Question

I tried to build an application using Javascript, HTML, CSS, AJAX, JSON in which client fill a form and send to server , and after that server respond to client.

For this problem, I have done these steps,

Firstly I build a HTML page having form.

Then, I send the information to javascript by using onClick event handler.

Then, I build a JSON object that have form information.

and the code for that is,

HTML CODE :-

<div id="stylized" class="myform">
            <form name = "user_form" action = "operation.js" method = "post">
                <h1>Sign-up form</h1>
                <p>This is the basic look of my form without table</p>

                <label>Name
                <span class="small">Add your name</span>
                </label>
                <input type="text" name="name" id = "name_data"  /><br>
                <p id = "name_update"></p><br>

                <label>Email
                <span class="small">Add a valid address</span>
                </label>
                <input type="text" name="email"  /><br>
                <p id = "email_update"></p><br>

                <label>Url
                <span class="small">Complete URL</span>
                </label>
                <input type="text" name="url"  />

                <label>Comment
                <span class="small">That you want to say</span>
                </label>
                <textarea type="text" name="comment"  ></textarea>

                <button type="button" name = "button"  onClick="operatn(this.form)">Submit</button>
                <div class="spacer"></div>
                <h4 align = "center" id = "submit_update"></h4>
                <div class="spacer"></div>
            </form>
        </div>

JAVASCRIPT CODE :-

function operatn(x) {
    var name1 = x.name.value;
    var email1 = x.email.value;
    var url1 = x.url.value;
    var comment1 = x.comment.value;
    //alert(comment);

    var txt = '{ "details" : [ ' +
                        ' { "name_key" : "name", "name_value" : "' + name1 + '" }, ' + 
                        ' { "email_key": "email" , "email_value" : "' + email1 + '" }, ' +
                        ' { "url_key" : "url" , "url_value" : "' + url1 + '"  }, ' +
                        ' { "comment_key" : "comment" , "comment_value" : "' + comment1 + '" } ] }';

    var obj = eval( "(" + txt + ")" );
    //alert(obj.details[3].comment_value);

}

But I confused in, How to send this object to server? (tell me the code for that or any good link) and,

How client establish an connection with server that have IP address and Port number information of server.

Help me . Thanks in advance.

What you're missing is the 'AJAX' part, google an ajax tutorial. Also, JSON _is_ Javascript Object Notation, there is no point in building a json string, just use a javascript object and call JSON.stringify on it — Benjamin Gruenbaum, Jan 20 '13 at 19:17
Can you tell me the flow chart for this. Take input from HTML --> Build JSON object in js --> **what to do next??** >confused here. — devsda, Jan 20 '13 at 19:20
Ok one minute, I'm using an external library called jQuery for it since it makes the syntax for writing ajax a lot simpler — Benjamin Gruenbaum, Jan 20 '13 at 19:20
You first create a JSON string manually and then `eval` it to convert it into an object? Just create an object from the beginning. If you want to learn about Ajax, read https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started. — Felix Kling, Jan 20 '13 at 19:29
You'll need some code on the server side to receive the request. Does that code exist already, or are you writing that as well (for example, in PHP)? — Hew Wolff, Jan 20 '13 at 19:36
I have to write that as well. (Since I am a student, I have to do all these task in my college) — devsda, Jan 20 '13 at 19:38
Please tell us more! What tools are available to you for building the server-side portion? What tutorials have you looked at? — Hew Wolff, Jan 20 '13 at 19:43

Benjamin Gruenbaum · Accepted Answer · 2013-01-20T19:39:10.267

1

What you are missing is the 'ajax' part of your code, your code needs to make a request to the server. This is done using an XMLHttpRequest.

Using jQuery which abstracts XMLHttmlRequest,

function operatn(x) {
    $.ajax({
       url:"http://yoursiteurl.com",
       data:{
           comment:x.comment.value,
           email: x.email.value,
           url:x.url.value,
           name:x.name,value,
       }
    }).done(function(serverResponse){
         //here you can handle server response
    }).fail(function(err){
         //here you can handle errors
    });

    //alert(obj.details[3].comment_value);

}

Just don't forget it is asynchronous.

Edit: I changed the key value pairs a bit since JSON objects are key value pairs.

edited Jan 20 '13 at 19:39

answered Jan 20 '13 at 19:25

Benjamin Gruenbaum

270,886
87
504
504

Since I am very new in web technology. I have some doubts. 1. I am college student, I have to do this project in my lab, can I give server adress as IP and port of server instead of `http://yoursiteurl.com` as `http://IP:PORT` 2. My teacher asks me to do this task using above given language mentioned in question , can you help me in that sense. Thanks in advance. – devsda Jan 20 '13 at 19:29
Then switch "http://yoursiteurl.com" with your server for example "http://www.google.com:8080" sends the request to google over port 8080. This solution is in javascript. It uses the external library jQuery which is fairly standard (a lot of projects use it). Just to lift any doubt the code about is javascript. – Benjamin Gruenbaum Jan 20 '13 at 19:31
The code above is in javascript. If it contains syntax you do not understand let me know. – Benjamin Gruenbaum Jan 20 '13 at 19:35
Since server is not made , I have to make that server too on any computer. Then what this URL contains ?? – devsda Jan 20 '13 at 19:41
This is a URL, it is where javascript sends the HTTP requests to. For example you can send to /operation.php or something similar that changes state on the server. Just remember that if you're adding information to the server you need to make it a POST request (read the jQuery api) – Benjamin Gruenbaum Jan 20 '13 at 19:44
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23060/discussion-between-jhamb-and-benjamin-gruenbaum) – devsda Jan 20 '13 at 19:48
As you said to learn `node.js`. I am doing the same. In the meanwhile it gives me an error. the link of that is http://stackoverflow.com/questions/14433499/python-is-not-recognized-as-an-internal-or-external-command Please answer, that also – devsda Jan 21 '13 at 06:39

How to catch JSON object on server side and respond back (in javascript)

1 Answers1