form表单只提交数据而不进行页面跳转的解决方案

Posted 2020-10-04 沧海一粟，何以久远

转载

　　将数据提交到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>