Cómo enviar un objeto JSON utilizando datos de formulario html

Question

Mar 05, 2014, 11:29 AM

Cómo enviar un objeto JSON utilizando datos de formulario html

Entonces tengo este formulario 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>

¿Cuál sería la forma más fácil de enviar los datos de este formulario como un objeto JSON a mi servidor cuando un usuario hace clic en enviar?

ACTUALIZACIÓN: He ido tan lejos como esto, pero no parece funcionar:

<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));

¿Qué estoy haciendo mal?