Checkthis's Notes: Javascript

顯示具有 Javascript 標籤的文章。顯示所有文章

2017年11月30日星期四

Javascript - 新增element

var tag = document.createElement('div');
var img = document.createElement('img');
img.setAttribute('class','bobo')
tag.appendChild(img);
document.getElementById("mydiv").appendChild(tag);

2017年11月7日星期二

透過XMLHttpRequest API 載入JSON

宣告XMLHttpRequest物件
var request = new XMLHttpRequest();

設定請求
request.open('GET', requestURL);

設定取得的格式
request.responseType = 'json';
request.send();

處理取得的JSON
request.onload = function() {
var superHeroes = request.response;
populateHeader(superHeroes);

}

function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj['squadName'];
header.appendChild(myH1);

var myPara = document.createElement('p');
myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
header.appendChild(myPara);
}

參考資訊
https://www.fooish.com/jquery/dom-manipulation.html

2017年11月6日星期一

JQuery - AJAX筆記

本筆記將實作JQuery AJAX + Django 按鈕觸發AJAX

# ajax.html

<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$( document ).ready(function() {
$("#btn1").on('click', function () {
$.ajax({
url: 'http://localhost:8000/basic_app/get_json_data/',
type: 'get',
data: {},
dataType: 'json',
timeout: 10000,
success: function(result) {
alert('sucess');
$('#txt1').html(result.result);
},
error: function() {
$('#txt1').html("error");
}
});
});
});
</script>
</head>
<body>
<h1>Ajax</h1>
<h1 id="txt1" >ready</h1></br>
<button type="button" id="btn1">turn off </button>
</body>
</html>

# views

from django.http import HttpResponse
import json

def get_json_data(request):
a = {
'result' : 'success',
}
return HttpResponse(json.dumps(a), content_type='application/json')

# urls.py

url(r'^get_json_data/', views.get_json_data,name='get_json_data'),

完成

2017年11月30日 星期四

Javascript - 新增element

2017年11月7日 星期二

Javascript - JSON筆記

2017年11月6日 星期一

JQuery - AJAX筆記

2017年11月30日星期四

2017年11月7日星期二

2017年11月6日星期一