[js]json及dom数据绑定
jquery中文api(很棒): http://jquery.cuishifeng.cn
http://www.51xuediannao.com/javascript/jquery_ajax.html
$("li").html() // 相对text() 多了html标签
$("li").text() // li标签获取值
$("#input").val() // input/select等获取值
// 注: 如果参数为空, 则获取值, 如果参数不为空, 设置值.
$("#tb")[0].HTML+=
(2018-6-9 19:40:02) webstorm写ajax获取数据,绑定数据到页面
思路
1. 准备json
2. 前端jquery ajax获取数据
3. 绑定数据到html
test.json
[
{
"name": "maotai",
"age": "22"
},
{
"name": "maotai2",
"age": "23"
},
{
"name": "maotai3",
"age": "24"
}
]
test.html
关键点:
- 后端获取到数据的遍历, 组合字符串,我这里用的是js的for循环来搞的.
- 前端获取子字符串然后 $("#tb")[0].innerHTML += s; 我这里用最简单的字符串拼接的方式来操作dom的.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="#" id="frm">
<input type="text" name="username" id="username" placeholder="username">
<input type="text" name="age" id="age" placeholder="age">
<p id="btn">触发获取数据</p>
</form>
<table border="1px" id="tb">
<tr>
<td>username</td>
<td>age</td>
</tr>
</table>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function () {
bindFoo();
bindFoo2();
});
// 使用拼接字符串的方式, 先取出, 然后+=后绑定
function bindFoo() {
$.getJSON("./test.json", function (res) {
console.log(res);
let s = "";
for (let i = 0; i < res.length; i++) {
console.log(res[i].age);
s += "<tr>" +
"<td>" + res[i].name + "</td>" +
"<td>" + res[i].age + "</td>" +
"</tr>";
}
console.log(s);
$("#tb")[0].innerHTML += s;
})
}
function bindFoo2() {
$("#btn").on("click", function () {
let res = $("#frm").serialize();
console.log(res);
})
}
</script>
</body>
</html>
附: 关于表格的thead tbody tfoot: http://www.w3school.com.cn/tags/tag_tbody.asp
option:
titile***: 标题
toolbox: 工具箱
tooltip: 提示
legend: 图标
data: 对应series的几条数据
xAxis***: x轴
yAxis***: y轴
series*** 数据
name:
type
data
js:
字符串
拼接
jion split
索引取值
长度
toFixed
数组
toString
arr.forEach
arr.map
arr.filter
arr.reduce
对象
find
- 准备json
- 前端jquery ajax获取数据
- 绑定数据到html
text()
html
jquery.each两种用法
$.each() //使用jq的each函数
$("li").each()
$("#tb")[0].HTML //获取子html
$("#tb").text() //获取li标签里的值
<ul id="app">
<li id="li1">l1</li>
<li>l2</li>
<li>l3</li>
</ul>
<button id="btn">获取值</button>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function () {
$("#btn").on("click", function () {
$("li").each(function () {
alert($(this).text())
})
});
})
</script>
传统的for可以替代为$.each更方便
function bindFoo() {
$.getJSON("./test.json", function (res) {
// console.log(res);
let s = "";
/* for (let i = 0; i < res.length; i++) {
console.log(res[i].age);
s += "<tr>" +
"<td>" + res[i].name + "</td>" +
"<td>" + res[i].age + "</td>" +
"</tr>";
}*/
let res2 = $.each(res, function (index, item) {
let tmp = item;
});
console.log(res2);
// console.log(s);
// $("#tb")[0].innerHTML += s;
})
}
javascript中的json的2个方法
<script>
var obj = {name: "maotai", age: 22}; // js中普通对象
var jsonObj = {"name": "maotai", "age": 22}; // json是普通对象将属性名用双引号包起来
</script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数据绑定以及DOM回流</title>
<style>
*{ margin: 0; padding: 0; list-style: none; }
.box{ width: 400px; margin: 30px auto; border: 2px solid #ccc; border-radius: 5px; padding: 20px; box-sizing: border-box; }
.box li { position: relative; padding-left: 20px; height: 30px; line-height: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.box li span{ display: inline-block; line-height: 20px; text-align: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid darkblue; background: pink; color: darkmagenta; }
</style>
</head>
<body>
<div class="box J-box" id="J-box">
<ul>
<li><span>1</span>人社部：降低养老保险缴费缴费 合并生育医疗险</li>
<li><span>2</span>内部矛盾公开公开公开 发怒拒见头目</li>
<li><span>3</span>"东莞一哥一哥"刘志庚黑色往事 曾称扫黄要有度</li>
<li><span>4</span>铁路运行图行图调整5月15日实施 高铁将增开“夜班车”</li>
</ul>
</div>
</body>
</html>
<script src="json-bind.js"></script>
<script>
//获取我们要操作的元素
var oDiv = document.getElementById('J-box');
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLis = oDiv.getElementsByTagName('li'); //我这会获取的时候是不是新添加的
for(var i=0; i<oLis.length; i++){
oLis[i].onmouseover = function (){
this.style.backgroundColor = 'gray';
}
oLis[i].onmouseout = function (){
this.style.backgroundColor = '';
}
}
//添加新闻
/* for(var i=0; i<ary.length; i++){ //循环创建数组长度这么多元素，并且追加到ul里
var li = document.createElement('li');
//<li><span>3</span>"东莞一哥一哥"刘志庚黑色往事 曾称扫黄要有度</li>
li.innerHTML = '<span>'+(i+5)+'</span>'+ary[i].title ;
oUl.appendChild(li);
}*/
//通过appendchild这种方式添加进来的并没有把已经存在事件改变，但是引起了DOM回流
//拼接字符串的方式
/* var str = "";
for(var i=0; i<ary.length; i++){
str += '<li>';
str += '<span>';
str += (i+5);
str += '</span>';
str += ary[i].title;
str += '</li>';
}*/
//oUl.innerHTML = oUl.innerHTML /*把oUl这个dom对象的innerHTML属性读取然后再拼接上str这个字符串*/+ str;
//用字符串拼接的方式只引起了一次回流，但是原来存在的元素事件或其他属性全都改变了
/*
* DOM的回流和重绘：
* 回流：我们网页内的元素的增加和删除，元素的位置的改变都会引起我们的DOM回流
* 重绘：元素的背景，字体，边框的粗细等会引起DOM的重绘
*
* */
//利用文档碎片
var frg = document.createDocumentFragment(); //可以理解为是一个临时的容器
//console.dir(frg);
for(var i=0; i<ary.length; i++){
//需要先创建一个li标签
var li = document.createElement('li');
li.innerHTML = '<span>' + (i+5) + '</span>' + ary[i]['title'];
//把刚创建的这个li放到文档碎片frg中
frg.appendChild(li);
}
//把这个文档碎片加到oul中
oUl.appendChild(frg);
frg = null;
/*
* DOM的动态数据绑定,dom中元素的数量和外部的数据多少联系起来，就是动态的数据绑定
*
*
* */
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
<style>
.icon {
margin: 0 5px;
}
</style>
</head>
<body>
<div>
<select id="sel" multiple>
<option value="1">上海</option>
<option value="12">北京</option>
<option value="11">广州</option>
<option value="111">沙河</option>
</select>
<input type="button" value="提价" id="testAjaxList" />
</div>
<div class="container">
<div style="padding: 20px 0;">
<a class="btn btn-primary" id="addBtn">添加</a>
<a class="btn btn-danger">删除</a>
</div>
<div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
{% for row in stu_list %}
<tr nid="{{ row.id }}">
<td na="nid">{{ row.id }}</td>
<td na="user">{{ row.username }}</td>
<td na="age">{{ row.age }}</td>
<td na="gender">{{ row.gender }}</td>
<td na="cls_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</td>
<td>
<a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">创建学生</h4>
</div>
<div class="modal-body">
<form id="fm" class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="age" placeholder="年龄">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="0"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cls_id">
{% for row in cls_list %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endfor %}
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<span id="errorMsg" style="color: red;"></span>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="btnSave">保存</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="alert alert-danger" role="alert">
<h3>删除学生信息？</h3>
<div>...<input style="display: none;" type="text" id="delNid" /></div>
<div>
<button type="button" class="btn btn-default">取消</button>
<button id="delConfirm" type="button" class="btn btn-danger">确定</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="eidtModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">编辑学生</h4>
</div>
<div class="modal-body">
<form id="fm" class="form-horizontal">
<input type="text" name="nid" style="display: none" />
<div class="form-group">
<label for="username" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="user" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="age" placeholder="年龄">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="0"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cls_id">
{% for row in cls_list %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endfor %}
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<span id="errorMsg" style="color: red;"></span>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="btnEditSave">保存</button>
</div>
</div>
</div>
</div>
<script src="/static/js/jquery-3.1.1.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>
$(function () {
bindEvent();
bindSave();
bindDel();
bindDelConfirm();
bindEdit();
bindEditConfirm();
bindTestAjaxList();
});
function bindTestAjaxList() {
$('#testAjaxList').click(function () {
var values = $('#sel').val();
$.ajax({
url: '/test_ajax_list/',
type: 'POST',
data: {'k2':'root','k3': 123},
traditional:true,
success:function (arg) {
console.log(arg);
}
})
})
}
/*
编辑提交事件
*/
function bindEditConfirm() {
$('#btnEditSave').click(function () {
var postData = {};
$('#eidtModal').find('input,select').each(function () {
var v = $(this).val();
var n = $(this).attr('name');
if(n=='gender'){
if($(this).prop('checked')){
postData[n] = v;
}
}else{
postData[n] = v;
}
});
$.ajax({
url: '/edit_student/',
type: 'POST',
data: postData,
dataType: 'JSON',
success:function (arg) {
if(arg.code == 1000){
window.location.reload();
}else{
alert(arg.message);
}
}
})
})
}
/*
绑定编辑按钮点击事件
*/
function bindEdit() {
$('#tb').on('click','.edit-row',function () {
$('#eidtModal').modal('show');
//1.获取当前行的所有数据
// 将数据赋值到对应的对话框的指定位置
$(this).parent().prevAll().each(function () {
// cls_id
var v = $(this).text();
var n = $(this).attr('na');
if(n=='cls_id'){
var cid = $(this).attr('cid');
$('#eidtModal select[name="cls_id"]').val(cid);
}else if(n=='gender'){
// v=True
if(v=='True'){
$('#eidtModal :radio[value="1"]').prop('checked',true);
}else{
$('#eidtModal :radio[value="0"]').prop('checked',true);
}
}else {
// n=age
// v=12
$("#eidtModal input[name='"+ n +"']").val(v)
}
});
})
}
function bindDelConfirm() {
$('#delConfirm').click(function () {
var rowId = $('#delNid').val();
console.log(rowId);
$.ajax({
url: '/del_student/',
type: 'GET',
data: {'nid': rowId},
success:function (arg) {
var dict = JSON.parse(arg);
if(dict.status){
$('tr[nid="'+ rowId+'"]').remove();
}
$('#delModal').modal('hide');
}
})
});
}
function bindDel() {
$('#tb').on('click','.del-row',function () {
$('#delModal').modal('show');
// 回去当前行的ID
var rowId = $(this).parent().parent().attr('nid');
$('#delNid').val(rowId);
})
}
function bindEvent() {
$('#addBtn').click(function () {
$('#addModal').modal('show');
})
}
function bindSave() {
$('#btnSave').click(function () {
var postData = {};
$('#addModal').find('input,select').each(function () {
var v = $(this).val();
var n = $(this).attr('name');
if(n=='gender'){
if($(this).prop('checked')){
postData[n] = v;
}
}else{
postData[n] = v;
}
});
/*
postData = {
username: 'asdf',
age:18,
gender: 1,
cls_id: 2
}
*/
$.ajax({
url: '/add_student/',
type: 'POST',
data: postData,
success:function (arg) {
// arg是字符串
// JSON.parse将字符串转换成字典， json.loads
var dict = JSON.parse(arg);
if(dict.status){
/*
postData = {
username: 'asdf',
age:18,
gender: 1,
cls_id: 2
}
自增id = dict.data
*/
createRow(postData,dict.data);
$('#addModal').modal('hide');
// window.location.reload();
}else {
$('#errorMsg').text(dict.message);
}
}
})
});
}
function createRow(postData,nid) {
var tr = document.createElement('tr');
$(tr).attr('nid',nid);
var tdId = document.createElement('td');
tdId.innerHTML = nid;
$(tr).append(tdId);
var tdUser = document.createElement('td');
tdUser.innerHTML = postData.username;
$(tr).append(tdUser);
var tdAge = document.createElement('td');
tdAge.innerHTML = postData.age;
$(tr).append(tdAge);
var tdGender = document.createElement('td');
if(postData.gender == "0"){
tdGender.innerHTML = 'False';
}else{
tdGender.innerHTML = 'True';
}
$(tr).append(tdGender);
var tdClass = document.createElement('td');
var text = $('select[name="cls_id"]').find('option[value="'+ postData.cls_id +'"]').text();
tdClass.innerHTML = text;
$(tr).append(tdClass);
var tdHandle = '<td> <a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a> </td>';
$(tr).append(tdHandle);
$('#tb').append(tr);
}
</script>
</body>
</html>
浙公网安备 33010602011771号