web前端页面取值的几种方式

本文介绍了在Web前端HTML中获取值的各种方法,包括通过表单提交、EL表达式、Struts2标签、JSP输出表达式等途径。还详细解释了如何避免空指针异常等问题。

抽时间总结一下web前端HTML代码段里面取值的一些方法。可能不全。也有可能有些描述不是很准确,欢迎补充和修正。

 

1.      前台往后台传值,通过提交表单,在后台有set,get方法,可以直接取到。如果通过request.getParameter(paramName) 去获取通过会报空指针异常。 其中request是HttpServletRequest的实例。解决的方法是,在后台action类里面定义request的get/set方法。其中get方法要这样写:

                                             public HttpServletRequest getRequest() {

                                                                                    if (request == null)

                                                              request =ServletActionContext.getRequest();

                                                           return request;

                                                     }

 

这时,通过getRequest().getParameter(paramName)就可能成功的获取前台传过来的请求参数值。

顺便提一句,并不是前台提交表单的每个表单域都会生成请求参数的,而是有name属性的表单域才生成请求参数。如果有多个表单域有相同的name属性,则多个表单域只能生成一个请求参数,只是该参数有多个值。如果某个表单域设置了disabled=“disabled”,则该表单域不再生成请求参数。

 

2.    这样立马可以得到第一种前端页面取值的方法。对于表单内,属性有name的表单域,只要在后台有这个name属性的值一样的成员变量的get/set方法。该表单域的值就可以自动获取了。比如<input name=”ask” type=”text” value=””/>, 在后台action里面定义了一个成员变量ask,且有setAsk() 和getAsk()方法,<inputname=”ask” type=”text” />的value就可以动态从后台设置获取。

3.      第二种获取值的方法:EL表达式:${param}。不管是后台传来的值,还是其他前端页面传来的值,都可以通过${}获取到。后台传过来的属性值(也就是在后台通过setAttribute()方法设置的属性)也可以通过EL表达式取得。顺便提一下。在前端页面通过request.setAttribute()设置的属性值,在后台,以及跳转页面都获取不到(原理不熟,不过感觉不应该,但尝试下是这样的情况)。

4.   通过struts2标签获取:<s:property value=””/>。其中这里需要注意一点:value属性取值,什么时候要加“#”,什么时候不用加?

       回答:如果ValueStack中的值时,是不需要带#的,可以直接取。比如Action实例的属性值是存储在ValueStack中的,所以取Action中的属性是不需要带#号的。注意在使用<s:iteratorid="it" value="attrName">时,后使用it去取对象属性时,是需要加#号的。取Stack Context里面的值,都需要加#。

        可能有读者不知道ValueStack和Stack Context分别存储什么。

       这里在帮大家贴出网上别人给出的答案:(常见的)

       valuestack:action所有成员变量,fieldErrors,actionErrors,actionMessage,exception以及你自定义的拦截器或action里自己写进去的变量
       Stack Context:parameters、request、session、application、pageContext这些web容器内置对象,还有就是页面通过<s:set/><s:iterator/>等标签设置的临时变量.

      最直接的查看的方法是在页面添加<s:debug></s:debug>.然后在浏览器中打开该页面就可以看到[Debug]这样的链接。点进去就可以看到这两个里面究竟存储了什么。非常方便。

       使用<s:debug></s:debug>可以发现,在Stack Context里面有三个key:action、request、attr.

        我们也可以通过这三个key,在web前端获取值。比如,在action里面有参数值param.在页面除了这样获取:

                              ${param}、<s:property value="param"/>。

    还可以这样:${action.param},    <s:property value=“#action.param”/>,<s:property value=“#request.param”/>

    但是不可这样${ request.param}

    对于属性值。可以这样获取:${attribute},但是不可以这样<s:property value=“attributeName”/>。还可以这样:${ attr.attrubiteName},但不可以这样:${request. attributeName }。还可以这样:<s:property value="#attr.attributeName "/>,<s:property value="#request. attributeName"/>。


特别注意:EL表达式不能在struts2标签中使用:<s:property value="${param} "/>是错误的Accordingto TLD or attribute directive in tag file, attribute value does not accept anyexpressions

 

5.  通过JSP输出表达式。

   参数:

<%=request.getParameter(paramName)%>。

  属性值:

<%=request.getAttribute("attributeName")%>

