同前端跳转页面传递参数

在编写前端代码的时候有时候需要传递前页面相应得参数 在这里介绍一个简单得小方法<路由传参>

首先 前端先写一个点击事件:

在script中用window.location进行页面跳转,注意此时需要夹带需要传递得参数,并进行字符串拼接 。如图:(本文以传递ID为例)

在另一页面定义一个标签并附带相应ID选择器,如图:

在script中截取URL传递过来的参数;相应代码如下

<script>
		//获取url中的参数
        function getUrlParam(name) {

			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg);  //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值

		}

		var name = getUrlParam(‘id‘)
		$(‘#showid‘).html(name) // 给id选择器相对应标签渲染传递过来的参数

</script>

  

页面展示效果图:

点击对应得编辑按钮后跳转和夹带相应得参数 并对跳转后标签渲染:如图:

原文地址:https://www.cnblogs.com/wjohh/p/10652452.html

时间: 2024-10-08 00:08:09

同前端跳转页面传递参数的相关文章

springmvc重定向跳转向页面传递参数

springmvc提供了RedirectAttributesModelMap类可以绑定重定向跳转需要向页面传递的值 RedirectAttributesModelMap rModel = new RedirectAttributesModelMap(); rModel.addFlashAttribute("键", 值); RedirectAttributesModelMap继承了ModelMap,实现了RedirectAttributes接口,原理是把属性放到session中,在跳转到

【JavaScript】从调用者页面传递参数

(1).aspx <param name="initParams" value="xml=Assets/SDKConfig.xml" /> 注意:只认识initParams,其他的不认. (2)app.xaml.cs private void Application_Startup(object sender, StartupEventArgs e) { string xmlConfig = e.InitParams["xml"];

Vue用router.push(传参)跳转页面,参数改变,跳转页面数据不刷新的解决办法

vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: goPage(ParentDeptCode2,DeptCode2,hosName,hosId){ this.$router.push({ path:'/ChoiceTime', query:{ DeptCode:ParentDeptCode2, DeptCode2:DeptCode2, hosName:hosName, hosId:hosId } })} 但是当遇到,需要跳转同页面不

2个JSP页面传递参数

跳转方式: window.location.href 参数传递方式:URL JSP1代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script> function go() { //获取#dia的值 var s = document

页面传递参数带中文产生乱码

JavaScript有三个对字符串编码的函数,分别是:escape,encodeURI,encodeURIComponent,相应解码函数unescape,decodeURI,decodeURIComponent . 后台C#可以使用Request.QueryString和Server.UrlDecode等来解码使用: 1. escape()函数 定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法 escape(string) 参数  描述  s

JSP页面传递参数乱码问题整理

1.JSP页面之间传递中文参数乱码 (1).a.jsp中正常传递参数,b.jsp 中 <% String projectName = new String(request.getParameter("projectName").getBytes("ISO-8859-1"),"UTF-8"); %> <meta http-equiv="Content-Type" content="text/html;

WinForm页面之间(父页面传递参数给子页面)传递参数

方法一通过构造函数: 父页面(frmMain)点击btnQuery按钮进入子页面(frmListInfo),将数据库名(pdtDB)传递给子页面 父页面代码: private void btnQuery_Click(object sender, EventArgs e) { string pdtDB = FISTools.TAttributeCollection.ProductInfo["DatabaseName"].ToString();//数据库名 this.TopMost = f

菜单项向子页面传递参数

在菜单定义中如下定义: ~/Information/inspectionLog.aspx?category=1 注意参数不要用引号 在跳转页面中进行参数判断 private void LoadData() { string cateID = Request.QueryString["category"];   if (cateID == "1") lblTest.Text = "系统1";   else lblTest.Text = "

微信小程序跳转页面时参数过长导致参数丢失

问题描述: 微信小程序:跳转页面时传参,参数过长导致参数丢失 跳转到文章详情页时,使用的文章链接e.currentTarget.dataset.id过长导致参数丢失 handleClickArticle: function (e) { wx.navigateTo({ url: '/pages/index/articleinfo/articleinfo?urllink=' + e.currentTarget.dataset.id }) }, 解决方案: 调用微信的API,将参数编码传送,解码接收,