How to use jquery, json and ajax through html form?

Question

I need to send a json when a form is filled on html. I have the following html:

<head>
<title>Insert title here</title>
</head>
<body>
<form id="form">
    Nome: <input type="text" id="nome" /> 
    Idade: <input type="number" id="idade" /> 
    <input type="button" id="submit" value="submit"/>
</form>

and the following js:

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
var arr = {
    City : 'Moscow',
    Age : 25
};

$(document).ready(function() {
    //click on button submit
    $("#submit").on('click', function() {
        //send ajax
        $.ajax({
            url : 'http://localhost:8080/DBRest/rest/escreve',
            type : "POST", // type of action POST || GET
            dataType : 'json', // data type
            contentType : 'application/json; charset=utf-8',
            data : $("#form").serialize(), // post data || get data
            data : JSON.stringify(arr)
        })
    });

});

I have already looked for here, here and here.

I tried creating a arr variable to mock a filled form but didn't get anything either. I would like to know the difference between dataType and contentType. And about this specific line:

data : $("#form").serialize()

is this correct? There's a difference between simple and double quotes surrounding #form

Are you sure the issue isn't the form submission? Maybe try `$('#form').on('submit', function(e) { e.preventDefault(); //continue on with what you were doing });` instead of listening for a click on the submit button. — Gavin, Nov 23 '16 at 13:50

score 2 · Accepted Answer · answered Nov 23 '16 at 13:51

2

Firstly, you're setting the data property twice. Remove data: JSON.stringify(arr).

Secondly, if you send a serialized form it will be x-www-form-urlencoded, not JSON, so you should remove the contentType property as form encoded is the default.

Then your HTML input elements are missing the required name attribute which is needed for serialisation and retrieving the values on the server.

Nome: <input type="text" id="nome" name="nome" /> 
Idade: <input type="number" id="idade" name="idade" />

Lastly, you should hook your event handler to the submit event of the form element and call preventDefault() to stop the standard submission, like this:

$("#form").on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        url: 'http://localhost:8080/DBRest/rest/escreve',
        type: "POST",
        dataType: 'json',
        data: $("#form").serialize()
    })
});

Presumably you also want success and error handler functions (or done() and fail() methods) to handle the response you get back from the request.

answered Nov 23 '16 at 13:51

Rory McCrossan

331,213
40
305
339

Sorry but that didn't work. Chrome's F12 function didn't show any problem. What I kind of feedback can I show to you? Is there a better way to analyze and debug it? – rado Nov 23 '16 at 14:32
What do you mean by 'it didn't work'? What are you expecting to happen? Firstly check the request in the network tab of the console and make sure the response code is `200 OK`. Also, as I mentioned you're missing any callback handlers on your AJAX call so the UI won't be updated if that's what you're expecting – Rory McCrossan Nov 23 '16 at 15:49
I was getting 415 error and solved it by changing `dataType:'application/json'`. Besides that, didn't changed a bit. Thanks a lot – rado Nov 24 '16 at 11:19
1

Glad you solved it. Having to remove that line means that your URL isn't returning JSON - at least not valid JSON anyway – Rory McCrossan Nov 24 '16 at 11:20

score 2 · Answer 2 · answered Nov 23 '16 at 13:52

2

Problem here is, that the form is serialized using <input name= parameter. E.g.

<input type="text" id="nome" name="nome" />

answered Nov 23 '16 at 13:52

Zoka

2,312
4
23
33

How to use jquery, json and ajax through html form?

2 Answers2