js获取get数据

JavaScript013

js获取get数据,第1张

js获取get数据

如今前后端分离已经成为趋势,也就是说许多页面如果外部做链接 就需要 自定义 话的 页面进行参数设置,目前有效的办法就是get参数。通过自定义的get参数为封装的 vue等框架 提供页面变量标识! 当然也可以使用路由进行。

/ --------------------实现2(返回 $_GET 对象, 仿PHP模式)---------------------- /

function getUrlGet(){

var url = window.location.href, tmpArr = url.split('?'), tmp, rst = {}, tmpArr2, tmpArr3

tmp = (0 <tmpArr.length)?tmpArr[1]:''

if('' == tmp)return rst

tmpArr2 = tmp.split('&')

for(var i = 0i <tmpArr2i++){

tmpArr3 = tmpArr2[i].split('=')

rst[tmpArr3[0]] = tmpArr3[1]

}

return rst

}

拿去用,不谢。

在浏览器地址栏中输入某个URL地址或单击网页上的一个超链接时,浏览器发出的HTTP请求消息的请求方式为GET。如果网页中的<form>表单元素的method属性被设置为“GET”,浏览器提交这个FORM表单时生成的HTTP请求消息的请求方式也为GET。

使用GET请求方式给WEB服务器传递参数的格式:

http://www.it315.org/counter.jsp?name=zhangsan&password=123

使用GET方式传送的数据量一般限制在1KB以下。

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>JS</title>

    <style>

        #box{

            width:600px

            height:200px

            padding:20px

            border:1px solid #999

        }

    </style></head><body>

    <h1>ajax get方式传递参数</h1>

    <hr>

    Number1: <input type="text" id="num1"><br>

    Number2: <input type="text" id="num2"><br>

    <button onclick="loadHtml()">加载</button>

    <div id="box"></div>

    <script>

        function loadHtml(){            //获取表单中的数据

            var num1 = document.getElementById('num1').value            var num2 = document.getElementById('num2').value            //实例化 XMLHttpRequest对象

            if(window.XMLHttpRequest){                //非IE

                var xhr = new XMLHttpRequest()

            }else{                var xhr = new ActiveXobject('Microsoft.XMLHTTP')

            }            //给xhr 绑定事件 检测请求的过程            xhr.onreadystatechange = function(){

                console.log(xhr.readyState)                //如果成功接收到响应

                if(xhr.status == 200 && xhr.readyState == 4){

                    document.getElementById('box').innerHTML = xhr.responseText

                }

            }            //进行请求的初始化            xhr.open('get', 'js.php?n1='+num1+'&n2='+num2, true)            //正式发送请求            xhr.send()

        }    </script></body></html>

        

        js获取get方式传递的参数

 String.prototype.GetValue= function(parm) {  

   var reg = new RegExp("(^|&)"+ parm +"=([^&]*)(&|$)")  

   var r = this.substr(this.indexOf("\?")+1).match(reg)  

   if (r!=null) return unescape(r[2]) return null  

 }

完整测试代码

test.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>无标题文档</title>

<script>

