js获取get数据
如今前后端分离已经成为趋势，也就是说许多页面如果外部做链接 就需要 自定义 话的 页面进行参数设置，目前有效的办法就是get参数。通过自定义的get参数为封装的 vue等框架 提供页面变量标识！ 当然也可以使用路由进行。
/ --------------------实现2(返回 $_GET 对象, 仿PHP模式)---------------------- /
在浏览器地址栏中输入某个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¶m2=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]
<input name="input1" type="text" value="" /><input name="input2" type="button" onclick="javascript:pF.location.href='Project_Update_.asp?R=R&AC=1&jiedanren='+document.getElementsByName('input1')[0].value" value="接单" />
不过这样写不太好，最好写成一个函数，里面可以判断接单人为空时，不做任何操作，减小错误发生
