简单的form表单操作的几种写法

本文介绍了一种使用JavaScript来管理和操作用户信息的方法,包括保存及设置用户名称和邮箱等功能,并逐步展示了从简单的函数到面向对象的设计过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

function save(){
	var name = $('#name').val();
	var email = $('#email').val();
	
	//...
}

function setValue(name,email){
	$('#name').val(name);
	$('#email').val(email);
}

//=============================================

function save(){
	var user = {};
	user.name = $('#name').val();
	user.email = $('#email').val();
	
}

function setValue(user){
	$('#name').val(user.name);
	$('#email').val(user.email);
}

//=============================================

var user = {};
user.dom = '#userform';
user.save = function(){
	this.name = $(this.dom).find('input[name="name"]').val();
	this.email = $(this.dom).find('input[name="email"]').val();
}
user.setValue = function(user){
	this.name = user.name;
	this.email = user.email;
	$(this.dom).find('input[name="name"]').val(this.name);
	$(this.dom).find('input[name="email"]').val(this.email);
}

//=============================================

function user(opts){
	this.dom = opts.dom;
}
user.prototype.save = function(){
	this.name = $(this.dom).find('input[name="name"]').val();
	this.email = $(this.dom).find('input[name="email"]').val();
}
user.prototype.setValue = function(user){
	this.name = user.name;
	this.email = user.email;
	$(this.dom).find('input[name="name"]').val(this.name);
	$(this.dom).find('input[name="email"]').val(this.email);
}

//=============================================

function user(opts){
	this.dom = opts.dom;
	this.name = opts.name;
	this.email = opts.email;
}
user.prototype.getValue = function(){
	this.name = this.nameDom.val();
	this.email = this.emailDom.val();
}
user.prototype.setValue = function(user){
	this.name = user.name;
	this.email = user.email;
	this.nameDom.val(this.name);
	this.emailDom.val(this.email);
}
user.prototype.save = function(){
	//$.post...
}
user.prototype.bindDom = function(){
	this.nameDom = $(this.dom).find('input[name="name"]');
	this.emailDom = $(this.dom).find('input[name="email"]');
}

转载于:https://my.oschina.net/honchy/blog/349963

