============================================================================
原创作品,允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。
请注明转自:http://yunjianfei.iteye.com/blog/
============================================================================
在HTML页面中,如果想提交表单后不刷新整个页面,通过ajax来提交是比较常用的方法。
Jquery针对ajax也做了一些封装,用起来非常方便。具体可以参照:http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
在提交表单的过程中,还会遇到一些验证操作,用js来做也可以。下面是我写的一个简单例子,可以作为参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="./jquery-2.1.0.min.js"></script>
<script type="text/javascript">
function validate_int(field, alerttxt)
{
with (field)
{
if (!/^[0-9]*$/.test(value))
{alert(alerttxt);return false}
else
{return true}
}
}
function validate_required(field, alerttxt)
{
with (field)
{
if (value==null || value=="")
{alert(alerttxt);return false}
else
{return true}
}
}
function validate_put(thisform)
{
with (thisform)
{
if (validate_required(worker_num,"请输入worker数!") == false)
{worker_num.focus();return false}
if (validate_int(worker_num,"请输入数字!") == false)
{worker_num.focus();return false}
var ret = confirm('确认更新该计算资源?');
return ret;
}
}
</script>
<script>
$.fn.extend({
//用来解析ajax返回的json格式的数据。
get_resp_data: function(data) {
var resp = null;
try{
resp = $.parseJSON(data)
}catch(e){
alert(e);
return false;
}
return resp;
},
submit_modify_poolitem: function(pool_id) {
$.ajax({
url:'/poolitem',
type:'GET',
data: $(this).serialize(),
success: function(data){
var resp = $(this).get_resp_data(data)
if(resp == false) return false;
var pi = resp.content;
alert("修改成功")
//可以在这里加一些后续操作,比如更新table或者页面内容
}
});
},
});
$(document).ready(function(){
$("#PUT_1").submit(function(event) {
//进行表单验证,用js实现的
var ret = validate_put($(this)[0]);
if(ret != true) {
return false;
}
//提交表单
$(this).submit_modify_poolitem(1);
event.preventDefault();
return true;
});
});
</script>
</head>
<body>
<center>
<form id='PUT_1'>
<input type='hidden' name='_method' value='put' />
<input type='hidden' name='hostname' value='host1' />
<input type='hidden' name='pool_name' value='test1' />
Worker数量:<input type='text' name='worker_num' size=3/>
<input type='submit' value='调整' />
</form>
<br>
</center>
</body>
</html>