数据绑定：
<script type="text/javascript">
$(function() {
get_shouhuo_detail();
})
function get_shouhuo_detail() {
//条件验证
//比如验证是否登陆，未登陆就跳转到登陆页面
//接口：获取收货地址信息
//方法：get_shouhuo_detail
//参数：
//user_id:1
//...
var data = {
code: 1,
msg: "请求成功",
data: {
shouhuoren: "wxd",
tel: "123456789",
dizhi: "成都"
}
};
//code：1成功 0失败
//数组：{code:1,msg:"",data:[{title:""},{title:""}]};
if(data.code == 1) {
var item = data.data;
$("#shouhuoren").val(item.shouhuoren);
$("#tel").val(item.tel);
$("#dizhi").val(item.dizhi);
} else {
alert(data.msg);
}
}
function set_shouhuo_detail() {
//条件验证
//比如验证是否登陆，未登陆就跳转到登陆页面
//获取页面信息
//验证信息
//接口：设置用户信息
//方法：set_shouhuo_detail
//参数：
//user_id:1
//
var data = {
code: 1,
msg: "请求成功"
};
if(data.code == 1) {
alert(data.msg);
//其他操作
} else {
alert(data.msg);
}
}
</script>
</head>
<body class="user_qqq">
<form action="" method="post">
<div class="q">
<span class="w">收货人</span>
<input type="text" id="shouhuoren" value="" placeholder="请输入姓名" />
</div>
<div class="q">
<span class="w">联系电话</span>
<input type="text" id="tel" value="" placeholder="请输入手机号码" />
</div>
<div class="q">
<span class="w">收货地址</span>
<input type="text" id="dizhi" value="" placeholder="请输入详细地址信息" />
</div>
<a class="an_niu r" type="submit" href="#">确定</a>
</form>
</body>
列表循环的数据绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
get_gold_coin_list();
$(".picts").click(function() {
var ischeck = $(this).attr('ischeck');
if(ischeck == 0) { //点击企业或个人图标
$(".picts").attr('ischeck', 0);
$(".picts").attr('src', 'img/60810.png');
$(this).attr('ischeck', 1);
$(this).attr('src', 'img/160836.png');
}
});
$(".s").click(function(){
location.href="company_myself.html";
})
})
function get_gold_coin_list(){
//条件验证
//比如验证是否登陆，未登陆就跳转到登陆页面
//接口：获取我的金币列表
//方法：get_gold_coin_list
//参数：
//user_id:1
//...
var data = {code:1,msg:"请求成功",data:{
gold_coin:"200",
list:[
{price:"99",gold_coin:"1000"},
{price:"499",gold_coin:"5000"},
{price:"999",gold_coin:"10000"},
]
}
};
//code：1成功 0失败
//数组：{code:1,msg:"",data:[{title:""},{title:""}]};
if (data.code == 1) {
var item = data.data;
$("#gold_coin").html(item.gold_coin);
var html = "";
var resData = item.list;
for(var i = 0; i < resData.length; i++) {
var item = resData[i];
html +=`
<div class='aa'>
<div class="c">
<img class="i picts" ischeck="0" src='img/0529174827.png'></img>
<div class="t">¥${item.price} </div>
<div class="a2 ">${item.gold_coin}个金币</div>
</div>
</div>`;
}
var $w = $(".w");
$w.html(html);
}else{
alert(data.msg);
}
}
</script>
</head>
<body class="company_fff">
<form action="" method="post">
<div class="a">
<div class="a1">我的金币</div>
<div class="a1"><span class="a3" id="gold_coin"></span><span class="a2">个</span></div>
<div class="a1 r">剩余金币</div>
<span class="a4">购买记录</span>
</div>
<div class="w">
</div>
<div class="s" type="submit">充值</div>
</form>
</body>
</html>