<h1>Demo list user bằng ajax</h1>
<table id="tb-list-user" border="1" cellpadding ="10">
<tr>
<th>ID</th>
<th>Username</th>
<th>Email</th>
<th>Action</th>
</tr>
</table>
<script>
// phần này để viết lệnh javascript
var url = "http://localhost:8074/FA2020/demo-mvc-1/?controller=user&action=ajax-list";
var bang = document.querySelector("#tb-list-user");
// hàm fetch có sẵn trong javascript dùng để gọi lên server
fetch(url, {
method: "GET"
}).then(function(res) {
return res.json(); // chuyển chuỗi nhận được thành đối tượng json
}).then(function(data) {
// các lệnh xử lý cho dữ liệu ở đây: các công việc hiển thị.
console.log(data);
// duyệt toàn bộ dữ liệu lấy về
data.forEach( function (row, index, arr){
let tr = document.createElement("tr"); // tạo 1 thẻ dòng
let td1 = document.createElement("td"); // tạo thẻ td
let td2 = document.createElement("td");
let td3 = document.createElement("td");
let td4 = document.createElement("td");
td1.innerHTML = row.id; // gán nội dung cho thẻ td
td2.innerHTML = row.username;
td3.innerHTML = row.email;
td4.innerHTML = "<a href='javascript:void(0)' onclick='SetPass(" + row.id+")'>Set Password</a>";
tr.appendChild(td1);// gắn thẻ td vào thẻ dòng
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
bang.appendChild(tr);// gắn thẻ dòng vào bảng
});
});
function SetPass(id_user){
var new_pass = prompt("Nhập pass mới");
var dataPost = {
id: id_user,
passwd: new_pass
};
// hàm fetch có sẵn trong javascript dùng để gọi lên server
var url_post = "http://localhost:8074/FA2020/demo-mvc-1/?controller=user&action=ajax-set-pass";
fetch(url_post, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dataPost), // chuyển dữ liệu object trên thành chuỗi json
})
.then(function(response){
console.log(response.body);
return response.json()
}) // chuyển kết quả trả về thành json object
.then((data) => {
// bạn có thể làm gì đó với kết quả cuối cùng này thì làm
if(data.status == 1){
alert("Update thanh cong");
}
console.log('Success:', data); // ghi log kết quả hoàn thành
})
.catch((error) => {
console.error('Error:', error); // ghi log nếu xảy ra lỗi
});
}
</script>