send json form data to server

Question

I am trying to take data from a form and send it to remote server :

The code is:

<html>

    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>

    <body>

<h2>Create Sensor</h2>

<form id="form">
<form enctype='application/json'>
  <input name='version' value='1.0.1'>
  <input name='sensors[0][sensor]' value=''>
  <input name='sensors[0][output][0][name]' value=''>
  <input name='sensors[0][output][0][type]' value=''>
  <br>
            <input id="input" type="submit" name="submit" value="Create Sensor" />
</form>
        <script>
            $.ajaxSetup({
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });

            $(document).ready(function() {
                $('#input').click(function() {
                    var send = $("#form");
                    $.ajax({
                        url: "http://posttestserver.com/post.php",

                        type: "POST",
                        data: send,
                        success: function (sreg, status, jqXHR) {
                        alert(JSON.stringify(sreg));
                            },

                            error: function (jqXHR, status) {
                                alert(JSON.stringify(jqXHR));
                            }
                    });
                    return false;
                });
            });
        </script>
    </body>

</html>

But the JSON is not properly formed as I am returning by alert. Can anyone please help me out? I am not good at coding just trying to learn

This is the expected JSON:

{
    "version": "1.0.1",
    "sensors": [
        {
            "sensor": "",
            "output": [
                {
                    "name": "",
                     "type": ""
                }
            ]
        }
    ]
}

Another query is : is there any online platform through which I can get expected JSON by inputing JSON form like this? Please help me out

First off, Serialize the form data . i.e `var send = $("#form").serialize();` — karthikr, Aug 12 '14 at 12:42
Can you show the actual JSON so we can compare it to your expected result? — Daniel W., Aug 12 '14 at 12:42
If you want JSON, use `var send = $("#form").serializeArray();` ... — Inspector Squirrel, Aug 12 '14 at 12:44
jQuery has nothing built in that will take a form and arrange it in that data structure. You'll need to do that yourself and then pass it through `JSON.stringify()`. — Quentin, Aug 12 '14 at 12:45
{"0":{"0":{},"1":{},"2":{},"3":{},"4":{"jQuery111107334243203710751":1}},"length":1,"context":{"location":{}},"selector":"#form"} this is what I am getting adding alert after var send = $("#form") alert(JSON.stringify(send)); after posting this is the response: {"readyState":0,"responseText":"","status":0,"statusText":"error"} — ninja.stop, Aug 12 '14 at 12:47

score 0 · Answer 1 · answered Aug 12 '14 at 12:45

0

Your script at: post.php should work with form data and return a JSON Object.

To send array data to your script you should use.

var send = $("#form").serializeArray();

You can easy check if your JSON is valid here:

http://jsoneditoronline.com/

answered Aug 12 '14 at 12:45

derdida

14,784
16
90
139

Why should it work with "array data" (I assume you mean `application/x-www-form-urlencoded` encoded data by that)? Plenty of web services expect JSON as the input. – Quentin Aug 12 '14 at 12:46
i would write it easier so that the thread starter would understand how to work with the data in his post.php. – derdida Aug 12 '14 at 12:47
Why does this have -1. It's an answer, the user has to serialize the form before submitting it. that way he gets JSON (he also mentioned serializeArray which infact returns JSON) – posixpascal Aug 12 '14 at 12:49
1

@praszyk — The question is asking how to take the data in the form and produce a particular JSON structure out of this. This "answer" is telling the OP not to do that but instead rewrite the backend script (we don't know if they can or what other clients are already using it) and send the data in a completely different format. It doesn't answer the question. Recommendations to consider a completely different approach belong in comments or as addendums to answers, they aren't answers in their own right. – Quentin Aug 12 '14 at 12:52
I am getting this reply: "[{\"name\":\"version\",\"value\":\"1.0.1\"},{\"name\":\"sensors[0][sensor]\",\"value\":\"asdasd\"},{\"name\":\"sensors[0][output][0][name]\",\"value\":\"awdawd\"},{\"name\":\"sensors[0][output][0][type]\",\"value\":\"asdasd\"}]" I need the mentioned json – ninja.stop Aug 12 '14 at 12:54
So your post.php works at the moment only with specific JSON data? If your backend only works with this JSON String you need to prepare it before sending. Maybe you find this useful: http://stackoverflow.com/questions/3277655/how-to-convert-jquery-serialize-data-to-json-object – derdida Aug 12 '14 at 12:57
@derdida The problem is how can I know that what I am forming will look like this? I am not seeing just end result. Is there any way to see how it will look like my expected json by editing and executing? If yes, let me know, it will help me :) – ninja.stop Aug 12 '14 at 13:01

send json form data to server

1 Answers1