在web前端编程中，form表单提交到服务器是经常使用的，本文在实践的基础上总结了三个方法来完成form表单提交。
1、直接把表单提交到后台，由后台来跳转。
前端，post方法，将表单提交到服务器的mysql_add.php脚本。
<form name=webform id="webform" method="post" action="mysql_add.php">
</form>
后台，表单提交到mysql_add.php脚本中，由脚本中window.location.href='add.php';来决定下一个页面的内容。
mysql数据库处理内容，$result决定是否执行成功
if ($result) {
echo "<script>alert('新纪录添加成功');window.location.href='add.php';</script>";
}
else {
echo "Error: " . $sqlstr . "<br>" . mysqli_error($conn);
}
2、ajax提交表单，页面自动刷新
前端，post方法，表单提交是通过按钮的响应函数form_ajax()来决定的。
<form name=webform id="webform" method="post" >
<button type="submit" class="btn " id="model_add" onclick="form_ajax()">添 加</button>
</form>
js中响应函数form_ajax()的定义。
<script>
function form_ajax() {
$.ajax({
//几个参数需要注意一下
type: "POST", //方法类型
url: "mysql_add_ajax.php", //url
data: $('#webform').serialize(),
async: false,
error: function(request) { //失败的话
alert("Connection error");
},
success: function(data) { //成功
alert(data); //就将返回的数据显示出来
}
});
}
</script>
后端就只需要返回的内容即可，无需跳转。返回的内容即为前端js中的data的值。在ajax提交表单时，原始页面也会跟着刷新，所以ajax提交后的页面数据也是最新的。
mysql数据库处理内容， $result决定是否执行成功
if ($result) {
echo "新纪录添加成功";
}
else {
echo "Error: " . $sqlstr . "<br>" . mysqli_error($conn);
}
3、ajax提交表单，禁止页面刷新，toastr显示后台返回结果
众所周知，form表单在点击提交后会刷新整个页面。
前端，在form后面添加iframe ，form定位到这个frame，这样ajax后页面就不会自动刷新。
<form name=webform id="webform" method="post" target="iframe">
</form>
<iframe id="iframe" name="iframe" style="display:none;"></iframe>
在js中，就可以使用toastr插件来显示通知信息 toastr.info(data).。
ajax用toastr来显示通知信息
toastr是jquery通知提示框插件，笔记觉得用在通知显示可以得到提高网页的亲和度。表单提交，然后通知显示数据插入舒服成功。toastr可以修改toastr.options中的参数来修改显示方式。
网友评论