发布表单后从服务器获取 json 到 jQuery [重复]答案

【问题标题】：Get json from server into jQuery after posting a form [duplicate]发布表单后从服务器获取 json 到 jQuery [重复]
【发布时间】：2012-03-09 00:06:09
【问题描述】：

可能重复：
JQuery Ajax Return value

当我填写登录/注册表单时，服务器会将我发送到 Json 页面。我尝试将该 json 放入 js/jquery 文件中，而不重定向到该页面。

谁能告诉我如何获取 json 数据？

为了解释我的意思，我向您展示了一些代码 + html 页面。

HTML 格式：

<form id="registerForm" action="http://localhost:8081/rest/users/register" method="post" >
<table>
    <tr>
        <td>
            <label for="firstname" class="normalFont"><span rel="localize[register.firstname]">First name</span></label>
        </td>
        <td>
            <input id="firstname" name="firstname" type="text" class="required">
        </td>
        <td class="status">

        </td>
    </tr>

    ... (some other fields)

    <tr>
        <td>
            <input type="submit" value="Register">
        </td>
    </tr>
</table>

服务器：

@Override
@RequestMapping(value="/register", method = RequestMethod.POST)
public @ResponseBody Message register(String firstname, String lastname, String username, String password, String email, String address, String zip, String city, String country) {

    try
    {
        User user = new User();

        user.setFirstname(firstname);
        user.setLastname(lastname);
        user.setUsername(username);
        user.setPassword(password);
        user.setEmail(email);
        user.setAddress(address);
        user.setZip(zip);
        user.setCity(city);
        user.setCountry(country);

        userService.register(user);

        return new Message(true, "Registration Succesful");
    }
    catch (Exception ex)
    {
        return new Message(false, ex.getMessage());
    }
}

提交表单后得到的，是一个新的 HTML 页面：

{"state":true,"content":"Registration Succesful"}

我怎样才能把那个 json 放到我的 js 文件中，而不去这个 html 页面。

【问题讨论】：

你可能想看看this 使用.ajax()。

标签： jquery json post

【解决方案1】：

您可以使用 jQuery 来执行此操作。像这样的。

$('#registerForm').bind('submit', function(e){
    e.preventDefault();
    $.ajax({
        'url': $(this).attr('action'),
        'type': 'POST',
        'data': $(this).serialize(),
        'complete': function(data){
            //data will contain the json coming back
        },
        'error': function(){
            //error occurred
        }
    });
});

【讨论】：

这个好像是对的，但是提交后总是重定向到那个json/html页面。。这是为什么呢？
我必须查看您的代码才能确定，e.preventDefault() 应该可以防止这种情况发生。
($('#registerForm').bind('submit', function(e){ e.preventDefault(); $.ajax({ 'url': 'http://localhost:8081/rest/users/register', 'type': 'POST', 'data': $(this).serialize(), 'complete': function(data){ alert(data); }, 'error': function(){ alert("errortje"); } }); });)
对不好的看法感到抱歉.. 但我找不到如何在这里添加代码块.. 我是 stackoverflow 的新手..
摆脱 () 包装一切，我认为它应该工作。请参阅我的 jsfiddle：jsfiddle.net/derekaug/deBRY 示例。

【解决方案2】：

您可以将回调绑定到提交事件，而不是以正常方式提交表单。比使用.serialize 序列化表单数据并通过ajax 将其发送到您的服务器。有关详细信息，请参阅here。像这样的：

$('#registerForm').on('submit' function(event) {
    $.post("url...", $("#registerForm").serialize(), function(result) {
        // Handle here...
    });

    event.preventDefault();
});

【讨论】：