利用ajax与获取后台传递的json数据

直接上代码：

　　　　　　　　　　<form  method="post" class="">
                    <fieldset>
                        <legend>Login</legend>
                        <div class="form-group has-feedback">
                            <label class="control-label">用户名</label>
                            <input type="text" id="username" class="form-control" name="username" placeholder="userame">
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                        </div>
                        <div class="form-group has-feedback">
                            <label class="control-label">密码</label>
                            <input type="password" id="password" class="form-control" name="password" placeholder="password">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        </div>
                        <div class="login-btn">
                            <button class="btn btn-default btn-primary" id="submit" type="button">登录</button>
                            <a href="#" class="btn btn-default btn-success">注册</a>
                        </div>
                    </fieldset>
                </form>

 

　　使用jquery的$.ajax()方法异步提交请求：

　　

$(document).ready(function(){
    $("#submit").click(function(){
        var name=$("#username").val();
        var psd=$("#password").val();
        var userJson={username:name,password:psd};
        //alert(name+" "+psd);
        $.ajax({
            url:"http://localhost:8080/guser/user/login",
            type:"post",
            data:userJson,
            success:function(data){
                if(data != "")
                    location.href ="http://localhost:8080/gblog/imagecate";
            },
            complete:function(){}
        });
    });
});

后台返回的json数据将保存在data中，可以在success:下进行解析，并进行一定操作。