<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script language="JavaScript" src="js/jquery.form.js"></script> <script type="text/javascript"> function commitForm(){ alert(12345); $("#myform").ajaxSubmit({ type: "POST", dataType: "json", url: 'getFormData', success: function(data) { alert(data); } }); } </script> </head> <body> <form id="myform"> <input name="username" type="text"/> <input name="password" type="text"/> <input type="button" onclick="commitForm()" value="提交"/> </form> </body> </html>
package com.cz.action; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; import org.apache.struts2.ServletActionContext; import com.cz.model.User; import com.cz.service.IUserService; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; public class UserAction extends ActionSupport { private String password; private String username; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } /** * @author chenzheng * @since 2013-8-10 * @Description: jquery form 测试 * @throws * @return * @throws Exception * String */ public String getFormData(){ String flag="1"; System.out.println("*************getFormData************"); System.out.println(username); System.out.println(password); HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); PrintWriter pw = null; try { pw = response.getWriter(); pw.write(flag); } catch (IOException e) { e.printStackTrace(); } pw.flush(); pw.close(); return null; } }
相关推荐
在Web开发中,异步表单提交是一种常见需求,它能提供更好的用户体验,因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、...
为了解决这个问题,jQuery Form插件应运而生,它允许我们实现异步(Ajax)表单提交,提高页面的响应性和用户体验。 ### jQuery Form 插件介绍 jQuery Form插件是基于jQuery的一个强大工具,它可以轻松地将任何HTML...
jQuery异步提交表单 gailan.apply(gailan, { selectPostFrom:function(){ var data = jQuery("#frmAppendix").formSerialize(); jQuery.ajax({ type:"POST", url:"./selectSubmit.jsp", data:data, success:...
AjaxForm是jQuery Form Plugin的一个功能,用于实现异步表单提交,特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先,让我们了解什么是Ajax。AJAX(Asynchronous ...
jquery.form.js 无刷新异步提交表单js文件 /** * jQuery Form Plugin * version: 3.51.0-2014.06.20 * Requires jQuery v1.5 or later * Copyright (c) 2014 M. Alsup **/
通过上述分析,我们可以看到如何使用jQuery实现简单的AJAX表单提交功能。这种技术可以有效地减少页面刷新次数,提高用户的交互体验。同时,需要注意正确设置请求参数,合理处理请求的成功和失败情况,以及选择合适的...
如果表单提交的目标URL与当前页面不在同一个域下,可能存在跨域问题。这时需要服务器端支持CORS(跨源资源共享)或者使用JSONP(JSON with Padding)等技术。 总结,使用jQuery的Ajax功能提交整个表单涉及的关键点...
通过以上介绍,我们可以看出 JQuery Form 插件提供的 `ajaxForm()` 和 `ajaxSubmit()` 方法极大地简化了 AJAX 表单提交的过程。合理配置这些选项可以帮助我们更高效地开发 Web 应用程序。希望本文能够帮助大家更好地...
首先,传统的HTML Form表单提交会导致页面刷新,用户体验不佳。为了实现无刷新提交,我们可以利用jQuery的`$.ajax`函数。`$.ajax`函数允许我们设置一系列参数,包括请求的URL、HTTP方法(POST或GET)、要发送的数据...
总结,jQuery和`jquery.form.js`插件提供了强大的表单提交工具,使得开发者能够轻松实现异步、无刷新的交互体验,尤其在处理文件上传等复杂场景时,其优势更为明显。通过熟练掌握这些技术,可以提升Web应用的用户...
表单异步上传,表单中可以支持文件和数据异步上传,
异步表单提交插件,MVC模式下,可以异步提交指定表单信息,虽然MVC自带有表单提交功能,但是那个是不能提交图片等文件信息的,但是这个JQ可以做到!
总结,通过jQuery我们可以方便地将JSON对象转换为适合表单提交的格式,并利用Ajax方法发送到服务器。这极大地提高了前端开发的效率和灵活性,使得前端和后端的数据交互变得更加简单。在实际项目中,根据具体需求,...
本文实例讲述了JQuery异步提交表单与文件上传功能。分享给大家供大家参考,具体如下: Jquery.form.js是一个可以异步提交表单及上传文件的插件。 示例如下: index.html <!DOCTYPE html> <html> <head&...
结合form表单的submit调用ajax的回调函数。 使用 jQuery 异步提交表单代码: 代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>无标题页</title> </head> ...
- **监听表单提交事件**:绑定`submit`事件处理器,如`$("#formId").on("submit", function(event) { ... })`,防止默认的表单提交行为。 - **阻止默认行为**:在事件处理器中调用`event.preventDefault()`,避免...
jQuery作为一个强大的JavaScript库,提供了简便的方法来实现异步操作,尤其是处理表单提交。本文将深入讲解如何使用jQuery实现异步操作,包括异步提交表单。 首先,异步操作的基础是AJAX(Asynchronous JavaScript ...
jQuery Form插件主要由`jquery.form.js`脚本组成,它扩展了jQuery的$.ajax方法,提供了一种更加简单易用的方式来处理表单的异步提交。在压缩包中,源代码位于`src/jquery.form.js`,而压缩包的`dist`目录下提供了...
总之,jQuery-form是一个功能强大且易于使用的插件,对于任何需要处理表单提交的前端开发人员来说,都是一个不可或缺的工具。它简化了Ajax表单提交的实现,同时也提供了丰富的定制选项,以适应不同项目的具体需求。...