HTML页面跳转及传递参数

这里使用ajax实现页面跳转并传参；

实例：用户在登录界面输入账号密码后跳转到用户界面并且传递账号姓名；

1、页面跳转：

登录界面ajax跳转代码：

$.ajax({url:"/webapi/login/user",data:{username:name,password:password}}).done(function (rs) {if (rs>=0){//成功window.location.href="/student/list";}else{alert("出错了，您的用户名和密码有误");}});

如果账号密码输入正确，网页就会跳转到 “/student/list" 页面：

 window.location.href="/student/list";

2、传递参数

将跳转页面代码改为如下形式：

window.location.href="/student/list?xm="+$("#username").val();

这样就在页面跳转到 “/student/list" 页面时，将用户登录的姓名也传递到该页面；

“/student/list" 页面接收传递信息的代码：

定义一个id选择子：

<li><h4 id="hyn"></h4></li>

js接收代码：

var url = decodeURI(location.search); //获取url中"?"符后的字串 ?vm_id=2
var dd;
if(url.indexOf("?") != -1) {undefinedstr = url.substr(1);strs = str.split("=");dd = strs[1];
}
$("#hyn").html("欢迎您！ " +dd);

效果图展示：

跳转页面效果：

HTML页面跳转及传递参数相关推荐

[Xcode 实际操作]九、实用进阶-(24)使用Segue(页面的跳转连接)进行页面跳转并传递参数...
目录:[Swift]Xcode实际操作本文将演示使用Segue(页面的跳转连接)进行页面跳转并传递参数. 参照结合:[Xcode10 实际操作]九.实用进阶-(23)多个Storyboard故事板中 ...
php页面跳转参数传递参数,php页面跳转怎样传递参数
[摘要] PHP即"超文本预处理器",是一种通用开源脚本语言.PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言.PHP独特的语法混合了C.Java.Perl以及 ...
HTML 页面跳转时传递参数（jquery.params.js）
HTML 页面跳转时传递参数(jquery.params.js) 描述:在 HTML 页面跳转时,通过 URL 传递参数一.引入在解析参数页面的 JS 中引入:jquery.params.js(代 ...
Vue route页面跳转，传递参数接收到的参数为空
Vue在处理页面跳转传递参数的时候 var devId = row.id; this.$router.push({ name: '/showDevs/devDetail' ,params:{" ...
微信小程序页面跳转如何传递对象参数
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥时候就没了. 微信小程序页面跳转如 ...
vue页面跳转数据传递
vue页面跳转数据传递方法一: 第一页跳转赋值: toParameter:function(row) { this.$router.push({ path:'cardParameter', ...
转：Web页面通过URL地址传递参数常见问题及检测方法
Web页面即我们在浏览器中所看到的网页,在Web应用程序中,其页面往往需要进行动态切换和数据交互,页面间的数据常规传递方法有多种,本文主要介绍Web页面处理程序中常见的URL地址参数传递方法,包括概述 ...
Angular中实现动态路由跳转并传递参数
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
【VUE】两种vue跳转地址传递参数的方法
第一种方式 query 一.根据$router.push({path:'/-',query:{} }在query里面增加参数对象 vm.$router.push({path: '/approve_me ...
微信小程序：页面跳转时传递数据到另一个页面
一.功能描述页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...

HTML页面跳转及传递参数

HTML页面跳转及传递参数相关推荐

最新文章

热门文章