jquery表单插件form使用方法详解

2020-05-24 21:38:56易采站长站整理

传统的表单提交,都是页面跳转的形式,但是现在更流行ajax提交,那么如果希望有表单提交的简便,也有ajax的效果,有什么解决办法吗?

怎么使用

两种使用方式:

第一种方式


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-form.js"></script>
<script>
// 使用ajaxForm
$(function(){
$("#myForm").ajaxForm(function(){
$("#output1").html("提交成功").show();
})
})
</script>
</head>
<body>
<form id="myForm">
<input type="text" name="username">
<input type="text" name="password">
<input type="submit" value="提交">
<div id="output1" style="display: none"></div>
</form>
</body>
</html>

第二种方式


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-form.js"></script>
<script>
$(function(){
//方式二 与方式一效果一样
$("#myForm").submit(function(){
// 使用ajaxSubmit
$(this).ajaxSubmit(function(){
$("#output1").html("提交成功").show();
});
return false;
})
})
</script>
</head>
<body>
<form id="myForm">
<input type="text" name="username">
<input type="text" name="password">
<input type="submit" value="提交">
<div id="output1" style="display: none"></div>
</form>
</body>
</html>

感觉上第一种要 更方便一点。
其中的参数function()是提交成功后的回调函数。

利用这种提交方式,可以实现异步表单提交,很方便。但是,还是有点不满足,比如说,我可能想在提交表单之前验证一下,虽然可以手动地在提交表单动作之外完成,但是很麻烦。form插件有没有继承这样的功能呢?

二、options参数

上面只讲了form中的一个function回调函数参数,其实它还有一个参数,就是options。有什么用呢?


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.9.1.min.js"></script>