App Framework 中如何发送JSONP请求呢?
使用jsonp,详情请参考:http://json-p.org/
如何发送Ajax请求呢?
(1)登录
/***
* 会员登录
* @param username
* @param password
*/
var user_login=function(username,password){
// alert(username+","+password);
if(isHasLogin())
{
alert("你已经登录过,无需再次登录");
return;
}
$.ui.showMask();
$.jsonP({url:'http://'+server_url+'/tv_mobile/user/login?callback=?&username='+username+"&password="+password,success:function(data){
var result=data.result;
$.ui.hideMask();
switch (result)
{
case 1:
window.user={};
window.sessionId=data.session;
user.username=username;
user.password=password;
settings_before(document.getElementById("settings"));
alert("登录成功");
$.ui.goBack();
break;
case 3:
alert("用户名不能为空");
break;
case 4:
alert("密码不能为空");
break;
case 5:
alert("用户名或密码错误");
break;
case 2:
alert("用户名不存在");
break;
}
}});
}
服务器代码:
/***
* 登录
* @param model
* @param status
* @param view
* @param session
* @param request
* @param callback
* @return
* @throws IOException
*/
@ResponseBody
@RequestMapping(value = "/login", produces = SystemHWUtil.RESPONSE_CONTENTTYPE_JSON_UTF)
public String login(Model model, Integer status, UserView view,
HttpSession session, HttpServletRequest request, String callback)
throws IOException {
init(request);
String content = null;
UserDao userDao = (UserDao) getDao();
User user2 = null;
Map map = new HashMap();
int login_result = 0;
if (ValueWidget.isNullOrEmpty(view.getUsername())) {
login_result = Constant2.LOGIN_RESULT_USERNAME_EMPTY;//用户名不能为空
} else if (ValueWidget.isNullOrEmpty(view.getPassword())) {
login_result = Constant2.LOGIN_RESULT_PASSWORD_EMPTY;//密码不能为空
} else if (ValueWidget.isNullOrEmpty(user2 = userDao.getByUsername(view
.getUsername()))) {
login_result = Constant2.LOGIN_RESULT_USERNAME_INVALID;//用户名不存在
} else if (!user2.getPassword().equals(view.getPassword())) {
login_result = Constant2.LOGIN_RESULT_FAILED;//登录失败(用户名和密码不匹配)
} else {
login_result = Constant2.LOGIN_RESULT_SUCCESS;
session.setAttribute("user", user2);
map.put("session", session.getId());// 下载session id到客户端
System.out.println("session id:" + session.getId());
}
// boolean isExist = userDao.isExist(view.getUsername(),
// view.getPassword());
map.put(Constant2.LOGIN_RESULT_KEY, login_result);
content = JSONPUtil.getJsonP(map, callback);
return content;
}
/***
* 用于jsonp调用
* @param map : 用于构造json数据
* @param callback : 回调的javascript方法名
* @return : js函数名(json字符串)
*/
public static String getJsonP(Map map,String callback)
{
ObjectMapper mapper = new ObjectMapper();
String content = null;
try {
content = mapper.writeValueAsString(map);
System.out.println(content);
} catch (JsonGenerationException e) {
e.printStackTrace();
} catch (JsonMappingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
if(ValueWidget.isNullOrEmpty(callback)){
return content;
}
return callback+"("+content+")";
}
/***
*
* @param key
* @param value2
* @param callback
* @return : js函数名(json字符串)
*/
public static String getJsonP(String key ,Object value2,String callback){
Map map = new HashMap();
map.put(key, value2);
return getJsonP(map, callback);
}
若登录成功,返回的内容是:
{"result":1,"session":"C3EA8F68A1B685D3F820C4A729A9D0A7"}
注意:
(a)因为是要跨域请求,所以使用JSONP,没有直接使用ajax;
(b)实际上服务器返回的格式是:js函数名(json字符串)
(c)登录成功之后,页面要保存session,因为后续的请求(修改密码)要通过session验证权限
(2)修改密码
var modifyPassword=function($old_password,$new_password){
// alert($old_password.val()+" , "+$new_password.val());
if(!isHasLogin())
{
alert("您未登录,请先登录");
$.ui.goBack();
return;
}
var old_password_val=$old_password.val();
if(!com.whuang.hsj.isHasValue(old_password_val)){
alert("请输入旧密码");
$old_password[0].focus();
return;
}
if(old_password_val!==user.password){
alert("旧密码不正确");
return;
}
var new_password_val=$new_password.val();
if(!com.whuang.hsj.isHasValue(new_password_val)){
alert("请输入新密码");
$new_password[0].focus();
return;
}
if(old_password_val===new_password_val){
alert("两次密码不能相同");
return;
}
$.ui.showMask();
var modi_url='http://'+server_url+'/tv_mobile/user/mod_pass?callback=?&password='+old_password_val+"&password2="+new_password_val+";jsessionid="+window.sessionId;
alert(modi_url);
$.jsonP({url:modi_url,success:function(data){
var result=data.result;
$.ui.hideMask();
switch (result)
{
case 1:
user.password=new_password_val;
alert("修改成功");
$.ui.goBack();
break;
case 23:
alert("新密码不能为空");
break;
case 21:
alert("请先登录");
$.ui.goBack();
break;
case 22:
alert("两次密码不能相同");
break;
case 24:
alert("密码已过期,请点击右上角的刷新按钮");
break;
}
}});
}
注意:
(a)JSONP只能通过get方式请求,所以要在url地址后面添加session ID;
(b)不能以普通参数的方式来添加session id,应该是";jsessionid="
(3)注销
var logout= function () {
if(!isHasLogin())
{
alert("您未登录,请先登录");
$.ui.goBack();
return;
}
$.ui.showMask();
var modi_url='http://'+server_url+'/tv_mobile/user/logout?callback=?&password='+user.password+";jsessionid="+window.sessionId;
alert(modi_url);
$.jsonP({url:modi_url,success:function(data){
var result=data.result;
$.ui.hideMask();
switch (result)
{
case 1:
window.user=null;
alert("注销成功");
$settings=$("#settings");
var $login_li=$settings.find("#settings_user");
resetSettingsUserMgmt($login_li);
break;
case 23:
alert("新密码不能为空");
break;
case 21:
alert("请先登录");
window.user=null;
$settings=$("#settings");
var $login_li=$settings.find("#settings_user");
resetSettingsUserMgmt($login_li);
$.ui.goBack();
break;
case 24:
alert("密码已过期,请点击右上角的刷新按钮");
break;
}
}});
}
注意:注销时在请求服务器session的同时还要清除页面的登录信息(window.user=null;)
参考:
http://hw1287789687.iteye.com/blog/2188617
AJAX 跨域请求 - JSONP获取JSON数据:http://justcoding.iteye.com/blog/1366102