最近学习app开发,选择用HBuilder。本来IntelliJ IDEA可以写原生的,但是刚开始,心里没底。就选择HBuilder了。写了简单的登录页面。因为跨域问题,请求和接收都不正常,调试了好几天。今天终于在高手的帮助下,完成了,在此记录一下,免得以后忘记,也供朋友们参考和指正。
登录页面:
<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' onclick="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", "*");(可有可无)