• 前后台交互之传参方式


    前台向后台传参,一般有如下几种方式:

    一、URL方式传参

    1、使用这种方式时,参数接在url后面,用?分隔,如果有多个参数,各参数间用 & 连接。get方式请求时可以使用URL方式传参。

    巴特URL传参在应用时也有缺陷:

    1.1 参数长度限制:

    (1)IIS 7 对 Query String 有长度限制;默认:2048 ;(2)IE浏览器对URL的长度现限制为2048字节;(3)360极速浏览器对URL的长度限制为2118字节;(4)Firefox(Browser)对URL的长度限制为65536字节;

    (5)Safari (Browser) 对URL的长度限制为80000字节;(6)Opera (Browser) 对URL的长度限制为190000字节;(7)Google (chrome) 对URL的长度限制为8182字节。

    1.2 传递 bean 时很麻烦:

    有种劣质方法可以办到,就是将bean的属性均需作为一个参数连接到url里传递。 
    比如要传递一个人这个类(有身高和性别)到后台, 前台:var pepole = {age:22,sex:'male'}    要是直接把pepole拼接到url里:url?pepole=pepole,后台在不设置struts参数解析拦截器时,以string接收将会是一个object Object。 
    假如后台action里声明的是这个bean类型属性,可以实现的方式是:url?pepole.age=22&pepole.sex=male   (注:URL里点后面的age和sex最好跟pepole的age和sex大小写相同! )
    这样后台就直接接收到了一个bean。 但是,如果bean属性很多,这让前台情何以堪? 所以,这种方法适合bean属性少的情况,且不追求优雅的代码规范下写。

    2、使用示例:

    eg1、点击 button 按钮,触发 onclick 事件,执行 Go() 方法,跳转到 localhost:21811/Handler1.ashx 页面,同时传递了 id 和 name 两个参数。

    <input type="button" onclick="Go()" value="通过js方法传递参数" /> 
    function Go() { 
          window.location.href="localhost:21811/Handler1.ashx?id=1&name='abc'" 
        } 

    eg2、用超链接的 href 传递参数,当点击超链接的时候,首先会跳转到 localhost:21811/Handler1.ashx 页面,然后还会传递 id 和 name 两个参数。

    <a href="localhost:21811/Handler1.ashx?id=1&name='abc'">超链接传递参数</a>

    二、JQuery Ajax 方式传递

    jquery 中 ajax 只需配置相应的参数即可与后台交互。这种方式可传递大数值的数据。

    1、get方式

    $.ajax({
                type: "get",     //数据发送的方式
                url: "",         //要发送的后台地址
                data: {val1:"1",val2:"2"},  //要发送的数据(参数)
                dataType: "json",   //后台处理后返回的数据格式
                success: function (data) {
                                  //ajax请求成功后触发
                                 alert('请求成功');
                              },
                error: function (msg) {
                                 //ajax请求失败后触发
                                 alert(msg);//弹出错误信息
                              }
            });

    后台接收数据(参数):

    <?php
        val1 = $_GET['val1'];  //1
        val2 = $_GET['val2'];  //2
    ?>

    data必须是对象类型,比如data:{"name":"zhangsan"},后台通过 request.getParameter("name")就能接收到name的值。

    2、post方式

    $.post(url,data,success(data, textStatus, jqXHR),dataType)

    url:必需。规定把请求发送到哪个 URL。           data:可选。映射或字符串值。规定连同请求发送到服务器的数据。

    success(data, textStatus, jqXHR):可选。请求成功时执行的回调函数。          dataType :可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。

    例:

     $.post(
               "demo_test_post.asp",
                //传递到服务器的值
               {
                  name:"Donald Duck",
                  city:"Duckburg"
               },
                //回调函数
               function(data,status){
                  alert("Data: " + data + "
    Status: " + status);
           });

    三、form的post方式 (传统form表单提交)

    1、序列化表单值

    通过序列化表单值,创建 url 编码文本字符串。

    <form id="myForm" action="Handler1.ashx" method="get">     <!-- action里面的连接不能带参数的 -->
    <input type="text" name="id" value="3" /> <input type="text" name="name" value="abc" /> <!-- input必须有name属性 --> <input type="submit" value="序列化表单值" /> <!-- 必须是type="submit" --> </form>

     序列化之后的结果:id=3&name=abc     点击提交按钮之后将序列化后的字符串提交到 action 对应的接口。

    2、上面传统的form表单提交会导致页面刷新,如果不希望页面刷新,可使用 ajax 进行请求

    $.ajax({
         url:"  .php",
         type:"POST",
         data:$("#myForm").serialize(),             // JQ Ajax serialize() 序列化表单值
         success:function(data){
             alert(data);
         },
         error:function(data){                           
    alert(data.status+":"+data.statusText+":"+data.responseText); } });

    不过,上述方式只适用于传递一般简单的参数,像文件流就无法被序列化并传递。所以,文件(文件,图片类)上传的时候可使用 FormData,FormData 可以轻松的和 Ajax 结合进行文件上传。

    关于 FormData 的使用,可以看我的另一篇随笔:  H5 FormData对象的使用——进行Ajax请求并上传文件

    四、H5 的 WebSocket 

    客户端与服务端使用 WebSocket 建立连接后,可以实时通信,关于 WebSocket 的使用介绍,可以看我的另一篇随笔:JavaScript WebSocket 使用总结

    五、总结:

    1、jquery ajax 的 get 和 post 方式比较:

    (1)get是把参数数据队列加到提交表单的action属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。

           post是通过 HTTP post 机制,将表单内各个字段与其内容放置在HTML header内一起传送到action属性所指的URL地址。用户看不到这个过程。

    (2)对于get方式,服务器端用Request.QueryString获取变量的值。

           对于post方式,服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。

    (3)get传送的数据量较小,不能大于2KB(不同浏览器也有不同限制)。

            post传送的数据量较大,一般被默认为不受限制。(理论上,因服务器的不同而异)

    (4)get安全性非常低,post安全性较高。

    (5)<form method="get" action="a.asp?b=b">跟<form method="get" action="a.asp">是一样的,也就是说,method为get时action页面后边带的参数列表会被忽视。

           而<form method="post" action="a.asp?b=b">跟<form method="post" action="a.asp">是不一样的。

    2、特性:

    (1)Get请求有如下特性:

           它会将数据添加到URL中,通过这种方式传递到服务器,通常利用一个问号?代表URL地址的结尾与数据参数的开端,后面的参数每一个数据参数以“名称=值”的形式出现,参数与参数之间利用一个连接符&来区分。

    (2)Post请求有如下特性:

           数据是放在HTTP主体中的,其组织方式不只一种,有&连接方式,也有分割符方式,可隐藏参数,传递大批数据,比较方便。

    即:get在 URL 请求里面附带了表单参数和值,post在 HTTP 请求的消息实体中。

    3、使用 ajax 方式时,无论是 get 还是 post,设置参数  dataType: "json",  时,如果用的是jQuery之类的框架,只要是符合Json格式的字符串就会自动转换为Json对象,就不用 使用 eval() 或者 JSON.parse()  方法将字符串转换为 json 对象了。

  • 相关阅读:
    ActiveMQ的作用总结(应用场景及优势)
    深入剖析ThreadLocal实现原理以及内存泄漏问题
    Java ThreadLocal 原理分析
    关于iview ui的"Page分页"组件的使用
    使用TortoiseGit操作分支的创建与合并
    乐观锁与悲观锁的区别
    Linux下如何安装MongoDB及配置
    centos8安装图解(超详细教程)
    SpringBoot整合MongoDB
    PPT学习---醍醐灌顶!你对PPT的理解过时了!
  • 原文地址:https://www.cnblogs.com/lyr1213/p/5902998.html
Copyright © 2020-2023  润新知