<think>我们正在讨论HTML表单中action属性的路径设置问题。根据引用内容,特别是引用[1]中提到:url-pattern要与form表单中的action属性值一致,并且注意“/”的问题。例如,如果url-pattern为“/login”,那么表单的action属性应该设置为“login”(没有开头的斜杠)或者“/login”(有开头的斜杠),这取决于你的web应用的上下文路径设置。 在web开发中,表单的action属性指定了当用户提交表单时,数据应该发送到哪个URL。这个URL可以是绝对路径(以http://开头)也可以是相对路径(相对于当前页面的URL)。 为什么建议action属性与当前页面路径保持一致?这里有几个原因: 1. **避免路径错误**:如果使用相对路径,那么它相对于当前页面的URL。如果当前页面和表单处理程序位于相同的目录或具有相同的基路径,那么使用相对路径可以确保无论应用部署在什么上下文路径下都能正确工作。 2. **便于维护**:如果表单提交的目标与当前页面在同一个应用内,那么使用相对路径可以使代码更易于维护。因为如果应用的整体URL结构发生变化,相对路径通常不需要改变(只要页面和表单处理程序的相对位置不变)。 3. **减少硬编码**:使用相对路径可以减少硬编码的绝对路径,这样当应用部署到不同的域名或端口时,代码不需要修改。 4. **与服务器配置匹配**:如引用[1]所述,表单的action需要与服务器端配置的URL模式(url-pattern)匹配。如果服务器端配置的URL是相对于上下文路径的,那么表单的action也应该相对于当前路径或者使用根路径(以“/”开头,表示相对于当前站点的根路径)来确保匹配。 但是,注意相对路径和绝对路径的区别: - 如果action以“/”开头,它表示相对于当前网站的根路径。例如,如果当前网站是http://example.com/myapp/page.html,那么action="/login"将指向http://example.com/login。 - 如果action没有以“/”开头,那么它是相对于当前页面的路径。例如,当前页面是http://example.com/myapp/page.html,那么action="login"将指向http://example.com/myapp/login。 因此,为了确保表单提交到正确的处理程序,我们需要根据服务器端处理程序的URL来设置action。如果处理程序的URL是相对于当前应用的上下文路径(比如在Servlet中配置的url-pattern),那么通常有两种做法: - 使用相对于上下文根路径的绝对路径(以“/”开头,表示从上下文根开始)。例如,你的应用上下文是`/myapp`,那么action="/myapp/login"。 - 使用相对于当前页面的路径(不使用“/”开头)。例如,当前页面是`/myapp/page.html`,那么action="login"会提交到`/myapp/login`。 然而,引用[1]中的例子提到:如果url-pattern是“/login”,那么表单的action属性需要为“login”或者“/login”。这里需要注意的是: - 如果action写为“login”(没有斜杠),那么它相对于当前页面所在的目录。例如,当前页面是`/myapp/index.html`,那么提交的地址就是`/myapp/login`。 - 如果action写为“/login”(有斜杠),那么它相对于根目录,即`http://domain.com/login`,而你的应用可能是部署在`http://domain.com/myapp/`,这样就会提交到错误的地址(除非你的应用就是部署在根目录下)。 所以,在非根部署的应用中,通常建议使用相对于上下文根路径的写法,但是需要包含上下文路径。然而,在HTML中,我们无法直接获取上下文路径(除非使用JSP等服务器端技术动态生成)。因此,常见的做法是: - 在JSP中,可以使用`${pageContext.request.contextPath}`来动态生成上下文路径,如:`action="${pageContext.request.contextPath}/login"`。 - 在纯HTML中,如果应用部署在根目录,可以直接使用“/login”;如果部署在子路径,则必须使用完整的相对路径或者使用绝对路径(包含上下文路径)。 但是,纯HTML无法动态获取上下文路径,所以如果应用可能部署在非根路径,通常建议使用相对路径(相对于当前页面)来避免硬编码上下文路径。例如,如果当前页面和表单处理程序在同一个目录,那么直接写action="login"即可。 总结:建议action与当前页面路径保持一致(使用相对路径)的原因是为了确保无论应用部署在什么路径下,表单都能正确提交到处理程序,避免因部署路径变化而修改代码。 参考文献: [^1]: Form表单中的action路径问题。最后问题的解决是:url-pattern要与form表单中的action属性值一致 如本例中,url-pattern中为:“/login”,则表单中action属性需要为:“login”。注意,“/”的问题!!! [^2]: form表单action可以写html,formaction form表单指定action的方法。在HTML语言中表单的action属性意思是规定当提交表单时,向何处发送表单数据。 action定义和用法: action 属性可设置或返回表单的 action 属性。 action 属性定义了当表单被提交时数据被送往何处。 语法: formObject.action=URL [^3]: HTML5表单Form之属性。 Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给Web应用程序,网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单控件组成,这些表单控件是单行/多行文本框,下拉菜单,按钮,复选框,单选按钮,使用表单控件时一般要配合label标签,用于描述其目的。 二.Form标签可用属性 根据以上分析,我们生成以下相关问题: §§相关问题§§ 1. 在HTML表单中,如何设置action属性以便在不同部署环境下都能正确提交? 2. 相对路径和绝对路径在表单action属性中有什么区别? 3. 在非根路径部署的Web应用中,如何避免表单action路径错误? 4. 使用JSP时如何动态设置表单的action属性? 5. 表单的method属性有哪些可选值,它们之间有什么区别?</think>### HTML表单中action路径与当前页面路径一致的原因 在HTML表单中,`action`属性指定表单数据提交的目标URL。建议其值与当前页面路径保持一致的主要原因如下: 1. **避免路径解析错误** 当`action`使用相对路径(如`action="login"`)时,浏览器会**基于当前页面的URL路径**自动解析完整地址。若当前页面路径为`/user/profile`,则提交地址会解析为`/user/login`。若强行修改为其他路径(如`action="/login"`),可能导致提交到错误的服务器端点[^1]。 2. **与服务器路由配置匹配** Web服务器(如Tomcat)通过`url-pattern`配置路由规则。若`action`的值与`url-pattern`不一致(例如`url-pattern`设为`/submit`而`action="login"`),服务器将无法处理请求,导致404错误[^1]。 3. **简化部署和维护** 使用相对路径的`action`(如`action="process"`)能自适应不同部署环境(如开发环境`http://localhost:8080/app`和生产环境`http://domain.com/app`)。绝对路径(如`action="/app/process"`)需随环境手动修改,增加维护成本[^2][^3]。 4. **防止斜杠(/)导致的路径歧义** 以斜杠开头的路径(如`action="/login"`)会被解析为**根路径**。若应用部署在子路径(如`/myapp`),实际请求会发送到`/login`而非预期的`/myapp/login`,造成路径丢失[^1]。 ### 正确用法示例 ```html <!-- 当前页面URL: /app/user --> <form action="update" method="post"> <!-- 提交到/app/user/update --> <input type="text" name="email"> <button>提交</button> </form> <!-- 若需跳转上级目录 --> <form action="../admin/delete" method="post"> <!-- 提交到/app/admin/delete --> ... </form> ``` ### 特殊情况处理 若必须使用绝对路径,可通过服务器端动态生成路径(如JSP): ```jsp <form action="${pageContext.request.contextPath}/api/submit" method="post"> ... </form> ``` > **关键总结**:保持`action`与当前路径一致的本质是**利用浏览器的相对路径解析机制**,确保请求准确映射到服务器配置的路由规则,同时提升代码可移植性[^1][^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值