<think>好的,我现在需要帮助用户解决如何在前端实现自动获取网页URL并提取参数值的问题。首先,我得回忆一下之用户提供的引用内容,看看有没有相关的信息可以参考。 用户提到了引用1中,使用`<a>`标签的href属性来解析URL,这可能是浏览器原生API的一种方法。引用2和3分别提到了使用jQuery和Flutter Web中的window.location来获取URL参数。引用4则是关于后端Spring Boot获取参数的方法,但用户现在需要的是前端解决方案。 接下来,我需要整理几种常见的前端方法。首先想到的是使用JavaScript的window.location对象,这是最直接的方式。然后,可能需要解析查询参数,可以通过手动拆分字符串或者使用URLSearchParams API。另外,用户提到的使用创建a标签的方法也是一种替代方案,可能在旧浏览器中兼容性更好。 然后,我需要考虑步骤的详细说明。比如,第一步是获取当URL,使用window.location.href。第二步是提取查询参数部分,可以用window.location.search。第三步则是解析参数,这里可以展示两种方法:传统字符串分割和使用URLSearchParams。 还要注意代码示例的正确性,确保语法正确,并且符合用户的要求,比如使用$...$格式的行内代码和$$...$$的独立公式(如果有的话)。不过这里主要是JavaScript代码,可能不需要数学公式,但需要确保代码块正确。 另外,用户可能需要处理多个参数或者特殊字符的情况,比如使用decodeURIComponent来解码编码过的字符。还需要提到不同方法的兼容性,比如URLSearchParams在IE中的兼容性问题,以及对应的解决方案,比如使用polyfill或者传统方法。 最后,生成相关问题,比如如何获取特定参数、处理哈希值、中文参数乱码问题,以及框架中的处理方法。这些问题应该覆盖用户可能遇到的后续疑问,帮助他们进一步深入。 总结一下,回答的结构应该是先介绍基本方法,分步骤说明,给出代码示例,然后讨论注意事项和兼容性问题,最后提供相关问题。确保引用正确的来源,比如引用2和3提到的window.location和URLSearchParams,以及引用1中的a标签方法,但根据用户当需求,主要重点应放在原生JavaScript方法上,而不是jQuery或Flutter,除非用户特别提到。</think>### 前端自动获取URL并提取参数值的实现方法 #### 一、基础实现步骤 1. **获取完整URL** 使用浏览器原生API `window.location.href` 获取当页面完整地址: ```javascript const currentUrl = window.location.href; // 例如:https://example.com?name=张三&age=20 ``` 2. **提取查询参数部分** 通过 `window.location.search` 直接获取URL中`?`后的查询字符串: ```javascript const queryString = window.location.search; // 输出:?name=张三&age=20 ``` 3. **解析参数为键值对** **方法一:使用 `URLSearchParams` API**(现代浏览器支持)[^3] ```javascript const params = new URLSearchParams(queryString); const name = params.get('name'); // "张三" const age = params.get('age'); // "20" ``` **方法二:传统字符串分割**(兼容旧浏览器) ```javascript const parseParams = (search) => { return search.replace('?','').split('&').reduce((acc, pair) => { const [key, value] = pair.split('='); acc[key] = decodeURIComponent(value || ''); return acc; }, {}); }; const paramsObj = parseParams(queryString); // {name: "张三", age: "20"} ``` #### 二、自动执行的完整示例 ```javascript // 页面自动执行 window.addEventListener('load', () => { const params = new URLSearchParams(window.location.search); console.log('姓名:', params.get('name')); console.log('年龄:', params.get('age')); }); ``` #### 三、特殊场景处理 1. **处理哈希路由** 若URL格式为 `https://example.com/#/path?param=1`,需先提取有效部分: ```javascript const effectiveSearch = window.location.hash.split('?')[1] || ''; ``` 2. **处理中文编码** 使用 `decodeURIComponent()` 解码特殊字符: ```javascript const decodedValue = decodeURIComponent(params.get('city')); // 将"%E5%8C%97%E4%BA%AC"转为"北京" ``` #### 四、兼容性补充 - **`URLSearchParams` 的IE兼容性问题**:可通过引入[polyfill](https://github.com/ungap/url-search-params)解决 - **替代方案**:使用动态创建`<a>`标签解析(引用[^1]原理): ```javascript const parser = document.createElement('a'); parser.href = 'https://example.com?color=blue'; console.log(parser.search); // 输出"?color=blue" ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值