============================================================================
原创作品，允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。
请注明转自：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>
相关推荐
本文将深入探讨如何使用jQuery的ajax方法来提交表单，从而实现异步数据交换，提高用户体验。 首先，jQuery的$.ajax()函数是进行Ajax请求的核心，它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...
为了实现这些功能，我们需要在HTML中定义表单元素，并在JavaScript中编写jQuery代码来绑定事件和验证逻辑。例如，使用`.on('submit', function() {...})`监听表单提交事件，并在回调函数中进行所有验证。如果所有...
本主题将深入探讨如何使用jQuery库的AJAX功能将表单数据提交到后台，以及后台如何使用Spring框架来处理这些数据。下面将详细阐述这一过程。 ### 一、前端：使用jQuery的AJAX提交表单 1. **引入jQuery库**：首先...
"jQuery Ajax无刷新提交表单并执行邮件通知"这个主题涉及了两个关键点：一是利用jQuery进行表单验证，二是通过Ajax实现无刷新提交表单，同时触发邮件通知功能。 **1. jQuery表单验证** jQuery提供了丰富的DOM操作...
1. `register.html` - 包含HTML表单和JavaScript验证逻辑。 2. `register.php` - PHP后端处理验证逻辑并返回结果。 3. `styles.css` - 用于美化表单和验证信息的CSS样式。 **总结** PHP和AJAX的结合使得表单验证...
"jQuery完整注册表单提交验证"是一个针对此需求的解决方案，它提供了全面的验证功能，确保用户输入的数据符合预期，同时减少了服务器端的压力。本文将深入探讨jQuery如何实现这一功能，以及如何将其应用于实际项目中...
无刷验证（又称实时验证或AJAX验证）是这种技术的一个典型应用，它提高了用户体验，因为在用户输入数据时，可以立即在后台验证其有效性，而无需等待整个表单提交。下面我们将详细探讨jQuery AJAX以及如何实现无刷...
本项目"jquery表单验证Ajax提交.zip"显然聚焦于使用jQuery进行表单验证和利用Ajax技术无刷新提交数据的核心功能。以下是这些知识点的详细说明： **jQuery库** jQuery是一个轻量级的JavaScript库，它通过提供简洁的...
本文将深入探讨如何使用jQuery库来实现一个简单的Ajax表单验证。jQuery是一个轻量级、功能丰富的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。 首先，我们需要理解Ajax的核心概念。Ajax允许我们在后台与...
2. **jQuery监听表单提交**：使用jQuery，我们可以监听表单的提交事件，比如`$('form').submit(function(event) { ... })`，阻止默认的表单提交行为（防止页面跳转），并开始执行AJAX请求。 3. **AJAX请求**：使用...
jQuery Form插件由Malsup开发，是一款非常实用的jQuery扩展，能够极大地简化表单的Ajax提交过程。它不仅提供了一套完整的API来管理表单数据，还支持复杂的表单验证与文件上传等功能。 ##### 2.1 主要特性 - **Ajax...
从给定的文件信息来看，文件主要介绍了jquery.validate.js的表单验证功能。jquery.validate.js是一个强大的jQuery插件，可以帮助开发者快速实现表单验证。以下是该文件中提及的关键知识点： 1. jquery.validate.js...
在本文中，我们将深入探讨如何使用jQuery和Ajax技术实现一个简单的登录验证系统。这个系统能够实时检查用户输入的用户名和密码是否有效，而无需页面刷新，从而提供更流畅的用户体验。 首先，jQuery是一个轻量级的...
`jQuery Validate` 是一个流行的 JavaScript 库，用于在前端实现高效、灵活的表单验证。这个库是 jQuery 生态系统的一部分，它简化了对 HTML 表单数据的验证过程，提高了用户体验，确保用户输入的数据在提交到服务器...
标签"js特效-jQuery按步骤找回密码验证表单代码"进一步强调了这个代码实例包含JavaScript特效，可能包括动态显示进度条、高亮当前步骤、错误提示等视觉反馈。这些特效不仅提升了用户体验，还能通过视觉提示帮助用户...
本示例将深入探讨如何使用jQuery和Ajax技术来实现表单输入的实时检测和验证，提升用户体验，减少服务器负载。 首先，我们需要理解jQuery的基本用法。jQuery通过选择器（如$("#id")或$(".class")）选取DOM元素，然后...
接着，我们需要逐个验证表单字段。例如，检查用户名是否为空，可以使用`.val()`获取输入值，然后用`.trim()`去除两侧空格，并通过条件语句判断是否为空。密码强度通常需要满足一定条件，如长度、数字和特殊字符的...
jQuery.form插件正是为了满足这种需求而设计的，它扩展了jQuery库，使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件，实现完美的表单异步提交。 首先，我们需要了解jQuery.form...
综上所述，“jQuery超强验证表单”涉及的知识点涵盖了jQuery基础、表单验证原理、验证插件使用、自定义规则和错误消息、实时验证、AJAX提交以及错误处理等方面。掌握这些内容，可以提升你在Web开发中处理表单验证的...
- **动态验证**：你可以在表单提交前、按钮点击后等事件中调用 `$.validationEngine('validate')` 来触发验证。 - **异步验证**：通过 `ajaxCall` 规则实现，例如邮箱地址的唯一性验证。 - **自定义事件**：插件提供...