标签：move 保存 提交表单 basic ext inpu www ddc 操作
将数据提交到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>
标签：move 保存 提交表单 basic ext inpu www ddc 操作
原文地址：http://www.cnblogs.com/shengulong/p/7418348.html
