jquery之ajax提交、js验证表单

85173253

2014-05-07

关注关注

============================================================================

原创作品，允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。

请注明转自：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>

ajax jquery 表单验证 js