前后台交互传参方式

前台向后台传参

      主要有以下2种方式：

一、URL传参

使用这种方式传参时，收个参数置于url的后面，用“?”连接；形式：url?param=value，如果有多个参数，各个参数之间用&连接。

    如：http://zhidao.baidu.com/q?word=%D6%BD%B1%D2+%CB%BA%BB%D9 
    多个参数时，参数间用“&”连接， 
    例如：http://zhidao.baidu.com/q?word=%D6%BD%B1%D2+%CB%BA%BB%D9&lm=0&fr=search&ct=17&pn=0&tn=ikaslist&rn=10

url传参很方便，但有缺陷：

    1、参数长度限制

    IE对于url的长度限制为2048个字节，Google对于url的长度限制为8182个字节，360浏览器url的长度限制为2118个字节，而且单个参数的value值不得超过1920000个字节。

     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。

 

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 + "\nStatus: " + status);
       });

三、form表单的post形式（传统的表单提交）

 

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 结合进行文件上传。

五、总结：

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 对象了。