jquery 实现页面参数传递,并获取相关请求参数
符号
阅读:609
2021-03-31 23:31:00
评论:0
第一步:指定跳转的页面,并填充相关的请求参数:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>查看所有手机品牌接口</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--核心 js文件 -->
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/md5.js" type="text/javascript"></script>
<script src="js/aes.js" type="text/javascript"></script>
<script src="js/core-min.js" type="text/javascript"></script>
<script src="js/json2.js" type="text/javascript"></script>
<!--if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
<!--自定义相关js 文件 -->
<script language="Javascript">
$(document).ready(function(){
var json='{"platform":"2"}';
//执行异步请求
var url_ = 'http://202.103.124.70:8085/services/phoneDataInterface';
var param = '{"data":'+json+',"serviceCode":"TTP_PHONE_Q_BRAND"}';
var contents=JSON.stringify(param);
alert(contents);
$.ajax({
type:'post',
url:url_,
data:param,
dataType:"json",
success:function(data){
//所有手机型号
$.each(data.result,function(id, rowData) {
//alert(id+":rowData.id="+rowData.id+",rowData.bandName="+rowData.bandName);
$("#cs").append("<li style=\"float:; margin-top:3px;margin-left:10px;background: url(images/qx.png) no-repeat;\"><a href=\"#\" class=\"\" οnclick=\"aa(" + rowData.id + ");\">" + rowData.bandName + "</a></li>");
});
},
error:function(XmlHttpRequest,textStatus, errorThrown){
alert("删除失败"+XmlHttpRequest.responseText);
alert("相关信息"+XMLHttpRequest.readyState);
alert("相关信息1"+XMLHttpRequest.status);
alert("响应状态"+textStatus);
alert("异常信息"+errorThrown);
}
});
});
//查询指定品牌的销售量
function aa(index){
//使用location.href进行页面相关参数传递---重点代码
window.location.href="search.html?id="+index+"";
}
</script>
</head>
<body>
<br />
<div class="span3">
<ul class="nav nav-pills nav-stacked" id="cs"
style="font-size:18px;text-align:center;">
</ul>
</div>
</body>
第二步:获取location.href的相关请求参数:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>查询指定品牌的商品</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!--核心 js文件 -->
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/md5.js" type="text/javascript"></script>
<script src="js/aes.js" type="text/javascript"></script>
<script src="js/core-min.js" type="text/javascript"></script>
<script src="js/json2.js" type="text/javascript"></script>
<!--自定义相关js 函数 -->
<script language="Javascript">
//获取location.href相关请求参数
String.prototype.getQuery = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?") + 1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
$(document).ready(function() {
var Url = window.location.href;
var id =Url.getQuery("id");
alert("获取指定参数的值:" + id)
});
</script>
</head>
<body>
<br/>
<div class="container">
<div class="row">
<div class="span4">
</div>
</div>
</div>
</body>
相关效果展示:
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。