初次接触ssm笔记—ajax前后端数据交互
使用ajax向后端传递数据
<div class="header">
<div class="row">
<div class="data">
<span>用户名:</span>
<input type="text" id="username" name="username" value="Admin" placeholder="不填也有默认值">
</div>
<div class="data">
<span>密码:</span>
<input type="password" id="password" name="password" placeholder="必填">
</div>
</div>
<div class="row">
<div class="data">
<button class="btn" id="submit">提交</button>
</div>
</div>
</div>
<script type="text/javascript">
$('#submit').on('click', function () {
$.ajax({
url:'http://localhost:8088/demo/createAdminInfo',
type:'POST',
dataType:'json',
data:{
name:$('#username').val(),
password:$('#password').val()
}
})
})
</script>*
将json数据填充至表格
<table id="table">
</table>
<script language="JavaScript">
var url = "${pageContext.request.contextPath}/demo/queryAdminInfoBySelective";
$(document).ready(function(){
$.ajax({
url:url,
type:'POST',
dataType:'JSON',
data:{
id:$('#search').val()
},
success: function (data) {
var obj = '';
var dataList = eval(data);
for (var i in dataList) {
obj = obj + '<tr>';
obj +='<td>' + dataList[i].name + '</td>';
obj +='<td>' + dataList[i].age+ '</td>';
obj +='<td>' + dataList[i].password+ '</td>';
obj +='<td>' + dataList[i].local+ '</td>';
obj +='<td>' + dataList[i].sex+ '</td>';
obj +='<td>' + dataList[i].status+ '</td>';
obj = obj + '</tr>';
}
$('#table').append(obj);
},
error: function () {
alert("服务器休息呢!别吵吵!!!");
}
});
});
</script>