一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

原生ajax發(fā)送數(shù)據(jù),以及不用的方法發(fā)送

 眺朢 2020-03-13

原生js發(fā)送ajax請求

4步:

//1. 實例化xhr對象
var xhr = new XMLHttpRequest();

//2. 調用open方法準備ajax請求
//參數(shù)1: 請求方式 (get、post、delete、put)
//參數(shù)2: 請求的服務器端的地址
//參數(shù)3: true(異步、默認)、false(同步)
xhr.open('get', '/getData');

//3. 調用send方法發(fā)送ajax請求
xhr.send();

//4. 調用onload事件,配合responseText來接收服務器端返回的數(shù)據(jù)
// xhr.responseText: 以字符串形式來接收服務器端返回的結果
// 服務器端返回的數(shù)據(jù)有兩種可能:
//  1) 普通字符串(hello world \ I am xiaoming)
//  2) json字符串('{"id":"101", type:"goods", "name":"小米"}')
//     json字符串都會使用 JSON.parse 轉回成對象形式
xhr.onload = function () {
    xhr.responseText
}

發(fā)送請求時get傳參

get參數(shù)要拼接在url地址的后面,以?進行分割

var xhr = new XMLHttpRequest();

//參數(shù)2的位置用來拼接get參數(shù), 以 ? 作為分隔符
// ?之前: 請求的url地址
// ?之后: 查詢參數(shù) key1=value1&key2=value2&...
xhr.open('get', '/getData?id=1&name=zs&age=20&...');

xhr.send();

xhr.onload = function () {
    xhr.responseText
}

發(fā)送請求時post傳參

post傳參有三種方式: key=value&key=value&... FormData json字符串

//1. key=value&key=value&...
// application/x-www-form-urlencoded : 需要key=value這種結構的參數(shù)

var xhr = new XMLHttpRequest();

xhr.open('post', '/postData');


//將發(fā)送到服務器端的數(shù)據(jù)寫成一個字符串
var str = 'id=1&name=zs&age=20&...'

//發(fā)送請求之前一定要設置請求頭為 application/x-www-form-urlencoded
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

xhr.send(str);

xhr.onload = function () {
    xhr.responseText
}
//2. 發(fā)送FormData類型的數(shù)據(jù)
//1) 直接獲取整個post表單的數(shù)據(jù)
var fm = document.querySelector('form');
var fd = new FormData(fm)


//2) 實例化一個空的FormData,再向里面append數(shù)據(jù)
var fd = new FormData();
fd.append('name', 'xiaoming');
fd.append('age', 20);
fd.append('img', this.files[0]);


//發(fā)送ajax請求時,如果發(fā)送到服務器端的數(shù)據(jù)為FormData時,不需要設置請求頭,需要將fd作為參數(shù)傳入send
var xhr = new XMLHttpRequest();

xhr.open('post', '/postData');

xhr.send(fd);

xhr.onload = function () {
    xhr.responseText
}
//3. 發(fā)送到服務器端的數(shù)據(jù)是json字符串
var jsonStr = JSON.stringify({name:"zs", age:20});  //'{name:"zs", age:20}'

var xhr = new XMLHttpRequest();

xhr.open('post', '/postData');

xhr.setRequestHeader('content-type', 'application/json');

xhr.send(jsonStr);

xhr.onload = function () {
    xhr.responseText
}

    本站是提供個人知識管理的網(wǎng)絡存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權內(nèi)容,請點擊一鍵舉報。
    轉藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    国产三级欧美三级日韩三级| 综合久综合久综合久久| 国产精品成人一区二区在线| 日韩一区二区三区在线欧洲| 欧美亚洲美女资源国产| 欧美又黑又粗大又硬又爽| 亚洲熟女少妇精品一区二区三区| 蜜桃传媒视频麻豆第一区| 国产专区亚洲专区久久| 国产精品一区二区日韩新区| 亚洲天堂有码中文字幕视频| 综合久综合久综合久久| 中国一区二区三区不卡| 东京热加勒比一区二区三区| 成人午夜在线视频观看| 九九蜜桃视频香蕉视频| 欧美日韩在线第一页日韩| 亚洲一区二区三在线播放| 91精品视频全国免费| 国产肥女老熟女激情视频一区| 国产成人精品资源在线观看| 中国一区二区三区不卡| 欧美日韩亚洲国产综合网| 激情丁香激情五月婷婷| 日韩欧美国产精品中文字幕| 日韩一区二区三区18| 人人爽夜夜爽夜夜爽精品视频 | 少妇肥臀一区二区三区| 久久热在线视频免费观看| 熟女少妇久久一区二区三区| 青青操视频在线播放免费| 69精品一区二区蜜桃视频 | 中文字幕人妻一区二区免费| 国产又大又猛又粗又长又爽| 国产又色又粗又黄又爽| 日韩欧美综合中文字幕| 欧美国产日韩变态另类在线看| 老司机精品一区二区三区| 一区二区三区国产日韩| 中文字幕一区二区熟女| 91天堂免费在线观看|