String.prototype.getValue= function(parm) {  

var reg = new RegExp("(^|&)"+ parm +"=([^&]*)(&|$)")  

var r = this.substr(this.indexOf("\?")+1).match(reg)  

if (r!=null) return unescape(r[2]) return null  

function init(){

var url = window.location.href

if(url.getValue('key1') == null){

alert('没有传递参数')

}else{

alert('传递参数:key1=' + url.getValue('key1'))

alert('传递参数:key2=' + url.getValue('key2'))

}

}

</script>

</head>

<body onload="init()">

<input type="button" onclick="window.location=window.location + '?key1=value1&key2=value2'return false" value="传递参数"/>

</body>

</html>

GET方式的请求:

直接在浏览器地址栏中输入访问地址,form元素不需要设置method属性,或设置为get。GET方式的请求会将请求参数的名和值转换成字符串,并附加在原URL之后,因此可以在地址栏中看到请求参数名和值;且GET请求传送的数据量较小,一般不能大于2kb

POST方式的请求:

这种方式提倡使用提交表单的方式来发送,且需要设置form元素的method属性为post。POST方式传送的数据量较大,通常认为POST请求参数的大小不受限制,但往往取决于服务器的限制,POST请求传输的数据量总比GET传输的数据量大,而且POST方式发送的请求参数以及对应的值放在HTML HEADER中传输,用户不能在地址栏里看到请求参数值,安全性相对较高。

由上,我们通常采用POST方式发送请求,如果需要传递的参数是普通字符串,而且仅需传递少量参数,可以选择使用GET方式发送请求参数,GET方式发送的请求参数被附加到地址栏的URL之后,地址栏的URL将会变成如下形式:

url?param1=value1&param2=value2&......paramN=valueN

URL和参数之间以?分隔,而多个参数之间以&分隔

var opt ={  

                    url : urlConfig.interfaceUrl.project_interfaceConfig.getProjectSets,  

                    type : 'GET',  

                    data : {  

                        hid : hospId  

                    }  

                }  

            alert(JSON.stringify(opt))  

            ri.getData(opt,function(data){  

                alert(1111)  

                alert(JSON.stringify(data))  

                    //$scope.projectSets = data.data.projectSets     

            })  

[javascript] view plain copy

define(function (require, exports, module) {  

    var pageJob = require('../action/pagejob')  

    var filterData = require('../kit/filterData').interfaceUrl  

    var urlConfig = require('../interface/config')  

    var ri = require('../kit/useInterface')  

[javascript] view plain copy

var getData = function(param,callback,failure,text,timeOutText){  

    var url = param.url || ''  

    if(param.isShowLoading){  

        loadingPopStartTime = new Date().getTime()  

        getInterfacePop.window('open')  

    }  

    isTimeout = false  

    $.ajax({  

        url : url,  

        type : param.type || "POST",  

        data : param.data,  

        success : function(data){  

            if(typeof data == 'string'){  

                data = JSON.parse(data)  

            }  

            if(isTimeout){  

                return   

            }  

            isTimeout = true  

            clearTimeout(timer)  

            openLoadingPop(function(){  

                if(data.code == "A00000"){  

                    // A00000 表示成功  

                    callback && callback(data)  

                } else {  

                    $.messager.alert('来自系统的消息',text || data.data)  

                    failure && failure(data)  

                }  

            })  

  

        }  

    })  

  

  

    var timer = setTimeout(function(){  

        if(isTimeout){  

            return   

        }  

        isTimeout = true  

        $.messager.alert('来自系统的消息',timeOutText || '当前网络异常,无法连接服务器。请重新尝试。','warning')  

        failure && failure({})  

        getInterfacePop.window('close')  

    },TIMEOUT)  

}  

主要是这里的data,这种写法,URL中,会如下

[javascript] view plain copy

data : {  

                        hid : hospId  

                    }  

dn.net/postedit?hid=79

如果

data : hospId

这种写法,

url如下:

dn.net/postedit?79

恩,all

使用GET方式传递参数

在浏览器地址栏中输入某个URL地址或单击网页上的一个超链接时,浏览器发出的HTTP请求消息的请求方式为GET。

如果网页中的<form>表单元素的method属性被设置为了“GET”,浏览器提交这个FORM表单时生成的HTTP请求消息的请求方式也为GET。

使用GET请求方式给WEB服务器传递参数的格式:

       http://www.ititit.net/iet.jsp?name=zhangsan&password=123

使用GET方式传送的数据量一般限制在1KB以下。

解析对应的url取出想要的参数值可以这样做:

[javascript] view plain copy

   

function request(pata)  

    {   

        var url = location.href   

        var paraString = url.substring(url.indexOf("?")+1,url.length).split("&")  

        var paraObj = {}   

        for (i=0 j=paraString[i] i++){   

        paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length)   

        }   

        var returnValue = paraObj[pata.toLowerCase()]   

        if(typeof(returnValue)=="undefined"){   

        return ""   

        }else{   

           return returnValue  

        }

参考资料

get.CSDN[引用时间2018-5-3]