App Framework发送JSONP请求(3)

2022-07-09 07:58:56

App Framework 中如何发送JSONP请求呢?

使用jsonp,详情请参考:http://json-p.org/

如何发送Ajax请求呢?

(1)登录

Js代码  App Framework发送JSONP请求(3)
  1. /*** 
  2.  * 会员登录 
  3.  * @param username 
  4.  * @param password 
  5.  */  
  6. var user_login=function(username,password){  
  7. //    alert(username+","+password);  
  8.     if(isHasLogin())  
  9.     {  
  10.         alert("你已经登录过,无需再次登录");  
  11.         return;  
  12.     }  
  13.     $.ui.showMask();  
  14.     $.jsonP({url:'http://'+server_url+'/tv_mobile/user/login?callback=?&username='+username+"&password="+password,success:function(data){  
  15.         var result=data.result;  
  16.         $.ui.hideMask();  
  17.         switch (result)  
  18.         {  
  19.             case 1:  
  20.                 window.user={};  
  21.                 window.sessionId=data.session;  
  22.                 user.username=username;  
  23.                 user.password=password;  
  24.                 settings_before(document.getElementById("settings"));  
  25.                 alert("登录成功");  
  26.                 $.ui.goBack();  
  27.                 break;  
  28.             case 3:  
  29.                 alert("用户名不能为空");  
  30.                 break;  
  31.             case 4:  
  32.                 alert("密码不能为空");  
  33.                 break;  
  34.             case 5:  
  35.                 alert("用户名或密码错误");  
  36.                 break;  
  37.             case 2:  
  38.                 alert("用户名不存在");  
  39.                 break;  
  40.         }  
  41.   
  42.     }});  
  43. }  

服务器代码: 

Java代码  App Framework发送JSONP请求(3)
  1. /*** 
  2.      * 登录 
  3.      * @param model 
  4.      * @param status 
  5.      * @param view 
  6.      * @param session 
  7.      * @param request 
  8.      * @param callback 
  9.      * @return 
  10.      * @throws IOException 
  11.      */  
  12.     @ResponseBody  
  13.     @RequestMapping(value = "/login", produces = SystemHWUtil.RESPONSE_CONTENTTYPE_JSON_UTF)  
  14.     public String login(Model model, Integer status, UserView view,  
  15.             HttpSession session, HttpServletRequest request, String callback)  
  16.             throws IOException {  
  17.         init(request);  
  18.         String content = null;  
  19.         UserDao userDao = (UserDao) getDao();  
  20.         User user2 = null;  
  21.         Map map = new HashMap();  
  22.         int login_result = 0;  
  23.         if (ValueWidget.isNullOrEmpty(view.getUsername())) {  
  24.             login_result = Constant2.LOGIN_RESULT_USERNAME_EMPTY;//用户名不能为空  
  25.         } else if (ValueWidget.isNullOrEmpty(view.getPassword())) {  
  26.             login_result = Constant2.LOGIN_RESULT_PASSWORD_EMPTY;//密码不能为空  
  27.         } else if (ValueWidget.isNullOrEmpty(user2 = userDao.getByUsername(view  
  28.                 .getUsername()))) {  
  29.             login_result = Constant2.LOGIN_RESULT_USERNAME_INVALID;//用户名不存在  
  30.         } else if (!user2.getPassword().equals(view.getPassword())) {  
  31.             login_result = Constant2.LOGIN_RESULT_FAILED;//登录失败(用户名和密码不匹配)  
  32.         } else {  
  33.             login_result = Constant2.LOGIN_RESULT_SUCCESS;  
  34.             session.setAttribute("user", user2);  
  35.             map.put("session", session.getId());// 下载session id到客户端  
  36.             System.out.println("session id:" + session.getId());  
  37.         }  
  38.         // boolean isExist = userDao.isExist(view.getUsername(),  
  39.         // view.getPassword());  
  40.           
  41.         map.put(Constant2.LOGIN_RESULT_KEY, login_result);  
  42.           
  43.         content = JSONPUtil.getJsonP(map, callback);  
  44.         return content;  
  45.     }  
  46.   
  47. /*** 
  48.      * 用于jsonp调用 
  49.      * @param map : 用于构造json数据 
  50.      * @param callback : 回调的javascript方法名 
  51.      * @return : js函数名(json字符串) 
  52.      */  
  53.     public static String getJsonP(Map map,String callback)  
  54.     {  
  55.         ObjectMapper mapper = new ObjectMapper();  
  56.         String content = null;  
  57.         try {  
  58.             content = mapper.writeValueAsString(map);  
  59.             System.out.println(content);  
  60.         } catch (JsonGenerationException e) {  
  61.             e.printStackTrace();  
  62.         } catch (JsonMappingException e) {  
  63.             e.printStackTrace();  
  64.         } catch (IOException e) {  
  65.             e.printStackTrace();  
  66.         }  
  67.         if(ValueWidget.isNullOrEmpty(callback)){  
  68.             return content;  
  69.         }  
  70.         return callback+"("+content+")";  
  71.     }  
  72.     /*** 
  73.      *  
  74.      * @param key 
  75.      * @param value2 
  76.      * @param callback 
  77.      * @return : js函数名(json字符串) 
  78.      */  
  79.     public static String getJsonP(String key ,Object value2,String callback){  
  80.         Map map = new HashMap();  
  81.         map.put(key, value2);  
  82.         return getJsonP(map, callback);  
  83.     }  

 

 

