1.在button上添加onclick事件
2.在<head>
的<script>
中添加函数
function modifyName(){
$.ajax({
type:"post", //方式
url:"${pageContext.request.contextPath}/xxxxxxxx/xxxxxx/modifyName", //寻址,处理页面
data:{"id":$("#proTypeNum").val(),"name":$("#proTypeName").val()}, //通过input的id获取
//datatype:"json",
success:function (data){
if(data.status==1){
//处理事件,如重新载入页面
//location.href="${pageContext.request.contextPath}/xxxxxxxx/xxxxxx/findAll
}
else{
..... //处理事件
}
}
})
}
3.返回值加入.jsp中
例1:
ajax请求(在<head>
的<script>
中添加函数):
$.ajax({
url: '${pageContext.request.contextPath}/company/companyManage.do',
type: 'post',
data : {"pageNo":pageNo,"pageSize":pageSize},
dataType:'json',
success: function(data){
//data中有列表
var list = {
companys: data.list,
pageNo:data.pageNum
};
//或 var companys=data.list; ?
});
获取到值之后,在<head>
中加入
<script type="text/html" id="data-template">
{{each companys as company index}} //模块语言?
<tr>
//company是一个类,其中包括companyName等变量
<td>{{company.companyName}}</td>
<td>{{company.financingInReturn}}</td>
<td>{{company.companyDetail}}</td>
<td>
<a class="" href="">
修改
<span class=""></span>
</a>
<a class="btn btn-primary btn-xs btn-success" href="/company/detail.do?id={{company.companyId}}&pageNo={{pageNo}}">
详情
<span class="glyphicon glyphicon-list-alt"></span>
</a>
<a class="btn btn-primary btn-xs btn-danger" href="javascript:;" onclick="deleteCompany('{{company.companyId}}','{{pageNo}}')">
删除
<span class="glyphicon glyphicon-remove"></span>
</a>
</td>
</tr>
{{/each}}
</script>
例2:
ajax请求(在<head>
的<script>
中添加函数):
function modifyName(){
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/backend/productType/modifyName",
data:{"id":$("#proTypeNum").val(),"name":$("#proTypeName").val()}, //通过id获取值
success:function (data){
if(data.status==1){
alter("成功");
location.href="${pageContext.request.contextPath}/backend/productType/findAll
}
);
}
else{
alter("失败");
}
}
})
}
获取到值之后:在<body>
的你想的位置
<c:forEach items="${data.list}" var="productType">
<tr>
<td>${productType.id}</td>
<td>${productType.name}</td>
<td>
<c:if test="${productType.status==1}">启用</c:if>
<c:if test="${productType.status==0}">禁用</c:if>
</td>
<td class="text-center">
<input type="button" class="btn btn-warning btn-sm doProTypeModify" value="修改"
onclick="showProductType(${productType.id})" >
<input type="button" class="btn btn-warning btn-sm doProTypeDelete" value="删除" onclick="showDelModel(${productType.id})">
<c:if test="${productType.status==1}">
<input type="button" class="btn btn-danger btn-sm doProTypeDisable" value="禁用">
</c:if>
<c:if test="${productType.status==0}">
<input type="button" class="btn btn-success btn-sm doProTypeDisable" value="启用">
</c:if>
</td>
</tr>
</c:forEach>
设置的样式长这样: