今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式
jquery中的serialize() 方法
该方法通过序列化表单值，创建 URL 编码文本字符串
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中
这样当表单中要提交的参数比较多时，就可以使用该方法进行提交，否则将在ajax中得代码会很长，有可能在编写时出错，也不方便检查
以下是自己写的测试代码
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#submit").click(function() {
$.ajax({
url : "insertUser",
data : $("form").serialize(),
type : "POST",
dataType : "text",
complete : function() {location.href = "main.html"}
});
}
}
</script>
<body>
<form name="insertUser" method="post" action="main">
用户名：<input type="text" name="userId" id="userId" />
密码：<input type="password" name="staticPassword" id="staticPassword" />
<input type="button" id="submit" value="提交" />
</form>
</body>
分享到：
相关推荐
var formData = new FormData($('form')[0]); $.ajax({ url: 'upload-url', type: 'POST', data: formData, contentType: false, processData: false, success: function(response) { // 文件上传成功 }, ...
**jQuery AJAX** jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 DOM 操作、事件处理以及，特别是我们这里关注的，AJAX（异步JavaScript和XML）调用。AJAX 允许网页在不重新加载整个页面的情况下与服务器...
var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/ajax_Day5/datas03.php', data : fd, ...
AjaxForm是jQuery Form Plugin的一个功能，用于实现异步表单提交，特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先，让我们了解什么是Ajax。AJAX（Asynchronous ...
当表单提交时，我们将阻止其默认的提交行为，然后使用`.ajax()`方法发送POST请求。 ```javascript $(document).ready(function() { $('#login-form').on('submit', function(event) { event.preventDefault(); ...
本篇文章将详细介绍如何使用jQuery的`ajaxForm()`方法来实现表单的Ajax提交。 首先，让我们理解`ajaxForm()`的基本用法。在HTML中，你需要有一个表单元素，例如： ```html <form id="myForm" action="/submit" ...
在我们的示例中，文件名为"jquery+ajax+form"，这可能是指使用jQuery的`.ajax()`或`.serializeArray()`方法提交表单。 1. 使用jQuery的`.ajax()`方法： ```javascript $.ajax({ type: 'POST', url: 'your_server...
**jQuery与Ajax无刷新提交表单** 在网页开发中，jQuery和Ajax技术的结合使得用户交互体验得到了极大的提升。"jQuery Ajax无刷新提交表单并执行邮件通知"这个主题涉及了两个关键点：一是利用jQuery进行表单验证，二...
**jQuery Upload AJAX方式详解** 在Web开发中，文件上传是一个常见的功能，传统的文件上传通常需要刷新整个页面，用户体验较差。随着Ajax技术的发展，无刷新上传文件成为可能，jQuery结合Ajax提供了一种优雅的解决...
### jQuery AJAX 智能搜索实现详解 在现代Web开发中，实时反馈用户输入的智能搜索功能变得越来越普遍。本文将深入探讨如何使用jQuery和AJAX技术实现一个智能搜索功能，通过分析给定代码示例，我们将理解其工作原理...
其中，使用jQuery处理Ajax提交form表单是一个常见的需求。通过Ajax技术，可以异步地提交表单，而无需重新加载整个页面，从而提高用户体验。下面将详细介绍如何使用jQuery实现Ajax提交form表单的两种方法。 首先，...
**jQuery AJAX 登录示例详解** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。在这个“jQuery AJAX ...
本文将详细讲解如何通过AJAX使用POST方法提交JSON数据，并在服务器端的ASHX（HttpHandler）处理程序中正确获取这些参数值。在实际开发中，可能会遇到`context.Request.Form`和`context.Request.Params`无法正确获取...
jQuery中的`$.ajax()`方法是最常用的一种执行Ajax请求的方式，它可以灵活地配置请求参数，并自动处理常见的错误情况。下面是一个基本的示例： ```javascript $.ajax({ url: 'your-url', type: 'POST', // 或者 '...
在Vue.js框架中，提交表单是一个常见的任务，特别是在与后端进行数据交互时，我们通常会使用Ajax技术来实现异步通信。Vue.js结合Ajax（通常指的是jQuery的$.ajax或者现代浏览器的fetch API）可以创建高效且用户体验...
在本文中，我们将深入探讨jQuery Ajax请求的参数设置、数据处理以及返回数据的优雅处理方式。 首先，$.ajax()函数是最通用的Ajax请求方法，它接受一个包含各种配置选项的对象作为参数。这些选项包括URL、请求类型...
2. **jQuery事件绑定**：我们将监听表单的提交事件，并使用`event.preventDefault()`阻止默认的表单提交行为，转而使用AJAX进行异步上传。 ```javascript $("#uploadForm").submit(function(event) { event....
在实际项目中，开发者往往选择使用jQuery、axios、fetch等库或框架来简化AJAX操作，它们提供了更高级别的API和更好的跨浏览器兼容性。 通过以上步骤，我们完成了利用AJAX提交表单的完整流程。这使得用户无需等待...
接下来，我们需要使用jQuery监听表单的提交事件，并使用Ajax发送文件： ```javascript $(document).ready(function () { $("#uploadBtn").click(function (e) { e.preventDefault(); // 阻止默认的表单提交行为 ...
本篇文章将详细解释如何使用jQuery的`ajax`方法来实现异步提交表单，同时涵盖不包含文件和包含文件的两种情况。 ### 1. 不带文件的表单数据提交 当表单数据不包含文件时，我们可以使用`serialize()`方法将表单元素...