情況,頁面需要保存數據,然後使用ajax請求後臺,根據返回碼提示保存成功還是失敗。
先上代碼
jsp頁面代碼:
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="/WEB-INF/jsp/index/head.jsp"/>
<div class="acs-body">
<jsp:include page="/WEB-INF/jsp/common/left.jsp"/>
<div class="acs-body-right">
<link rel="stylesheet" href="/css/setting/project-info.css">
<div class="list">
<div class="acs-title">項目信息
<button class="glyphicon acs-return-btn" onclick="window.history.back()">返回</button>
</div>
<div class="acs-content-list">
<div class="acs-table-box ">
<form name="list-form" class="layui-form projectInfo" type="POST" data-target="acs-body-right" action="${pageContext.request.contextPath}/projectInfo/save" >
<p><span style="font-family:'微軟雅黑';">說明:此信息將在咻咻開門APP上對認證用戶展示。</span></p>
<br><br>
<div class="form-item">
<label>聯繫人</label>
<input type="text" id="contactName" name="contactName" value="${projectInfo.contactName}">
</div>
<div class="form-item">
<label>聯繫電話</label>
<input type="text" id="contactPhone" name="contactPhone"
value="${projectInfo.contactPhone}">
</div>
<div class="form-item">
<label> </label>
<button class="acs-confirm-btn" onclick="saveProjectInfo();">保存</button>
</div>
<input type="hidden" id="projectId" name="projectId" value="${projectInfo.projectId}">
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/js/setting/projectInfo.js"></script>
</div>
<jsp:include page="/WEB-INF/jsp/index/foot.jsp"/>
js代碼:
function saveProjectInfo(){
var contactName = $("#contactName").val();
var contactPhone = $("#contactPhone").val();
var projectId = $("#projectId").val();
var data = {
contactName: contactName,
contactPhone: contactPhone,
projectId: projectId
};
$.post("/projectInfo/save", data, function (result) {
if (result.code === 0) {
acs.info("保存成功"); // 提示成功
$.pjax({
url: '/projectInfo/index',
data:{},
container: '.acs-body-right',//刷新的容器
fragment: '.acs-body-right',//獲取的容器
type: 'GET'
});
} else {
acs.warn(result.msg); // 提示失敗
}
});
}
java Controller 代碼
@RequestMapping("save")
@ResponseBody
public Result saveProjectInfo(ProjectInfoApi projectInfoApi) {
int num =projectInfoService.saveProjectInfo(projectInfoApi);
if(num==0){
ResultUtil.getFailResult(1,"保存失敗");
}
return ResultUtil.getSuccessResult();
}
}
就是這麼一個代碼情況,結果就是不能正確提示,後來根據頁面F12提示才找到原因,粗心的我在頁面中更沒有引用js進去。並且頁面的form表單action也會影響到button的onclick方法。引入js將form的action刪掉就可以了。
沒找到原因之前,還以爲我使用ajax的姿勢不對。寫代碼還是要細心。立貼自省~好記性不如爛筆頭。