update,
This commit is contained in:
louiscklaw
56
it114105/itp4513/Lab08/Lab08_1.html
Normal file
56
it114105/itp4513/Lab08/Lab08_1.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Untitled Document</title>
|
||||
<script src="jquery/jquery-2.1.4.js"></script>
|
||||
</head>
|
||||
<script>
|
||||
function readXML(){
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.onreadystatechange= function(){
|
||||
if(xmlhttp.readyState==4 && xmlhttp.status==200){
|
||||
convertToJSONArray(xmlhttp.responseXML);
|
||||
}
|
||||
}
|
||||
xmlhttp.open("GET","cparts.xml",true);
|
||||
xmlhttp.send();
|
||||
}
|
||||
function convertToJSONArray(xml){
|
||||
var cpartsArray = new Array();
|
||||
var parts = xml.getElementsByTagName("part");
|
||||
for(var i=0; i<parts.length;i++){
|
||||
var item = parts[i].getElementsByTagName("item")[0].childNodes[0].nodeValue;
|
||||
var manufacturer = parts[i].getElementsByTagName("manufacturer")[0].childNodes[0].nodeValue;
|
||||
var model = parts[i].getElementsByTagName("model")[0].childNodes[0].nodeValue;
|
||||
var cost = parts[i].getElementsByTagName("cost")[0].childNodes[0].nodeValue;
|
||||
cpartsArray[i] = new cpart(item,manufacturer,model,cost);
|
||||
}
|
||||
document.getElementById("demo01").innerHTML = JSON.stringify(cpartsArray);
|
||||
}
|
||||
|
||||
function cpart(item,manufacturer,model,cost){
|
||||
this.item = item;
|
||||
this.manufacturer = manufacturer;
|
||||
this.model= model;
|
||||
this.cost = cost;
|
||||
}
|
||||
function jsonToTable(){
|
||||
var jsonStr = document.getElementById("demo01").innerHTML;
|
||||
var obj = JSON.parse(jsonStr);
|
||||
var table = "<table border=1><tr><th>Item</th><th>Manufacturer</th><th>Model</th><th>Cost</th></tr>";
|
||||
for(var i=0; i<obj.length;i++){
|
||||
table += "<tr><td>"+obj[i].item+"</td><td>"+obj[i].manufacturer+"</td><td>"+obj[i].model+"</td><td>"+obj[i].cost+"</td></tr>";
|
||||
}
|
||||
table+="</table>";
|
||||
document.getElementById("demo02").innerHTML = table;
|
||||
}
|
||||
</script>
|
||||
<body>
|
||||
<h1>Read from cparts.xml</h1>
|
||||
<button onClick="readXML()">user JSON.stringify()</button>
|
||||
<p id="demo01"></p>
|
||||
<button onClick="jsonToTable()">use JSON.parse()</button>
|
||||
<p id="demo02"></p>
|
||||
</body>
|
||||
</html>
|
||||
27
it114105/itp4513/Lab08/Lab08_2.php
Normal file
27
it114105/itp4513/Lab08/Lab08_2.php
Normal file
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Lab8 Task 2</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<?php
|
||||
$cparts = simplexml_load_file('cparts.xml');
|
||||
$jsontext = json_encode($cparts);
|
||||
echo "<p><b>json_encode(): display cparts.xml in json format</b></p>$jsontext";
|
||||
|
||||
$compparts = json_decode($jsontext, true);
|
||||
echo "<p><b>json_decode(): convert json to PHP variable</b></p>";
|
||||
echo "<table border=1><tr><th>Item</th><th>Manufacturer</th><th>Model</th><th>Cost</th></tr>";
|
||||
$parts = $compparts["part"];
|
||||
for($i=0; $i<count($parts);$i++){
|
||||
printf("<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>",$parts[$i]["item"],$parts[$i]["manufacturer"],$parts[$i]["model"],$parts[$i]["cost"]);
|
||||
}
|
||||
echo "</table>";
|
||||
|
||||
|
||||
|
||||
?>
|
||||
</body>
|
||||
</html>
|
||||
5
it114105/itp4513/Lab08/Lab08_3a.php
Normal file
5
it114105/itp4513/Lab08/Lab08_3a.php
Normal file
@@ -0,0 +1,5 @@
|
||||
<?php
|
||||
$cpart = simplexml_load_file('cparts.xml');
|
||||
echo json_encode($cpart);
|
||||
|
||||
?>
|
||||
43
it114105/itp4513/Lab08/Lab08_3b.html
Normal file
43
it114105/itp4513/Lab08/Lab08_3b.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Lab8 Task 3b</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/Lab08_Q3_layout.css">
|
||||
<script src="jquery/jquery-2.1.4.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: 'Lab08_3a.php',
|
||||
dataType: 'json',
|
||||
success: function(result){
|
||||
$.each(result.part, function(key, value){
|
||||
$('tbody').append($('<tr>')).append($('<td>').text(value.item)).append($('<td>').text(value.manufacturer)).append($('<td>').text(value.model)).append($('<td>').text(value.cost));
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
error: function(err){
|
||||
console.log("error" + err);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Table of Computer Parts</h2>
|
||||
<table id="tableID" border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Manufacturer</th>
|
||||
<th>Model</th>
|
||||
<th>Cost in $</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
18
it114105/itp4513/Lab08/css/Lab08_Q3_layout.css
Normal file
18
it114105/itp4513/Lab08/css/Lab08_Q3_layout.css
Normal file
@@ -0,0 +1,18 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
h2{
|
||||
font-size: 28px;
|
||||
color: orchid;
|
||||
border-bottom: 3px solid #EE82EE;
|
||||
}
|
||||
table, th, td{
|
||||
font-size: 20px;
|
||||
border: 1px solid grey;
|
||||
border-collapse: collapse;
|
||||
padding: 5px;
|
||||
}
|
||||
#tableID thead{
|
||||
background-color: #ffe4e1;
|
||||
color: orchid;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user