記錄一個自己犯的錯:ajax請求沒有獲得返回碼給出提示的問題

情況,頁面需要保存數據,然後使用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>&nbsp;</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的姿勢不對。寫代碼還是要細心。立貼自省~好記性不如爛筆頭。

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章