required : jquery.form.js
$(document).ready(function() {
var options = {
target: 'server.php',
beforeSubmit: showRequest,
success: showResponse
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
$('#htmlForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
</script>
</head>
<body>
<form id="htmlForm" autocomplete="on" method="post" action="r.aspx">
<input type="submit" value="submit" />
</form>
</body>
</html>
server
<%
Response.Write("success");
%>
from : http://xinkong1010.iteye.com/blog/866046
分享到：
相关推荐
在Web开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互等任务。...在提供的压缩包文件“jqueryform”中，你应该能找到一个具体示例，帮助你更好地理解和应用这些概念。
AjaxForm插件基于jQuery库，它监听表单的submit事件，当用户点击提交按钮时，不刷新整个页面，而是通过AJAX方式将表单数据发送到服务器。这样，用户可以继续在当前页面操作，而无需等待页面重载，提高了交互的流畅性...
url: '/submit-form', data: formData, success: function(response) { console.log('Form submitted successfully:', response); }, error: function(jqXHR, textStatus, errorThrown) { console.error('...
在这里，jQuery将用于发起AJAX请求，并处理服务器的响应。 3. **AJAX（Asynchronous JavaScript and XML）**：尽管名称包含XML，但现代AJAX通常涉及JSON格式的数据交换。它允许我们在不刷新整个页面的情况下与...
3. 配置选项：jQuery Form提供了一系列配置选项，如dataType（返回数据类型）、beforeSubmit（提交前回调）、afterSubmit（提交后回调）等，可根据需求进行设置。 四、应用场景 1. 数据实时保存：在网页编辑器或...
**Ajax表单提交插件jQuery Form** 在Web开发中，jQuery Form插件是一个非常实用的工具，它使得使用Ajax技术提交HTML表单变得简单而直观。这个插件扩展了jQuery库，提供了强大的功能，允许开发者无刷新地更新页面...
它通过监听表单的submit事件，拦截默认的表单提交行为，转而使用AJAX方式进行提交，从而避免页面的刷新。 二、安装与引入 在项目中使用jQuery Form AJAX插件，首先需要确保引入了jQuery库。然后可以通过CDN或者...
此外，`$.fn.ajaxSubmit`方法还可以接受一个完整的jQuery.ajax选项对象，这意味着你可以使用所有jQuery的Ajax选项，如`cache`、`timeout`、`contentType`等，来定制你的异步请求。 总结一下，jQuery.form插件通过...
**jQuery Upload AJAX方式详解** 在Web开发中，文件上传是一个常见的功能，传统的文件上传通常需要刷新整个页面，用户体验较差。随着Ajax技术的发展，无刷新上传文件成为可能，jQuery结合Ajax提供了一种优雅的解决...
在Web开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理以及Ajax交互等任务。本文将深入探讨如何使用jQuery的Ajax功能来提交整个HTML表单，特别是基于jQuery 1.3.2版本。这个版本虽然较...
该库的核心工作原理是通过监听DOM中的特定事件（如`click`或`submit`），然后根据元素上的特定数据属性（如`data-ajax="true"`、`data-ajax-url`等）来触发Ajax请求。例如，当用户点击一个链接或提交一个表单时，...
1. **事件绑定**：使用jQuery的`$(document).ready()`函数确保页面加载完成后执行代码，然后使用`$('form').submit()`监听表单提交事件。 2. **Ajax请求**：当用户点击登录按钮时，阻止表单的默认提交行为，用`...
对于需要通过Ajax提交的表单，表单的提交按钮（通常是input type="submit"）会被使用，但实际的提交行为将被jquery.form.js拦截并改写为Ajax提交。 3. 编写JavaScript代码处理Ajax提交：在文档加载完毕后（例如在$...
jQuery Form插件（如：jquery.form.js）扩展了jQuery的核心功能，使得表单的提交和处理更加灵活，支持异步提交（Ajax）。以下是一些主要特性： 1. **Ajax提交**： 可以使用`$('form').ajaxSubmit(options)`方法来...
本篇文章将详细介绍如何使用jQuery的`ajaxForm()`方法来实现表单的Ajax提交。 首先，让我们理解`ajaxForm()`的基本用法。在HTML中，你需要有一个表单元素，例如： ```html <form id="myForm" action="/submit" ...
1. **事件监听**：使用`$(document).ready()`确保页面加载完成后执行代码，然后使用`$('form').submit()`监听登录表单的提交事件。 2. **阻止默认行为**：当表单提交时，使用`event.preventDefault()`阻止默认的...
1. **异步表单提交（AJAX）**：`jquery.form.js`使表单可以通过AJAX方式无刷新提交，提高用户体验。通过调用`.ajaxForm()`或`.ajaxSubmit()`方法，可以轻松实现异步提交，并且支持JSON、XML等多种数据格式返回。 2....
public ResponseEntity<?> submitForm(@RequestBody FormData formData) { // formData 是一个自定义的Java对象，用于映射接收到的JSON数据 System.out.println("Received form data: " + formData); // 进行...
`jQuery.form`插件提供了一个方便的方法`submit()`，可以轻松地发起异步表单提交，同时支持上传文件。在提交前，我们可以通过回调函数进行一些预处理，比如检查文件大小、格式等。 服务器端，`.NET`接收AJAX请求，...
《jQuery Form Plugin的详解与应用》 在Web开发中，jQuery是一个极其强大的JavaScript库，它极大地简化了DOM操作，事件处理以及Ajax交互等任务。而jQuery Form Plugin是jQuery的一个扩展，专门为表单处理提供了丰富...