java提交表单后页面不刷新_js - form表单提交不刷新

你们已经发现了, 当咱们点击submit提交form表单的时候, 他会刷新一次, 若是不想它刷新的话有下面两种方法:javascript

利用iframe

咱们能够利用一个隐藏的iframe来实现, 主要是咱们把提交目标放到一个隐藏的iframe里, 而后让iframe提交数据html

(ps: 这个未实测, 仅仅是网上提供的, 我记录一下. 之后遇到或者会试一下吧)java

利用onsubmit事件

咱们还能够绑定onsubmit事件(用jq的话是submit()), 在submit按钮效果触发以前咱们就把数据提交了, 而后咱们return false(让submit此次的点击触发事件失效, 不然表单又会提交一次, 而且刷新页面)ajax

咱们能够这样:安全

====== 若是你用原生js的话函数

html代码:post

js代码:ui

function post_data(){

// ajax数据提交代码

// .....

return false;//重要!必定要写

}

/* 18-1-17更新 */code

这里有一个小技巧, 刚刚发现的.orm

咱们在绑定onsubmit的时候是把return false放进onsubmit后面的调用函数内的, 这样子若是你的函数出现了错误, 将不会继续执行到函数最后'return false'这里, 仍是会出现刷新的现象;

咱们应该把return false写到绑定事件中. 为了安全起见, 咱们能够不用去掉函数的return false.

/* ======================= */

====== 若是你用jq

html 代码:

js代码:

$(document).ready(function() {

$('#err_form').submit(function() {//此次咱们这么绑定

var contact = $("input[name='contact']").val();

var title = $("input[name='title']").val();

var errmessage = $("textarea[name='errmessage']").val();

var err_data = {

contact: contact,

title: title,

errmessage: errmessage

}

$.ajax({

// ajax提交代码....

});

return false;//仍是要return false, 跟上面同样的道理

});

});

以上!