精华内容
下载资源
问答
  • 背景介绍我们今天讲的传参是指页面之间的数据传递。传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下,一个稍微正式点的项目都不可能少了页面间传参,页面的跨越、服务器后台进行数据...

    js有哪几种传参方式?

    小课堂【北京-web-A组】

    分享人:吴昊杰

    目录

    1.背景介绍

    2.知识剖析

    3.常见问题

    4.解决方案

    5.编码实战

    6.扩展思考

    7.参考文献

    8.更多讨论

    1.背景介绍

    我们今天讲的传参是指页面之间的数据传递。

    传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下,

    一个稍微正式点的项目都不可能少了页面间传参,页面的跨越、服务器后台进行数据请求等,都需要一个或多个传参的方法。

    那么参数在不同的页面间进行传递,一个页面的参数被另一页面使用,如何才能做到不同页面间进行参数传递?

    在JS中有多种页面传递参数的方法:

    一、URL

    把参数值附在url后面传递到其他页面

    二、H5 web storage

    localStroage 和 sessionStorage

    三、Cookie

    使用浏览器Cookie传递参数

    四、Form 表单

    Form表单通过URL传递参数

    2.知识剖析

    2.1、URL传参

    把参数值附在url后面传递到其他页面

    如:

    http://xxx.com/login.html?user=laozhang&pwd=66666

    其中 “user=laozhang”和 “pwd=66666”就是我们传递的参数名称和值。

    url和参数之间用 "?"隔开

    多个参数之间用 "&"符号连接。

    URL地址传递参数的几个特点:

    优点:

    1、 URL地址法简洁易用,可同时传递多个字符型参数;

    2、 URL地址法可以很方便的在页面之间切换并传递参数,无需额外的处理,基于正常情况比较不会性能损失;

    不足:

    3、 URL传递参数长度受限,最大为2K;

    4、 URL只能传递字符型参数,传递中文时,由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误,参数包含中文时可能出现乱码或者参数接收错误;

    5、 信息泄露:URL地址在客户端可见,所以涉及隐私的参数需进行加密后才能进行传递,不加密传输会导致信息泄露,产生安全隐患。

    2.2、H5 web storage

    1、sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

    2、localStorage HTML5本地存储web storage特性的API之一,用于将大量数据(最大5M)保存在浏览器中

    . 保存后数据永远存在不会失效过期,除非手动清除。

    . 不参与网络传输。

    . 一般用于性能优化,可以保存图片、js、css、html 模板、大量数据。

    3、数据以 键/值 (key/value)对存在, web网页的数据只允许该域访问使用

    4、不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

    保存数据:localStorage.setItem(key,value);

    读取数据:localStorage.getItem(key);

    删除单个数据:localStorage.removeItem(key);

    删除所有数据:localStorage.clear();

    得到某个索引的key:localStorage.key(index);

    5、数据储存:

    在有多组数据需要储存时,一般:

    .建立一个新的对象,然后将多组数据储存在对象中,

    .使用 JSON.stringify() 来将对象转换为字符串,

    .使用localStorage.setItem(key,value);保存数据。

    6、数据提取:

    .使用localStorage.getItem(key)读取数据

    . 使用 JSON.parse 方法将字符串转换为 JSON 对象。

    . 直接引用对象的各个值。

    2.3、Cookie

    Cookie是什么

    Cookie是当你浏览某网站时,网站存储在你机器上的一个小文本文件,

    它记录了你的用户ID,密码、浏览过的网页、停留的时间等信息,当你再次来到该网站时,

    网站通过读取Cookie,得知你的相关信息,就可以做出相应的动作,如在页面显示欢迎你的标语,

    或者让你不用输入ID、密码就直接登录等等

    Cookie一般有两个作用。

    第一个作用是识别用户身份。

    比如用户 A 用浏览器访问了 http://a.com,那么 http://a.com 的服务器就会立刻给 A 返回一段数据「uid=1」(这就是 Cookie)。当 A

    再次访问

    http://a.com 的其他页面时,就会附带上「uid=1」这段数据。

    同理,用户 B 用浏览器访问 http://a.com 时,http://a.com 发现 B 没有附带 uid 数据,就给 B 分配了一个新的 uid,为2,然后返回给 B

    一段数据「uid=2」。B 之后访问 http://a.com 的时候,就会一直带上「uid=2」这段数据。

    借此,http://a.com 的服务器就能区分 A 和 B 两个用户了。

    第二个作用是记录历史。

    假设 http://a.com 是一个购物网站,当 A 在上面将商品 A1 、A2 加入购物车时,JS 可以改写 Cookie,改为「uid=1;

    cart=A1,A2」,表示购物车里有 A1 和

    A2 两样商品了。

    这样一来,当用户关闭网页,过三天再打开网页的时候,依然可以看到 A1、A2 躺在购物车里,因为浏览器并不会无缘无故地删除这个 Cookie。

    借此,就达到里记录用户操作历史的目的了。

    Cookie的一些特点。

    1.Cookie可以使用 js 在浏览器直接设置(用于记录不敏感信息,如用户名), 也可以在服务端通使用 HTTP 协议规定的 set-cookie

    来让浏览器种下Cookie,这是最常见的做法。

    2.每次网络请求 Request headers 中都会带上Cookie。所以如果 Cookie太多太大对传输效率会有影响。

    3.一般浏览器存储Cookie最大容量为4k,所以大量数据不要存到Cookie。

    2.4、Form 表单

    Form表单传值也是通过URL传递参数

    跳转至page2.com时,

    url为: page2.com?id=laozhang&name=666666

    通常使用的表单的提交方式主要是:

    post和get两种。

    两者的区别在于:post方式是把数据内容放在请求的数据正文部分,没有长度的限制;

    get方式则是把数据内容直接跟在请求的头部的URL后面,有长度的限制。

    而一般在表单的数据提交中,都会选择POST方式,

    因为使用GET方法数据是通过URL传递的,在地址栏中会直接看到传递的数据,这样就缺少安全性。

    而使用POST传递时,是把提交的数据放置在HTTP包的包体中,地址栏不会看到数据。

    3.常见问题

    既然有如此多种页面传参的方式。那么问题来就来了,在什么情况下,适合使用以上介绍的传递方式呢?

    4.解决方案

    在传递少量不涉及隐私的参数时可以使用直接url或者Form的GET方式传递,大量数据可以用POST传递

    会话信息等可以用cookie和localStorage,临时数据可用sessionStorage

    5.编码实战

    6.扩展思考

    传参方式的优缺点

    6.1、URL传参:

    优点:取值方便,可以跨域。

    缺点:值长度有限制。

    6.2、H5 Web storage:

    优点:使用起来非常简单、方便。

    缺点:兼容性有点小问题。兼容性: 现代浏览器(firefox safari chrome opera)都支持,IE8以下(不包括IE8)不支持。

    6.3、Cookie传参:

    优点:兼容性最好,可以在同源内的任意网页内访问,生命期可以设置。

    缺点:值长度有限制(存储的容量小),还得注意请求接口时别带到http head。

    7.参考文献

    8.更多讨论

    一.

    二,登录之后如何判断是否已登录

    传统方法Cookie-sessin验证,token验证,cookie保存格式和参考说明.

    三.为什么要传递参数

    为了页面之间能更多的数据交流和互动.

    cook引用值的类型可以看下面的资料.

    http://jerryzou.com/posts/cookie-and-web-storage/

    JS数据按值传递

    http://www.cnblogs.com/youxin/p/3354903.html

    GIt地址:    https://ptteng.github.io/WEB/ppt/js-2sessinStorage.html#/  可以看这个.

    腾讯视频:     https://v.qq.com/x/page/u0539jyxgha.html

    鸣谢

    感谢大家观看

    BY : 郭俊伟/王姣妍/吴昊杰

    展开全文
  • Web页面之间参数传递方法

    千次阅读 2016-03-14 18:01:38
    WEB环境中页面之间的数据传递可以通过传统的URL参数传递和会话级传递以及通过ASP.NET服务器控件传递页面值。 1使用Querystring Querystring是一种非常简单的传递参数的方式,其缺点就是会把要传送的值显示在...
    WEB环境中页面之间的数据传递可以通过传统的URL参数传递和会话级传递以及通过ASP.NET服务器控件传递页面值。
    

    1使用Querystring

    Querystring是一种非常简单的传递参数的方式,其缺点就是会把要传送的值显示在浏览器的地址栏中(不安全)同时在使用querystring传值得时候不能传递对象,参数的长度不能大于1024字节,当参数中有中文得时候,通常需要使用HttpUlitity.UrlEncode方法来对参数进行编码和解吗。当然如果你想传递一个安全性不是那么太重要或者是一个简单的数值时,用此方法最好不过了。下面通过一个小例子来完成参数传递过程

    a.aspxC#代码

    private void Button1_Click(object sender System.EventArgs e)

    {

    string s_url;

    s_url = "b.aspx?name=" + Label1.Text;

    Response.Redirect(s_url);

    }

    b.aspxC#代码

    private void Page_Load(object sender EventArgs e)

    {

    Label2.Text = Request.QueryString["name"];

    }

    2.使用Application传递参数

    使用Application变量传递参数是一种最常见的方法,Application对象的作用范围是整个全局,也就是说对所有用户都有效。其常用的方法用LockUnLock。但是缺点在于使用Application得使用一般是相对于整个项目来说相对静止的变量,比如数据库连接变量等。对于那些针对每一个用户,每一个会话未必一样得变量就不适用了。通常Application变量得值是在Config终指定。也可以在global.ascx中指定例如:

    a.aspxC#代码

    private void Button1_Click(object sender System.EventArgs e)

    {

    Application["name"] = Label1.Text;

    Server.Transfer("b.aspx");

    }

    b.aspxC#代码

    private void Page_Load(object sender EventArgs e)

    {

    string name;

    Application.Lock();

    name = Application["name"].ToString();

    Application.UnLock();

    }

    3使用Session变量

    使用Session变量传值是一种最常见的方式了,优点此种方式不仅可以把值传递到下一个页面,还可以交叉传递到多个页面,直至把Session变量的值removed后,变量才会消失。但是使用Session变量往往会占用服务器端的内存使用,所以再网页流量很大的时候,Session便不能很好的完成传值得任务,由于session有一个timeout,所以在使用的时候对用户得操作也有一定的影响。例如:

    创建一个web form

    在新建的web form中放置一个button1,在放置两个TextBox1TextBox2 button按钮创建click事件代码如下:

    private void Button1_Click(object sender System.EventArgs e)

    {

           Session["name"]=TextBox1.Text;

           Session["email"]=TextBox2.Text;

           Response.Redirect("webform2.aspx");

    }

    新建一个目标页面命名为webform2webform2中放置两个Label1Label2webform2Page_Load中添加如下代码:

    private void Page_Load(object sender System.EventArgs e)

    {

           Label1.Text=Session["name"].ToString();

           Label2.Text=Session["email"].ToString();

           Session.Remove("name");

            Session.Remove("email");

    }

    运行即可看到传递后的结果了。

    4使用cookie方法传递参数

    这个也是大家常使用的方法,cookie是浏览器端的文本文件,通过对它的读、写,可以很方便的实现页面间的与Session一样,其是针对每一个用户而言的,但是有个本质的区别,即Cookie是存放在客户端的,而session是存放在服务器端的。而且Cookie的使用要配合ASP.NET内置对象Request来使用。cookie是浏览器端的文本文件,通过对它的读、写,可以很方便的实现页面间的参数传递,而且作为保存时间,也就是数据得有效期来说,确是保存得最好的。但是其缺点是安全性较差,大小受限,不能保存对象。例如:

    a.aspxC#代码

    private void Button1_Click(object sender System.EventArgs e)

    {

    HttpCookie cookie_name = new HttpCookie("name");

    cookie_name.Value = Label1.Text;

    Reponse.AppendCookie(cookie_name);

    Server.Transfer("b.aspx");

    }

    b.aspxC#代码

    private void Page_Load(object sender EventArgs e)

    {

    string name;

    name = Request.Cookie["name"].Value.ToString();

    }

    5 使用Server.Transfer方法

    这个可以说是面象对象开发所使用的方法,其使用Server.Transfer方法把流程从当前页面引导到另一个页面中,新的页面使用前一个页面的应答流,所以这个方法是完全面象对象的,简洁有效。它在服务器端直接重定向效率高。而且它可以传递上一个页面的提交值。比如:A页面提交值到B页面,B页面TransferC页面,C页面同样可以收到A页面提交的值。但是它的缺点在于不能刷新页面,比如:A页面提交登录信息到B页面,B页面处理后Transfer再到AA页面得不到刷新,指定了过期也不行。如果AB页面不在同一个目录下,我们还会发现更多意想不到的结果,使用相对链接的图片、超链接的指向都改变了,造成这种原因是B页面读取A页面内容却以B页面的身份输出,所以路径改变了。例如:

    a.aspxC#代码

    public string Name

    {

    get{ return Label1.Text;}

    }

    private void Button1_Click(object sender System.EventArgs e)

    {

    Server.Transfer("b.aspx");

    }

    b.aspxC#代码

    private void Page_Load(object sender EventArgs e)

    {

    a newWeb; //实例a窗体

    newWeb = (source)Context.Handler;

    string name;

    name = newWeb.Name;

    }

          以上五种在Web页面之间传递值的方法它们各有其优缺点我们通过他们的优缺点比较发现它们各自的特点。因而使用它们时要根据具体的实际情况选择使用那一种方法不可一概而论。

    展开全文
  • Web页面之间经常需要传递各种信息,提交、响应。下面收集一些方法,以便以后使用。URL  URL的方式,是通过网页地址(URL)后面附加进行传送。方法简单,但缺乏安全性: ...

    Web页面之间经常需要传递各种信息,提交、响应。下面收集一些方法,以便以后使用。

    • URL 

    URL的方式,是通过网页地址(URL)后面附加进行传送。方法简单,但缺乏安全性:

    http://www.xxx.com?name=value&name2=value2

    其他页面通过:Request.QueryString[“name”]

    • Form提交

    通过网页表单进行。用户在浏览器端通过Form表单填写信息,并通过submit提交给服务器。其他页面则可以获取该信息:

    其他页面通过Request.Form[“name”]来获取填写信息。

    • Cookie方式

    第一个页面:HttpCookie cookie = new HttpCookie(名称,值); Response.Cookies.Add(cookie);

    第二个页面:Request.Cookies["名称"].Value

    这样就可以获得。至于Cookie的保存方式,这里不多介绍。

    • Application方式

    application对象是用来记录整个网站信息的,是记录不同浏览器端共享的变量,无论有几个浏览者同时存取网页,都只会产生一个application对象实例。用户可以通过定义application整站共享变量来实现网页间的数据传递。其定义方法是:application(“变量名”)=数值

      如:application(“usrname”)=liming

      application对象所定义的变量对于所有浏览端都是可见的,所以其使用场合是所有浏览端共享的全局数据传递。

    • Session

    session对象是用来记录浏览器端的变量,是个别浏览器端专用的变量,对于每一个浏览器访问时都会自动产生一个seseion对象,该对象提供一个存储场所,用来存储仅仅对该访问者在会话的活动期间打开的网页可用的变量和对象。这样就用可以用来在Web间传递专对单个浏览器端使用的数据。其定义方法:session(“变量名”)=数值

      如:session(“usename”)=liming

      session对象所定义的变量只是浏览器端的专用变量,所以适用于局部会话间的网页数据传递。

    如论坛等空间的用户登录,其他网页默认之前的登录。而不需要重新登录。可以设置有效期等信息。

    • Ajax

    在用Extjs框架做web前端的时候,用到这个技术异步操作。也可以实现提交和获取信息,需要用json数据形式。方法在之前的帖子中有描述。

    展开全文
  • 探讨了ASP.NET设计中常用的Web页面数据传递的实现方式,分析了各种数据传递方式的使用方法、使用场合及优缺点,对开发基于Web的数据传递有很好借鉴之处。
  • 不同页面之间实现参数传递几种方式讨论(黎声)由于web系统采用http协议在浏览器和服务器之间传输数据,而http协议是一种无状态协议,如何在不同页面之间传递数据,可以有一下几种方式方式一:表单方式传递表单...

    不同页面之间实现参数传递的几种方式讨论(黎声)

    由于web系统采用http协议在浏览器和服务器之间传输数据,而http协议是一种无状态的协议,如何在不同页面之间传递数据,可以有一下几种方式

    方式一:表单方式传递

    表单传递参数是一种最简单,也是最基本的参数传递方式。注意:表单元www.cppcns.com素隐藏按钮的使用

    方式二:带参数的url方式传递

    带参数的url写法: url?参数名1=值1&参数名2=值2。

    方式三:请求request编程客栈对象

    可以将数据绑定到request对象上,通过request对象getAttribute和setAttribute方法读写

    方式四:用户会话session对象

    可以将数据绑定到session对象上,通过session对象getAttribute和setAttribute方法读写

    方式五:application对象

    可以将数据绑定到application对象上,通过application对象getAttibute方法和setAttribute方法读写

    方式六:cookie对象

    可以将数据写到到客户端浏览器cookie文件中。

    其中方式一,方式二只能实现字符串参数的传递,方式三,四,五,六可以实现对象的传递(方式六需要对象序列化后进行存储)

    方式一,方式二,方式三数据传递只能请求页面

    方式四和xcmDZNDii六保存的数据对象都是和某个用户相关的信息,不同的是方式四将数据保存到服务器内存中,方式六将数据保存到客户端内存中。

    方式五保存的数据对象都是和所有用户相关的信息,数据也是保存到服务器内存中

    以上这篇关于不同页面之间实现参数传递的几种方式讨论就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

    本文标题: 关于不同页面之间实现参数传递的几种方式讨论

    本文地址: http://www.cppcns.com/ruanjian/java/179024.html

    展开全文
  • 由于web系统采用http协议在浏览器和服务器之间传输数据,而http协议是一种无状态协议,如何在不同页面之间传递数据,可以有一下几种方式 方式一:表单方式传递 表单传递参数是一种最简单,也是最基本参数传递...
  • 不同页面之间实现参数传递几种方式讨论(黎声) 由于web系统采用http协议在浏览器和服务器之间传输数据,而http协议是一种无状态协议,如何在不同页面之间传递数据,可以有一下几种方式 方式一:表单方式传递 ...
  • 在Asp.net的页面之间传递数据的几种方法 一、使用Querystring Querystring是一种非常简单传值方式,其缺点就是会把要传送值显示在浏览器地址栏中,并且在此方法中不能够传递对象。如果你想传递一个安全性不是...
  • 跳转方式直接是 window.location.href,一个典型跨页面信息传递,属于不同页面之间共享信息情况。那么跨页面共享信息的方式有哪些呢?本文将介绍三种方式。URL参数传递列表页面查询参数,可以通过URL的方式传....
  • 不同页面之间实现参数传递几种方式讨论(黎声)由于web系统采用http协议在浏览器和服务器之间传输数据,而http协议是一种无状态协议,如何在不同页面之间传递数据,可以有一下几种方式方式一:表单方式传递表单...
  • 跳转方式直接是 window.location.href,一个典型跨页面信息传递,属于不同页面之间共享信息情况。那么跨页面共享信息的方式有哪些呢?本文将介绍三种方式。URL参数传递列表页面查询参数,可以通过URL的方式传....
  • 文章目录一、简介1、Web Worker类型可以分为两种2、Web Worker使用场景3、Web Worker限制4、Worker上下文二、专用线程(Dedicated Web Worker)1、线程创建2、线程数据通讯方式3、关闭 Worker4、错误处理5、加载...
  • 目前的Web Application大多采用流行基于B/S模式三层架构开发,这里三层架构指就是Web层、业务层和数据访问层。采用分层开发方式有很多好处,下面只简单地来说两点: (1) 分层开发使不同...
  • 两个html页面间如何传递数据

    千次阅读 2019-12-27 22:39:59
    最近自己再做一些web的开发项目,在不同html之间传递数据我总结了3种方式。 一.通过表单简单传输数据,利用js代码接收传递数据,注意method属性要设为get。 <form id="form" action="data....
  • 当对Android有一些了解后,不难发现,Android程序UI框架接近于Web页面的概念。每一个用于呈现页面的组件,Activity,都是彼此独立的,它们通过系统核心来调度整合,彼此之间的通过Intent机制来串联。每一种架构都会...
  • WEB页面传参有哪些方式

    千次阅读 2008-09-01 00:12:00
    Asp.Net页面之间传递数据大致有这么几种方式: 1.GET方式: 即通过URL加上自定义name-value集合,这个一般大家都在用,也很方便,而且客户可以直接通过URL访问特定页面。...
  • WEB页面传参有哪些方式

    千次阅读 2010-06-29 09:27:00
      Asp.Net页面之间传递数据大致有这么几种方式:   1.GET方式:   即通过URL加上自定义name-value集合,这个一般大家都在用,也很方便,而且客户可以直接通过...
  • 在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是...各种web开发语言中,各个页面之间基本都会进行数据的传递web开发里面比较常用的数据传递方式有get post,一直以来我都只知道get传递的数据量要比...
  • web组件之间的跳转

    2016-08-15 23:10:23
    web组件之间的跳转 复习: 此内容在我上篇博客有. Http 共享数据的传递:   HttpServletRequst是获取当前浏览器访问的页面并通过某个提交或事件功能get或post的方式提交的数据,此数据只能此Servlet类中使用.如果...
  • 各种web开发语言中,各个页面之间基本都会进行数据的传递web开发里面比较常用的数据传递方式有get post,一直以来我都只知道get传递的数据量要比post传递的数据量要少,所以传递大数据量还是要用post,但是 ...
  • Java Web中界面之间传值实现方法

    万次阅读 2016-04-25 13:19:03
    web中,我们经常要在页面之间进行值的传递,下面就让我们来实现: 传值时有以下几种方式,分别如下:  1、利用URL直接进行传值 2、cookie进行数据传送 3、利用session进行传值
  • android Activity之间的参数传递

    千次阅读 2013-06-15 17:44:44
    在开发web程序时候,我们都知道web页面之间是可以传递参数,在android中,每一个activity就相当于一个页面(窗口), 当然,它也是可以传递参数。 思路:通过Intent --->激活组件(Activity),附带数据 ...
  • 实现参数传递的几种方式

    千次阅读 2017-08-03 10:55:26
    由于web系统采用http协议在浏览器和服务器之间传输数据,而http协议是一种无状态协议,如何在不同页面之间、或页面向后端传递数据,可以有一下几种方式  方式一:表单方式传递  表单传递参数是一种最简单,...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 336
精华内容 134
关键字:

web页面之间的传递数据方式