jquery - 发布表单后从服务器获取 json 到 jQuery

Question

这个问题已经有答案了:

已关闭 11 年前。

Possible Duplicate:
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"}

如何在不访问此 html 页面的情况下将该 json 获取到我的 js 文件中。

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