1. 程式人生 > >springmvc和Angularjs 跨域傳輸 jsonp

springmvc和Angularjs 跨域傳輸 jsonp

angular.module('eduApp')
  .factory('ClassService', ['$http',
      function ($http) {
      // Service logic
      // ...

      var doRequest = function() {
              /*return $http({
                  method: 'GET',
                  url: '../../data/user.json'
              });*/

             return $http({
                method: 'JSONP',
                url: 'http://localhost:8080/EduMaster/queryTeacher.do?callback=JSON_CALLBACK'
              });
          }

 
          }

      // Public API here
      return {
          userList: function() {
              return doRequest();
          }
      };
    }
  ]);

springMVC後臺程式碼

@RequestMapping("/queryTeacher")
	@ResponseBody
	 public JSONPObject queryTeacher(String callback) throws Exception{
			String tno="T001";
			Teacher teacher=teacherService.findTeacher(tno);
	        return new JSONPObject(callback, teacher);
	        
	    }

傳送jsonp請求

 

狀態碼:200 說明請求成功

但是如果後臺不按格式返回的話 Angularjs解析就會報錯

UncaughtSyntaxError:Unexpected token :

jsonp跨域原理,script 是可以跨域請求的,其實就是後臺返回一段js,函式名為前臺傳過去callback的值(這裡是angular.callbacks._0),引數是json格式的請求資料


請求引數,後臺接收callback的引數,並進行字串拼接

@RequestMapping("/queryTeacher")
	@ResponseBody
	 public JSONPObject queryTeacher(String callback) throws Exception{
			String tno="T001";
			Teacher teacher=teacherService.findTeacher(tno);
	        return new JSONPObject(callback, teacher);
	        
	    }

必須以上邊這樣的形式進行返回


相關推薦

springmvcAngularjs 傳輸 jsonp

angular.module('eduApp') .factory('ClassService', ['$http', function ($http) { // Service logic // ... var doR

Ajax--同源策略,jsonp傳輸

href 需要 lan 其他 target 引入 處理 www tle 什麽是同源策略? 阮一峰的博客 同源策略 同源策略的解決方法: 跨域傳輸 img 標簽的src是可以引入其他域名下的圖片 script標簽的src屬性同理 ,也可以引入其他域名

AngularJs最簡單解決問題jsonp案例

var app = angular.module('app', []); app.controller('appCtrl', ['$scope', function ($scope) { $http({ method:

httpclient:與springmvc進行傳輸,上傳檔案,攜帶引數——使用HttpPost方式

一.上傳檔案1.HttpClient類/** * @param file * @param url */ public static void uploadFileByHttpPost(File file, String url) { CloseableHt

JavaScript Ajax問題

pre class log message callback sun javascrip llb back json格式: { "message":"獲取成功", "state":"1", "result":{"name":"工作組1","id":

Ajax、Json、SocketCanvas等同源策略限制的解決方法

b2c editor spec acache 查詢 方案 fin agent pla 同源是指同樣的協議、域名、port,三者都同樣才屬於同域。不符合上述定義的請求,則稱為跨域。 相信每一個開發者都曾遇到過跨域請求的情況,盡管情況不一樣,但問題的本質都能夠歸為瀏覽器出

AJAX 請求 - JSONP獲取JSON數據

tel -name 跨域訪問 服務器 utf pen domain nbsp XML 1、什麽是JSONP?   JSONP(JSON with Padding)是一個非官方的協議,它允許在服務器端集成Script tags返回至客戶端,通過javascript callb

前端jsonp

sca clas ext call rip oct utf-8 title initial demo1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

&JSONP

參數 tps css 發送 端口 訪問 效果 cor end 1. 同源&跨域 1.1 什麽是同源?什麽是跨域? 同源:協議頭、域名、端口完全一致就叫同源 跨域:協議頭、域名、端口有一個不一樣就叫跨域 判斷是否同源,如:http://www.exampl

JQuery - AjaxTomcat請求問題解決方法!

頁面 解析json turn 圖片 fault $.ajax action 配置 span 在JQuery裏面使用Ajax和Tomcat服務器之間進行數據交互,遇到了跨域請求問題,無法成功得到想要的數據! 錯誤信息部分截圖: 通過錯誤信息判斷知道已經發生在Ajax跨域請求

php ajax jsonp請求

直接看帶程式碼:     php介面端返回 :   $jsonp = 'test'; echo($jsonp.'('.json_encode($pay).')'); //oCnu50RF4MlIiBI42OoXfvm_dd

[JS]筆記18_AJAX2_iframe元素&AJAX&JSONP

1、iframe元素 iframe元素會建立包含另外一個文件的內聯框架 常用屬性: frameborder屬性規定是否顯示框架周圍的邊框 值:0/1 src屬性規定要顯示的文件的URL 可是:html、文字、ASP等 scrolling屬性規定是否顯示滾動條 值:ye

springMVC中解決問題

在springMVC解決跨域問題相對來說比較簡單,網上有好多關於解決跨域的問題的文章,我只嘗試使用其中一種,已經成功了。 條件: 1.spring的版本必須在4.2-*以上,我的版本是<spring.version>4.3.10.RELEASE</spring.versio

web session token 攻擊

主要是想推薦一下這篇: 實現一個靠譜的Web認證 下文是看過後自己的理解。順便說下這個人的其他文章也很贊。 session 和 token session id 比較常見,就不多說了,這裡先科普下無狀態的token驗證: 幹掉狀態:從session到token 圖是

angularjspost解決方案

前端同學李雷和後臺同學韓梅梅分別在自己電腦上進行開發,後臺介面寫好的時候,李雷改動完就把前端程式碼上傳到gitlab,然後在測試機上從gitlab上拉下來,然後在測試機上移動最新程式碼,最後回到本機重新整理頁面。有時候碰到網速不好的情況傳個git傳了半天,或者李雷剛上傳完發現少寫了一個單詞,加上再傳

vue 本地環境API代理設定解決

寫一個config.js檔案,作為專案地址的配置。 1 //專案域名地址 2 const url = 'https://exaple.com'; 3 4 5 let ROOT; 6 //由於封裝的axios請求中,會將ROOT打包進去,為了方便之後不再更改,判斷了當前環境,而生成的不同

Ajax基礎基本問題

本文章內容大部分摘自@姜維_Wayne 老師在imooc中的免費課程Ajax全接觸 目的是作為一個課程的總結和Ajax知識的概覽 AJAX Asynchronous JavaScript and XML(非同步的JS和XML) 是一種在無需重新載入整個網頁的情況下能更新部分網頁的技術

方式 jsonp cors

一、簡要介紹 1.1、JSONP   JSONP是利用瀏覽器對script的資源引用沒有同源限制,通過動態插入一個script標籤,當資源載入到頁面後會立即執行的原理實現跨域的。JSONP是一種非正式傳輸協議,該協議的一個要點就是允許使用者傳遞一個callback或者開始就定義一個回撥方法,

php ajax問題的解決方案

本文通過設定Access-Control-Allow-Origin來實現跨域。 例如:客戶端的域名是client.runoob.com,而請求的域名是server.runoob.com。 如果直接使用ajax訪問,會有以下錯誤: XMLHttpRequest cannot load http://s

flash利用crossdomain.xml傳輸資料

使用crossdomain.xml讓Flash可以跨域傳輸資料 本文來自http://www.mzwu.com/article.asp?id=975 本文來自https://www.cnblogs.com/jiuyi/p/6068190.html 一、概述 位於www.mzwu