jsonp跨域提交数据

前端之家收集整理的这篇文章主要介绍了jsonp跨域提交数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

51前写的一篇跨域提交数据的blog——JQuery AJAX跨域提交参数、接收json数据,在IE中使用时,页面会弹出提示“该页正在访问其控制范围之外的信息。这可能导致安全风险。是否继续?”,虽然在chrome和firefox里面则没这个提示,但IE用户还是较多,总感觉有点用户体验上有所欠缺,今天参考IBM社区的一篇文章——使用 JSONP 实现跨域通信,改了一下代码,使用jsonp的方式来实现,修改如下:

Servlet代码

  1. public class ProvideCourseInfo extends HttpServlet{
  2.  
  3. private static final long serialVersionUID = -487357559770822253L;
  4. private ICourseService courseService;
  5.  
  6. @Override
  7. protected void doGet(HttpServletRequest req,HttpServletResponse resp)
  8. throws ServletException,IOException {
  9. String jsonData = getDataAsJson(req.getParameter("symbol"));
  10. String output = req.getParameter("callback") + "(" + jsonData + ");";
  11.  
  12. resp.setCharacterEncoding("UTF-8");
  13. resp.setContentType("text/javascript");
  14. PrintWriter out = resp.getWriter();
  15. out.println(output);
  16. }
  17. private String getDataAsJson(String courseNumber) {
  18. if(StringUtil.isBlank(courseNumber)){
  19. Course course = courseService.getValidCourse(courseNumber);
  20. if(course!=null){
  21. StringBuilder sb = new StringBuilder();
  22. String courseName = course.getCourseName();
  23. sb.append("{");
  24. sb.append("\"");
  25. sb.append("courseName");
  26. sb.append("\"");
  27. sb.append(":");
  28. sb.append("\"");
  29. sb.append(courseName);
  30. sb.append("\"");
  31. Integer lang = course.getLang();
  32. sb.append(",");
  33. sb.append("\"");
  34. sb.append("lang");
  35. sb.append("\"");
  36. sb.append(":");
  37. sb.append("\"");
  38. sb.append(lang);
  39. sb.append("\"");
  40. sb.append("}");
  41. course = null;
  42. return sb.toString();
  43. }
  44. }
  45. return "0";
  46. }
  47.  
  48. @Override
  49. protected void doPost(HttpServletRequest request,HttpServletResponse response)
  50. throws ServletException,IOException {
  51. this.doGet(request,response);
  52. }
  53. @Override
  54. public void init() throws ServletException {
  55. super.init();
  56. ApplicationContext context = WebApplicationContextUtils.getWebApplicationContext(this
  57. .getServletContext());
  58. courseService = (ICourseService) context.getBean("courseService");
  59. }
  60. }
jsp代码
  1. <script type="text/javascript">
  2. function showCourseInfo(){
  3. var resourceCode = document.getElementById("resourceCode").value;
  4. jQuery.getJSON("http://10.10.6.31:8099/jsonp/provideCourseInfo?symbol="+resourceCode+"&callback=?",function(data) {
  5. if(data!="0"){
  6. document.getElementById('resourceName').value = data.courseName;
  7. document.getElementById('languageType').value = data.lang;
  8. }else{
  9. document.getElementById('resourceName').value = '';
  10. document.getElementById('languageType').value = '';
  11. alert("课件编码不存在!!!");
  12. }
  13. });
  14. }
  15. </script>
  16. <dt>
  17. <label><span>*</span> 课件编码:</label>
  18. </dt>
  19. <dd>
  20. <input type="text" class="default_txt" id="resourceCode" name="resourceCode" value="112290_eng"/>
  21. <input name="Button2" type="button" class="btn btn_default" onclick="showCourseInfo()" value="Load…" />
  22. </dd>

猜你在找的Json相关文章