Como enviar um objeto JSON usando dados de formulário html

Question

Mar 05, 2014, 11:29 AM

Como enviar um objeto JSON usando dados de formulário html

Então, eu tenho esse formulário HTML:

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

Qual seria a maneira mais fácil de enviar os dados deste formulário como um objeto JSON para o meu servidor quando um usuário clica em enviar?

ATUALIZAÇÃO: Eu fui tão longe quanto isso, mas parece que não funciona:

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var j = {
            "first_name":"binchen",
            "last_name":"heris",
        };
        xhr.send(JSON.stringify(j));

O que estou fazendo errado?