JavaScript學習筆記-cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

今天練習js操作ajax的時候一直無法取得來源網頁資訊，透過開發工具(f12)查看，發現了這個錯誤訊息! 找了一下，發現只要在chrome目標上加上『 –allow-file-access-from-files』即可。

JavaScript學習筆記-新增、刪除

<div class="content">

<div class="addlist">

<input type="text" class="text" required >

<input type="button" class="send" value="加入項目">

</div>

<ul class="list"></ul>

</div>

<script src='js/all.js'>

畫面放入一個textbox與button
按下button的時候會將textbox資料寫入ul\li

var list = document.querySelector('.list');

var sendData = document.querySelector('.send');

var data = JSON.parse(localStorage.getItem('listData')) ||[];

監聽項目

sendData.addEventListener('click',addData);

list.addEventListener('click',toggleDone);

updateList(data);

在寫入與刪除之後都會重新執行一次更新

function updateList(items){

str='';

var len=items.length;

for (var i = 0; len > i ;i++){

str+='<li><a href="#" data-index=' + i + '/>Del</a><span>' +items[i].content + '</span></li>';

}

list.innerHTML = str ;

}

新增

function addData(e){

e.preventDefault();

var txt = document.querySelector('.text').value;

var todo={

content:txt

};

data.push(todo);

updateList(data);

localStorage.setItem('listData',JSON.stringify(data));

}

刪除

function toggleDone(e) {

e.preventDefault();

if(e.target.tagName !=='A'){return};

var index = e.target.dataset.index;

data.splice(index,1);

localStorage.setItem('listData',JSON.stringify(data));

updateList(data);

}

JavaScript學習筆記-AJAX-JSON傳遞

var dd ={
  mail:'ddd@gmail.com',
  password:'1234'
}
//建立一個物件
var ajx = new XMLHttpRequest();
ajx.open('post','https://傳遞的網址',true);
ajx.setRequestHeader('content-type','application/json');
//設定格式為json
var cc=JSON.stringify(dd);
//將物件轉字串
ajx.send(cc);

JavaScript學習筆記-JSONP

在不允許跨網域存取的情況下要透過AJAX取的openData可透過JSONP來處理。
<script src="httpL//xxx.xxx.xxx&callback=getData"></script>

function getData(data){
    console.log(data);
}

透過callback，去取得所有data資料。
//jsonp只能透過get取得資料

javascript-學習筆記-AJAX-XMLHttpRequest

操作步驟

var ajx = new XMLHttpRequest();
//readyState=0

ajx.open('1','2',3);
//readyState=1

ajx.send(null);
//如果是get沒有送參數的話，可以直接給null

ajx.onload = function(){
//在讀取完成之後才執行;
    ajx.responseText;
    var str = ajx.JSON.parse(ajx.response.Text);
    //透過JSON.parse將取得字串轉陣列
}

ajx.status==200;
//可用來判斷狀態是否正常

open參數

• 1-格式，get、post
• 2-要取值的網址
• 3-同步false(資料回傳才會繼續執行)/非同步true(非同步，不待資料回傳就繼續執行了)

readyState

• 0-已產生XMLHttpRequest
• 1-已OPEN，未傳送資料
• 2-已傳送
• 3-LOADING
• 4-已取得資料

鼎新BPM取表單值判斷

最近主管提出需求，希望可以在簽核的時候，部份品號開頭的產品要會簽生產單位。
step1
確認該資料暫存來源，發現是放在一個隱藏物件中。

取值之後發現，是字串不是陣列…

step2
將資料轉陣列，這讓人困擾，最後想到了『eval』這個函數，看到什麼是什麼的特性!

step3
這樣子就可以直接取值來做判斷了。