您的位置：首页 > Web前端 > JQuery

jQuery.form 中的 ajaxForm() 和 ajaxSubmit()

2014-01-06 15:41 211 查看

官方例子 http://malsup.com/jquery/form/#ajaxForm 官方API http://malsup.com/jquery/form/#api 中文API http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#api
参考 http://www.cnblogs.com/qiantuwuliang/archive/2009/09/14/1566604.html#commentform

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Jquery</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="http://malsup.github.io/min/jquery.form.min.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
//该方法是对表单做一些操作 使得原本很普通的form具备了无刷新提交的功能 这样普通的表单在点击submit的时候就可以无刷新提交  限制就是必须点击submit按钮才能提交
$('#myForm').ajaxForm();
var options = {
target: '#output2',   // target element(s) to be updated with server response
};

//当点击提价按钮的时候  调用ajaxSubmit() 提交  同时屏蔽原有的form的页面跳转
/*$('#myForm2').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});*/
$('#btn2').click(function(event) {
$('#myForm2').ajaxSubmit();//使用ajaxSubmit的好处就是任何时候调用本方法 就可以提交了  无需点击submit按钮
});

});
// attach handler to form's submit event

</script>

</head>
<body>
<form id="myForm" action="index.php" method="post">
Name:
<input type="text" name="name" />
Comment:
<textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
<button id="btn1">btn1</button>
<div id="output2"></div>
<form id="myForm2" action="index.php" method="post">
Name:
<input type="text" name="name" />
Comment:
<textarea name="comment"></textarea>
</form>
<button id="btn2">btn2</button>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航