form表單只提交數據而不進行頁面跳轉的解決方案

轉載

　　將數據提交到saveReport（form的action指向）頁面，但是頁面又不進行跳轉，即保持當前頁面不變呢？利用jquery的ajaxSubmit函數以及form的onsubmit函數完成

　　一般的form提交操作寫法為：

<form action="saveReport.htm" method="post"> 
　　…… 
　　<input type="submit" value="保存報告"/> 
</form> 

 

<form action="{{ url_for('zapapi.zap_task_delete') }}" method="post" style="display: inline">
　　<input  name="session_name" value="{{ i[2] }}" type="hidden">
　　<input  name="zap_server_addr" value="{{ i[3] }}" type="hidden">
　　<button id="scan_log_delete{{ i[2] }}" class="btn red" type="submit" name="delete" value="delete"><i class="icon-remove"></i> 刪除</button>
</form>

點擊submit按鈕或直接回車可以將數據提交到saveReport頁面，但是提交后也會跳轉到saveReport頁面 

如何做到 
將數據提交到saveReport（form的action指向）頁面，但是頁面又不進行跳轉，即保持當前頁面不變呢？？ 
這種需要在load一個頁面的時候尤其迫切。 

利用jquery的ajaxSubmit函數以及form的onsubmit函數完成，如下： 

 

<form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();"> 
　　<input type="submit" value="保存報告"/> 
</form> 

 

<form id="stopstart{{ i[2] }}" onsubmit="return Stop{{ i[2] }}()" style="display: inline">
    <button id="startstop{{ i[2] }}" class="btn yellow" type="submit" name="stop" value="stop"><i id="start_stop{{ i[2] }}" class="icon-stop"></i> 停止</button></form>

 

form增加一個id用於在jquery中調用，增加一個onsubmit函數用於submit前自己提交表單 

saveReport對應函數為 ：

<script>
function saveReport() { 
// jquery 表單提交 
　　$("#showDataForm").ajaxSubmit(function(message) { 
　　// 對於表單提交成功后處理，message為提交頁面saveReport.htm的返回內容 
　　}); 

return false; // 必須返回false，否則表單會自己再做一次提交操作，並且頁面跳轉 
}
</script>

 

<script>
            /**
             * @return {boolean}
             */
            function Stop{{ i[2] }}() {
                $.ajax({
                type: "post",
                url: "{{ url_for('zapapi.zap_task_stop') }}",
                data: "session_name={{ i[2] }}&zap_server_addr="+$('#server{{ i[2] }}').text(),
                success: function(msg) {
                    if(msg.success){
                        alert(msg.message)
                        $('#report{{ i[2] }}').removeAttr('disabled');
                        $('#startstop{{ i[2] }}').text("啟動");
                        $('#startstop{{ i[2] }}').removeClass('yellow');
                        $('#startstop{{ i[2] }}').addClass('blue');
                        $('#startstop{{ i[2] }}').prepend('<i id="start_stop{{ i[2] }}"></i>');
                        $('#start_stop{{ i[2] }}').addClass('icon-play');
                        $('#stopstart{{ i[2] }}').attr({"onsubmit": "return Start{{ i[2] }}()"})

                        $('#basic_opener{{ i[2] }}').text("申請");
                        $('#basic_opener{{ i[2] }}').removeClass('green');
                        $('#basic_opener{{ i[2] }}').addClass('gray');
                        $('#basic_opener{{ i[2] }}').prepend('<i id="icon{{ i[2] }}"></i>');
                        $('#icon{{ i[2] }}').addClass('icon-plus');
                        $('#server{{ i[2] }}').text("");
                        $('#form{{ i[2] }}').removeAttr('onsubmit');
                        $('#form{{ i[2] }}').attr({"onsubmit": "return ZAP_SERVER_APPLY{{ i[2] }}()"});

                    } else {
                        alert(msg.message)
                    }
                    }
                });
            return false;
            }
        </script>