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

时间:2021-11-03 20:23:31

转载

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