jquery之ajax提交、js验证表单

来源：互联网发布：天谕捏脸数据女动漫编辑：程序博客网时间：2024/05/01 10:25

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

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

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

0 0