7.2.1 Form 插件简介
jQuery Form 插件是 一个优秀的Ajax表单插件,可以非常容易地,无侵入地升级HTML 表单以支持Ajax.
jQuery Form 有两个核心方法---ajaxFoem()和ajaxSubmit(),它们集合了从控制表单元素
到决定如何管理提交进程的功能。
7.2.3 快速上手
在HTML页面上添加一个form表单,然后引入jQuery库和Form插件并编写AJax提交jQuery代码如下:
node2:/django/mysite/news/templates#cat form.html
<head>
<script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="/static/Js/Monitor/jquery.validate.js"></script>
<script type="text/javascript" src="/static/Js/Monitor/jquery.form.js"></script>
//等待DOM被加载
$(document).ready(function(){
//绑定id为myForm的表单并提供一个简单的回调函数
$('#myFoem').ajaxFoem(function(){
$('#output1').html("提交成功!欢迎下来再来!").show();
});
});
</script>
</head>
<form id="myForm" action="demo.php" method="post">
名称:<input type="text" name="name"/><br/>
地址:<input type="text" name="address"/><br/>
自我介绍:<textarea name="comment"></textarae><br/>
<input type="submit" id="test" balue="提交"/><br/>
<div id="output1" style="display:none;"></div>
</form>
node2:/django/mysite/news/templates#cat form.html
<head>
<script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="/static/Js/Monitor/jquery.validate.js"></script>
<script type="text/javascript" src="/static/Js/Monitor/jquery.form.js"></script>
<!--等待DOM被加载--!>
<script type="text/javascript">
$(document).ready(function(){
<!--绑定id为myForm的表单并提供一个简单的回调函数-->
$('#myForm').ajaxForm(function(){
$('#output1').html("提交成功!欢迎下来再来!").show();
});
});
</script>
</head>
<form id="myForm" action="/testform/" method="post">
名称:<input type="text" name="name"/><br/>
地址:<input type="text" name="address"/><br/>
自我介绍:<textarea name="comment"></textarea><br/>
<input type="submit" id="test" value="提交"/><br/>
<div id="output1" style="display:none;"></div>
</form>
def testform(req):
print req.get_full_path()
print req.POST['name'];
print req.POST['address'];
return HttpResponse(req.POST['name']+req.POST['address'])
7.2.4 核心方法---ajaxForm()和ajaxSubmit()
正如上列的代码所示,通过核心方法ajaxForm(),能很容易地讲表单升级为Ajax提交方式。
$(document).ready(function(){
<!--绑定id为myForm的表单并提供一个简单的回调函数-->
$('#myForm').ajaxForm(function(){
$('#output1').html("提交成功!欢迎下来再来!").show();
});
});
Form 插件还有一个核心方法ajaxSubmit(),也能完成同样的功能,代码如下: