mui ajax+java交互

转载:

--------------------- 
作者：独孤薄荷 
来源：CSDN 
原文：https://blog.csdn.net/u011871201/article/details/84704432 
版权声明：本文为博主原创文章，转载请附上博文链接！

登录页面：

<div class="mui-content">
            <!--<input type="image" src="images/backAll.jpg" />-->
 
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>用户名</label>
                    <input type="text" id="username" class="mui-input-clear" placeholder="请输入用户名">
                </div>
                <div class="mui-input-row">
                    <label>密码</label>
                    <input type="password" id="password" class="mui-input-password" placeholder="请输入密码">
                </div>
                <div class="mui-input-row mui-checkbox mui-left">
                    <input name="remeberPass" value="item" type="checkbox" checked="checked" />
                    <label>记住密码</label>
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn-primary" id='btn1' οnclick="loginBtn()" style="margin-left: 12px;">登录</button>
                </div>
            </form>
        </div>

请求方式：

<script type="text/javascript">
            function loginBtn() {
                var username = $('#username').val();
                var userpass = $('#password').val();
                var url = 'http://192.168.1.13:9090/login';
                var type = 'POST';
                var data = {
                        'username': username,
                        'password': userpass
                };
                var dataType = 'jsonp';
                mui.ajax(url,{            
                    type: type,        
                    data: JSON.stringify(data),
                    dataType: dataType,
                    timeout: 1000,
                    headers: {
                        'Access-Control-Allow-Origin': '*',
                        'Content-Type': 'application/json; charset=UTF-8'
                    },
                    success: function(data) {
                        alert(data);
                    },
                    error: function(xhr, type, errorThrown) {
                        mui.alert(Error);
                    }
                });
            }
        </script>
后台接收：

    /**
     * 查找用户是否存在
     * @return
     */
    @CrossOrigin
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    @ResponseBody
    public String findUser(
            @RequestBody  Map<String,String> reqMap,
            HttpServletResponse response
    ){
        response.setHeader("Access-Control-Allow-Origin", "*");
        User user=userService.findUserByUsernameAndPassword(reqMap.get("username"),reqMap.get("password"));
        return user.getUSE002();
    }
跨域主要解决以下几个点：

前端：1、data用JSON.stringify(data)转以下，变成json格式    2、headers:设置'Access-Control-Allow-Origin': '*'和'Content-Type': 'application/json; charset=UTF-8'   3、dataType改为jsonp

后端：1、增加备注@CrossOrigin，解决跨域问题   2、method = RequestMethod.POST  让后台知道，是什么请求方式

           3、接收参数用map，因为前端跨域用post，数据到Request Payload中，不然会提示400,415,500等错误，就是因为接收不到数据    4、设置response.setHeader("Access-Control-Allow-Origin", "*");(可有可无)