二十六、python學習之前端(九):JQuery資料互動

阿新 • • 發佈：2018-11-01

一.juqery物件:

js中的物件,就是python中的字典:

1定義方法:

定義方法1:

var obj1 = {name:"張三", "age":18, "address":"三里屯"}

定義方法2:

var obj2 = new Object();
obj2.name = "李斯";
obj2.['age'] = 28;

2 獲取值:

獲取方法1:

var name = obj["name"];
var name2 = obj2.name;

1.3 應用:

以後開發使用比較多的是:數組裡邊套物件

二、json:

1.什麼是json:

json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript物件表示法，這裡說的json指的是類似於javascript物件的一種資料格式物件，目前這種資料格式比較流行，逐漸替換掉了傳統的xml資料格式。
json資料物件類似於JavaScript中的物件，但是它的鍵對應的值裡面是沒有函式方法的，值可以是普通變數，不支援undefined，值還可以是陣列或者json物件。
與JavaScript物件寫法不同的是，json物件的屬性名稱和字串值需要用雙引號引起來，用單引號或者不用引號會導致讀取資料錯誤。

2.把json型別的字串,轉換成物件:

var str1 =  '{"name":"張三","age":18,"address":"三里屯"}';
var obj1 = JSON.parse(str1)

3.把物件轉換成json型別的字串

var obj2 = {name: "李四", 'age': 18, "address": "三里屯"};
var str2 = JSON.stringify(obj2)

三、ajax:

1.什麼是ajax:

ajax一個前後臺配合的技術，它可以讓javascript傳送http請求，與後臺通訊，獲取資料和資訊。ajax技術的原理是例項化xmlhttp物件，使用此物件與後臺通訊。jquery將它封裝成了一個函式$.ajax()，我們可以直接用這個函式來執行ajax請求。

ajax需要在伺服器環境下執行。

2.為什麼有ajax:

重新整理頁面一部分(往往伴隨著資料庫), 就會有非同步提交.(ajax)

3.ajax的語法使用:

$.ajax使用方法

常用引數：

url 請求地址
type 請求方式，預設是’GET’，常用的還有’POST’
dataType 設定返回的資料格式，常用的是’json’格式，也可以設定為’html’
data 設定傳送給伺服器的資料
success 設定請求成功後的回撥函式
error 設定請求失敗後的回撥函式
async 設定是否非同步，預設值是’true’，表示非同步

語法:

以前的寫法:

$.ajax({
    url: '',
    type: 'GET',
    dataType: 'json',
    contentType:'application/json',	# 這個很重要
    data:{}
    success:function(dat){},
    error:function(){}
});

新的寫法(推薦):

$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    contentType:'application/json',
    data:{'code':300268}
})
.done(function(dat) {
    alert(dat.name);
})
.fail(function() {
    alert('伺服器超時，請重試！');
});

$.ajax的簡寫方式(沒有錯誤處理)

$.ajax按照請求方式可以簡寫成$.get或者$.post方式

$.get("/change_data", {'code':300268},
function(dat){
    alert(dat.name);
});

$.post("/change_data", {'code':300268},
function(dat){
    alert(dat.name);
});

4.json的跨域問題(重點了解一下):

4.1 什麼是跨域問題:

由於瀏覽器同源策略，凡是傳送請求url的協議、域名、埠三者之間任意一個與當前頁面地址不同即為跨域。存在跨域的情況：

網路協議不同，如http協議訪問https協議。
埠不同，如80埠訪zhouchengfei問8080埠。
域名不同，如 zhouchengfei.top 訪問 baidu.com。
子域名不同，如 ss.zhouchengfei.top 訪問 def.zhouchengfei.top。
域名和域名對應ip,如www.a.com訪問20.205.28.90。

4.2 如何解決跨域訪問:

porxy代理: 通過nginx代理；
CORS 【Cross-Origin Resource Sharing】;
jsonp: 通過動態插入一個script標籤;

ajax處理跨域訪問使用"jsonp"屬性

 // ajax非同步提交。
    $.ajax({
        url: 'https://sug.so.360.cn/suggest',
        type: 'get',
        dataType: 'jsonp',
        contentType:'application/json',
        data: {'word': $(this).val()},
    })
    .done(function(dat){
        console.log(dat)
    })
    .fail(function(){
        alert('伺服器錯誤!!!')
    })
})