若登录成功,返回的内容是:

{"result":1,"session":"C3EA8F68A1B685D3F820C4A729A9D0A7"}

注意:

(a)因为是要跨域请求,所以使用JSONP,没有直接使用ajax;

(b)实际上服务器返回的格式是:js函数名(json字符串)

(c)登录成功之后,页面要保存session,因为后续的请求(修改密码)要通过session验证权限

 

(2)修改密码

Js代码  App Framework发送JSONP请求(3)
  1. var modifyPassword=function($old_password,$new_password){  
  2. //    alert($old_password.val()+" , "+$new_password.val());  
  3.     if(!isHasLogin())  
  4.     {  
  5.         alert("您未登录,请先登录");  
  6.         $.ui.goBack();  
  7.         return;  
  8.     }  
  9.     var old_password_val=$old_password.val();  
  10.     if(!com.whuang.hsj.isHasValue(old_password_val)){  
  11.         alert("请输入旧密码");  
  12.         $old_password[0].focus();  
  13.         return;  
  14.     }  
  15.     if(old_password_val!==user.password){  
  16.         alert("旧密码不正确");  
  17.         return;  
  18.     }  
  19.     var new_password_val=$new_password.val();  
  20.     if(!com.whuang.hsj.isHasValue(new_password_val)){  
  21.         alert("请输入新密码");  
  22.         $new_password[0].focus();  
  23.         return;  
  24.     }  
  25.     if(old_password_val===new_password_val){  
  26.         alert("两次密码不能相同");  
  27.         return;  
  28.     }  
  29.     $.ui.showMask();  
  30.     var modi_url='http://'+server_url+'/tv_mobile/user/mod_pass?callback=?&password='+old_password_val+"&password2="+new_password_val+";jsessionid="+window.sessionId;  
  31.     alert(modi_url);  
  32.     $.jsonP({url:modi_url,success:function(data){  
  33.         var result=data.result;  
  34.         $.ui.hideMask();  
  35.         switch (result)  
  36.         {  
  37.             case 1:  
  38.                 user.password=new_password_val;  
  39.                 alert("修改成功");  
  40.                 $.ui.goBack();  
  41.                 break;  
  42.             case 23:  
  43.                 alert("新密码不能为空");  
  44.                 break;  
  45.             case 21:  
  46.                 alert("请先登录");  
  47.                 $.ui.goBack();  
  48.                 break;  
  49.             case 22:  
  50.                 alert("两次密码不能相同");  
  51.                 break;  
  52.             case 24:  
  53.                 alert("密码已过期,请点击右上角的刷新按钮");  
  54.                 break;  
  55.         }  
  56.   
  57.     }});  
  58. }  

 注意:

(a)JSONP只能通过get方式请求,所以要在url地址后面添加session ID;

(b)不能以普通参数的方式来添加session id,应该是";jsessionid="

 

(3)注销

Js代码  App Framework发送JSONP请求(3)
  1. var logout= function () {  
  2.     if(!isHasLogin())  
  3.     {  
  4.         alert("您未登录,请先登录");  
  5.         $.ui.goBack();  
  6.         return;  
  7.     }  
  8.     $.ui.showMask();  
  9.     var modi_url='http://'+server_url+'/tv_mobile/user/logout?callback=?&password='+user.password+";jsessionid="+window.sessionId;  
  10.     alert(modi_url);  
  11.     $.jsonP({url:modi_url,success:function(data){  
  12.         var result=data.result;  
  13.         $.ui.hideMask();  
  14.         switch (result)  
  15.         {  
  16.             case 1:  
  17.                 window.user=null;  
  18.                 alert("注销成功");  
  19.                 $settings=$("#settings");  
  20.                 var $login_li=$settings.find("#settings_user");  
  21.                 resetSettingsUserMgmt($login_li);  
  22.                 break;  
  23.             case 23:  
  24.                 alert("新密码不能为空");  
  25.                 break;  
  26.             case 21:  
  27.                 alert("请先登录");  
  28.                 window.user=null;  
  29.                 $settings=$("#settings");  
  30.                 var $login_li=$settings.find("#settings_user");  
  31.                 resetSettingsUserMgmt($login_li);  
  32.                 $.ui.goBack();  
  33.                 break;  
  34.             case 24:  
  35.                 alert("密码已过期,请点击右上角的刷新按钮");  
  36.                 break;  
  37.         }  
  38.   
  39.     }});  
  40. }  

 注意:注销时在请求服务器session的同时还要清除页面的登录信息(window.user=null;)

参考:

http://hw1287789687.iteye.com/blog/2188617

AJAX 跨域请求 - JSONP获取JSON数据:http://justcoding.iteye.com/blog/1366102

上一篇：Oracle主库归档丢失，备库日志有gap，在不重建备库的情况下，恢复备库


下一篇：异步调用实现多线程处理任务 | 带你读《SpringBoot实战教程》之十四