vue中ajax傳送接收json總結

2021-08-20 10:19:41 字數 1898 閱讀 3290

系統結構:

後端:python中tornado

前端:vue.js

主要問題:跨域問題和json收發

1、跨域問題(python中tornado中設定):

後端:1>實現options方法

2>設定相關允許的頭域

def set_default_headers(self):

print "setting headers!!!"

self.set_header("access-control-allow-origin", "*")

self.set_header("access-control-allow-credentials", "true")

self.set_header("access-control-allow-methods", "*")

self.set_header("access-control-allow-headers", "x-requested-with,content-type,access-token")

self.set_header("access-control-expose-headers", "*")

# self.set_header('access-control-allow-methods', 'post, get, options')

def options(self):

# no body

# self.set_default_headers()

self.set_status(204)

self.finish()

前端(vue):

>2、注意:

1>vue使用axios傳送http請求,對應的main.js設定如下:

queryresult在中傳送使用this,另外進入請求作用域不同,需要設定到乙個變數上,然後通過bind方法設定進去,否則的話會傳送訪問不到result物件

2>json解析

a)json.stringify(response.data, null, 4)和json.stringify(object)方法

b)js中宣告乙個物件設定對應的屬性,很方便的就完成了json的生成

3、遺留問題:

當前還沒有使用vue的過濾器,後續學習

4、參考文章

ajax跨域,這應該是最全的解決方案了

前端ajax請求跨域時遇到的一些坑

js中幾種實用的跨域方法原理詳解

如何解決出現axios的request header field content-type is not allowed by access-control-allow-headers in preflight response.

js操作json  

vue 傳送ajax請求

使用axios傳送ajax請求 1 安裝axios並引入 3 通過script src的方式進行檔案的引入 2 傳送get請求 1 基本使用格式 格式1 axios options 這種格式直接將所有資料寫在options裡,options其實是個字典 格式2 axios.get url optio...

vue傳送ajax請求

建立乙個django工程,例如 login.建立完成之後,再建立乙個子應用,例如users.最後再設定一下模板檔案 在模板檔案中建立乙個axios.html,內容如下 登入 delimiters data 建立檢視並載入模板的html url設定 from django.conf.urls impo...

ajax利用json傳送 接收資料

此函式等價於document.getelementbyid document.all function s else 建立 xmlhttprequest物件,以傳送ajax請求 傳送ajax處理請求 這裡簡單驗證使用者名稱和密碼的有效性,預設正確的輸入 使用者名稱和密碼都是test function...