最近前端崩了。。不得不亲自爬过来学习写Jquery了。。
进入页面时,不需要任何点击,就主动通过Ajax发送post请求,并接收返回数据,在success中进行页面数据的填充
返回的json格式为
{
code: 0,
msg: "成功",
data:- {
name: "jjjj",
email: "1342746626@qq.com",
password: "7777777",
phone: "222333",
address: "sdsd",
birthday: "2018-01-02",
icon: "/usericon/1525692516504IWZ/2018-05-10/739c9a89-c539-49dd-baa9-d08999644c7b.png"
}
}
<script type="text/javascript">
$(function(){
initData();
});
//加载初始化数据
function initData(){
$.ajax({
type:'GET',
dataType: "json",
url:"../user/center",
/*data:{
email:$("#email").val(),
password:$("#password").val()
},*/
success:function(res){
alert("加载数据");
if(res.code=="0"){
console.log(res);
alert(res.msg);
var info = res.data;
$("#name").attr("value", info.name);
$("#email").attr("value", info.email);
$("#password").attr("value", info.password);
$("#phone").attr("value", info.phone);
$("#address").attr("value", info.address);
$("#birthday").attr("value", info.birthday);
$("#picture").attr("src", info.icon);
}else{
alert("用户信息不合法,或邮箱已被占用");
}
},
error:function(){
// $("#test").html("发生错误:"+jqXHR.status);
alert("发生错误");
}
});
}
</script>
<form id="ajaxsubmit" method="post" class="form-search">
<input type="text" value="姓名" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = '姓名';}" required="" id="name" name="name" style="margin-top:10px;" placeholder="姓名">
<input type="text" value="Email" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = 'Email';}" required="" id="email" name="email" style="margin-top:10px;" placeholder="Email">
<div class="col-md-12" style="border:1px solid gainsboro;margin-top:10px;" >
<input type="password" value="123456" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = '密码';}" required="" id="password" name="password" style="border:none;height:40px;width:80%;background-color: white" placeholder="123456" disabled="true" class="col-md-10 input-small">
<input type="button" value="修改" id="btn" class="col-md-2 btn"style="width:20%;margin-top:2px;" >
</div>
<input type="text" value="联系电话" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = '联系电话';}" required="" id="phone" name="phone" style="margin-top:10px;" placeholder="联系电话">
<input type="text" value="家庭住址" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = '家庭住址';}" required="" id="address" name="address" style="margin-top:10px;" placeholder="家庭住址">
<div style="margin-top:10px;border:1px solid lightgrey;height:40px;background-color: #f5f5f5;line-height:40px;" class="col-md-12">
<span class="col-md-3" style="padding-left:0;">出生年月:</span>
<input type="date" id="birthday"/>
</div>
<div id="box-01" >
<input type="submit" value="完善成功" id="submit" style="margin-top:30px;">
</div>
</form>
<form id="upload" method="" enctype="multipart/form-data" style="text-align: center;height:100px;padding-top:20px;padding-left:10px;padding-right:10px;">
<input id="pic" name="file" accept="image/*" value="选择图片" type="file" style="border: 1px solid white;margin-left:20px;height:30px;line-height:30px;width:100%;border-radius:20px;"/><!--style="display: none"-->
<h4 style="text-align: center"><input id="upload_button" type="button" value="上传头像" style="border: 1px solid white;background-color: #d9703e;color:white;height:30px;line-height:30px;width:100px;border-radius:20px;"/></h4>
</form>