前后台交互之传参方式

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

一、URL方式传参

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

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

1、参数长度限制:

(1)IIS 7 对 Query String 有长度限制;默认:2048

(2) IE浏览器对URL的长度现限制为2048字节(自己测试最多为2047字节)。

(3)360极速浏览器对URL的长度限制为2118字节。

(4)Firefox(Browser)对URL的长度限制为65536字节。

(5) Safari(Browser)对URL的长度限制为80000字节。

(6)Opera(Browser)对URL的长度限制为190000字节。

(7) Google(chrome)对URL的长度限制为8182字节。

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属性少的情况,且不追求优雅的代码规范下写。

二、JQuery Ajax 方式传递

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

1、get方式

$.ajax({
            type: "get",     //数据发送的方式
            url: "",         //要发送的后台地址
            data: {val1:"1",val2:"2"},  //要发送的数据(参数)格式为{‘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方式

post请求,一般用于提交数据,例如提交用户发表的留言,用户订单等,其数据量可能比较大。

var frm = document.getElementById("xxform");
frm.action=path+‘/abc/abcAction!pramaTest.action‘;
frm.submit(); 

xxform里预置一个hidden的标签,在submit之前可以把veryLongJsonStr赋值给这个隐藏的控件。这样,form的post方式也是可以传递大参数的。不过,可能会存在安全问题。 
一般,我们处理这样的前后台交互,还是使用Ajax、jquery这样的成熟的框架来做这些细微的事情,比较妥当。

四、通过form表单传递。

<form action="Handler1.ashx" method="get"><!--注意action里面的连接不能带参数的-->>
    <input type="text" name="id" value="3" />
    <input type="text" name="name" value="abc" />
    <input type="submit" value="通过传递参数" />
  </form> 

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

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

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

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

总结:

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、无论是get还是post,当  dataType: "json",  时,如果用的是jQuery之类的框架,只要是符合Json格式的字符串就会自动转换为Json对象,就不用 使用eval() 或者 JSON.parse()  方法将字符串转换为 json 对象了。

时间: 2024-10-18 01:05:57

前后台交互之传参方式的相关文章

react中的传参方式

react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a name='a' age={16}/>,app) 在渲染的时候,直接给挂载的组件传参. 2,父子传参 父子传参可以用props和ref两种方式,1,props方式传参,父组件通过改变自己的参数并且通过props将状态传递给子组件,并在子组件中显示.2,通过ref传参,这种方式是通过子组件自己的方法改变自己的

SpringMVC的五种请求传参方式

1.传统传参方式 方法参数中使用request,通过request.getParameter("参数名"),再封装到bean中 @RequestMapping("/test01") public ModelAndView test01(HttpServletRequest request){ String username = request.getParameter("username"); String password = request.

java 传参方式--值传递还是引用传递

java 传参方式--值传递还是引用传递 参数是按值而不是按引用传递的说明 Java 应用程序有且仅有的一种参数传递机制,即按值传递.写它是为了揭穿普遍存在的一种神话,即认为 Java 应用程序按引用传递参数,以避免因依赖“按引用传递”这一行为而导致的常见编程错误. 对此节选的某些反馈意见认为,我把这一问题搞糊涂了,或者将它完全搞错了.许多不同意我的读者用 C++ 语言作为例子.因此,在此栏目中我将使用 C++ 和 Java 应用程序进一步阐明一些事实. 要点 读完所有的评论以后,问题终于明白了

Javaweb的七大传参方式和以及各自特点

学习jsp一段时间,觉得还是需要把自己学习一些东西整理了一下,第一次发东西,还请各位多多支持 1.表单提交 html自带的from方法,简单易懂,便于操作,依靠于<from>标签中的type="submit"进行表单传输,或者根据js进行控制提交表单.其中由method属性决定以post或者get方式进行提交. jsp代码: 1 <form id="test" action="testservlet" method="

vue请求中 post get传参方式是不同的哦

我在学习vue,项目中post请求,get请求都用到了,我发现传参方式是不一样的. post请求的例子: checkin (){ this.$http.post('my url',{ mobilePhone:this.phone, password:this.password },{ emulateJSON: true } ).then(function(res){ this.$root.userid=res.data.userid; console.log(this.$root.userid)

Web API中的传参方式

在Restful风格的WebApi的里面,API服务的增删改查,分别对应着Http Method的Get / Post / Delete /Put,下面简单总结了Get / Post /Delete /Put的传参方式 一.Get传参 get设计成传输小数据,而且最好是不修改服务器的数据,所以浏览器一般都在地址栏里面可以看到,数据放在url的QueryString中. (一)简单类型 $(function () { $.ajax({ type: 'get', url:'http://localh

mock和axios常见的传参方式

第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两个参数,一个是path对象,一个是data对象. path想当于拼接在url地址上的参数, data是url后面的参数. 1.get请求 如果url后面有opts的参数,则说明他需要传递参数.要不就不用传递了,直接写个url就好了,不用拼接参数.(请看下图) 图一是接口 图二是调用了这个接口. 这个

struts2 页面向Action传参方式

1.基本属性注入 我们可以直接将表单数据项传递给Action,而Action只需要提供基本的属性来接收参数即可,这种传参方式称为基本属性注入.例如 jsp页面: <s:form method="post" action="/Login"> <s:textfield name="username" label="用户名"/> <s:password name="password"

夺命雷公狗—angularjs—22—bind改指向和传参方式

在angularjs中的传参的jquery的方式是极度相似的噢,而且还可以通过bind来改变指向 <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js&qu