获取URL中的表单参数及相关分析和思路

Kratos1229

已于 2022-07-19 13:29:50 修改

阅读量311

点赞数

文章标签：前端 java javascript

于 2022-07-19 13:14:04 首次发布

本文链接：https://blog.csdn.net/qq_33610120/article/details/125867450

版权

本文探讨了四种版本的JavaScript代码，如何逐步改进从URL查询参数中提取关键信息（如status、lpn、start和end）的效率和兼容性，最终推荐使用URLSearchParams对象进行处理，并介绍了其在处理URL参数方面的优势。

摘要由CSDN通过智能技术生成

let url = (decodeURI(window.location.search)).toString()
let statusIndex = url.indexOf("status")
let lpnIndex = url.indexOf("lpn")
let startIndex = url.indexOf("start")
let endIndex = url.indexOf("end")

let status = url.substring(statusIndex+7,lpnIndex-1)
let lpn = url.substring(lpnIndex+4,lpnIndex+11)
let startStr = url.substring(startIndex+6,startIndex+16)
let endStr = url.substring(endIndex+4,endIndex+14)
let start = new Date(Number(startStr)*1000)
let end = new Date(Number(endStr)*1000)

然后就是setInputData

本方法直接获取search然后截取对应字符串，但兼容性不好，表单全填才不会出BUG

第一版解决方案，需要更改。。。

第二版

let search = (decodeURI(window.location.search))
search = search.substring(1,search.length)
let params : Record<PropertyKey, string> = {}
let items = search.split("&")
let len = items.length
let name = null
let value =null

if(len>0){
    for(let i=0;i<len;i++){
        let item=items[i].split("=")
        name = item[0]
        value = item[1]
        console.log(typeof name,name,)
        console.log(typeof value,value)
        params[ name ] = value
    }

}

console.log('search =>',search)
console.log('params =>', params)

第二版可以用，但准备用自带的URL方法分析search

第三版

let url = new URL(window.location.href)
let params : Record<PropertyKey, string> = {}

url.searchParams.forEach((v,k)=>{
    params [k] = v
})



if(params.lpn || params.status || params.start || params.end){
    let start = null
    let end = null

    if(params.start){
        start = new Date(Number(params.start)*1000)
    }

    if(params.end){
        end = new Date(Number(params.end)*1000)
    }

    setInputData({
        ...inputData,
        lpn:params.lpn,
        status:params.status,
        start:start,
        end:end
    })
}

有兼容性问题但问题不大

图片来源：js的URL对象兼容性实测O - linsk1998的个人空间 - OSCHINA - 中文开源技术交流社区

第四版，大佬更改版

let url = new URL(window.location.href)
let params : Record<PropertyKey, string| Date> = {}

url.searchParams.forEach((v,k)=>{
    params [k] = v
})
if(params['start']) {
    params['start'] = new Date(Number(params.start)*1000);
}
if (params['end']) {
    params['end'] = new Date(Number(params.end)*1000);
}
        
if (Object.keys(params).length) {
    setInputData(values => {
        return {
            ...values,
            ...params
        };
    })
}