javascript - 通过表单发布 Json 使用 jQuery 提交

Question

HTML

<form id="join">
<div class="content">
    <h2>Join the Dodilio Exchange</h2>
    <ul>
        <li><input id="firstname" type="text" placeholder="Fast Name" name="firstname" required></li>
    </ul>
 </div>
 </form>

JS

    var register = function (firstname) {

        var obj = {
            "firstname": firstname
        }

        $.ajax({
            type: "POST",
            dataType: 'json',
            data: obj,
            url: "/rest/register/?format=json",
            success: function (data) {
                console.log('success')
                //window.location.href = '/ideas'
            }
        });
    }


    var joinForm = $('#join');
    var firstname = $('#firstname').val()

    joinForm.submit(function(e){
        console.log('submit')
        e.preventDefault();

        register(firstname)


        return false;
    })

但它是发布传统形式:

POST http://127.0.0.1:8000/rest/register/?format=json HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Content-Length: 233
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://127.0.0.1:8000
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://127.0.0.1:8000/jointheexchange.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

firstname=&lastname=&

我对 jQuery 不是很擅长，我在网络和堆栈上看过一些这样的例子，老实说，我看不出我哪里错了/不同。请帮忙 - 谢谢。

Answer 1

在我看来，var firstname = $('#firstname').val() 在页面加载时设置。您希望将其移至提交处理程序内，以便在提交表单时分配其值:

var joinForm = $('#join');

joinForm.submit(function(e) {
    console.log('submit');
    e.preventDefault();

    var firstname = $('#firstname').val();

    register(firstname);

    return false;
})

此外，您在上面的代码中缺少一些分号，因此我会仔细检查其余代码是否存在语法错误。