前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据

【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据

作者头像
剽悍一小兔
发布2018-05-17 15:24:33
7680
发布2018-05-17 15:24:33
举报

这一节我们来说一下如何用ajax提交请求?

我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的?

form表单:

代码语言:javascript
复制
<!-- 采用post表单提交 -->
    <form style="margin-left:200px;" id="myform" name="myform" method="post" onsubmit="return sumbitTest();"   
          action="login.do">  
        <table>  
            <tr>  
                <td>用户名:</td>  
                <td> <input type="text" name="username" id="username"/> </td>  
            </tr>  
            <tr>  
                <td>密码:</td>  
                <td> <input type="password" name="password" id="password"/> </td>  
            </tr>  
            <tr>  
                <td colspan="2">  
                    <input style="display:none" id="login_btn" type="submit" value="提交">  
                </td>  
            </tr>  
            
            <div id="errMsg" style="color:red">${errMsg}</div>
            
            <input id="loginType" type="text" name="loginType" hidden='true'/> </td>
            
        </table>  
    </form>  

修改提交方法:

代码语言:javascript
复制
         function doLogin(type){
            if(type == 'QQ'){
                alert('您选择的是QQ登录');
            }
            
            if(type == 'weixin'){
                alert('您选择的是微信登录');
            }
            
            $("#loginType").val(type);
            
            //$("#login_btn").click();
            
            //如果验证通过,就开始进行提交 
            if(sumbitTest()){
                 $.ajax({
                     type: "GET",
                     url: "login.do",
                     data: {username:$("#username").val(), password:$("#password").val()},
                     dataType: "json", //预期服务器返回的数据
                     success: function(data){
                                if(data.errCode < 0){
                                    $("#errMsg").show().html(data.errMsg).stop(true,true).fadeOut(3000);
                                }else{
                                    //登录成功,做其他处理
                                    alert("恭喜你,登录成功!") 
                                }
                                
                              }
                 });
            }
            
            
        }
        
        //验证登录信息 
        function sumbitTest(){
            
            return true;
            
            //在这个方法中可以对登录信息进行校验 (作业,用户名和密码都不能为空) 
            if(!$("#username").val()){
                alert("用户名不能为空!");
                return false;
            }
            
            if(!$("#password").val()){
                alert("密码不能为空!");
                return false; 
            }
            
        }

ajax是异步操作,和同步操作的form表单提交不同。 例子一:同步就是打电话,对方不接就一直等。异步就是发微信,对方回不回我都可以去做别的事情。

例子二:同步就像玩RPG回合制游戏,比如口袋妖怪,你打我一下,我打你一下。异步就像玩红色警戒,我可以先派20辆天启坦克去轰炸对面的兵工厂,下完指令后还可以立刻回到主基地造一座雷达。 OK,刚才我们看到ajax提交有一个属性是text,这就表示返回的数据格式是文本。实际上,我们一般用的数据格式并非text,而是JSON。我们需要在Servlet中手动给我们的JSP页面返回一个json数据。

代码语言:javascript
复制
WebUtil.writeObject(resp, JSONObject.fromObject(resultData) );

其中,resultData是一个包含错误码和错误信息的专用类:

代码语言:javascript
复制
public class ResultData {
    
    private int errCode = 0;
    private String errMsg;
    
    public int getErrCode() {
        return errCode;
    }
    public void setErrCode(int errCode) {
        this.errCode = errCode;
    }
    public String getErrMsg() {
        return errMsg;
    }
    public void setErrMsg(String errMsg) {
        this.errMsg = errMsg;
    }
}

因为最终转换的时候肯定默认调用resultData对象的toString方法,所以我们不妨直接重写ResultData类的toString方法,返回JSON格式。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.12.06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档