Web前后端交互

~~交互模型

前端发起请求－－－后端处理响应

WebSocket--相当于长连接，前后端双向持续交互信息，音视频媒体之类信息

 

交互的协议-http

请求的发起－1.地址栏-restful风格

　                  2.表单提交

　　　　　　3.调用XMLHttpRequest 模块　（ajax提交）

交互的内容-文本表单

　　　　　 文件多媒体。

 

交互的数据结构。。

   一般以结构型内容为主。{name1:value1;}

 

前后台一般会经历对象－列表－数组－字符串－数组－列表－对象

这样聚集又泛化

  

~~~参数交互

 １.直接地址栏。

　　　参数形式

　　　　1.1 url: control/action/xxxx　　　　　

                    fun: action(string id)

                用于只有一个主要参数，后台简洁。

             1.3 url:control/page?p1=xx

　　　   　　fun:和1.1一样

           1.2 url:control/page?p1=xx&p2=xxx

                   C#- fun: request.querystring['p1'].   不能用[FormCollection form] 获取到。。

                  SpringMVC-public String list(int cid, Model model, Page page){}

                  会更加参数名自动注入到类中相同属性名中。

 

 

２.form提交。

原生的内容格式一般有两种

application/x-www-form-urlencoded 

Content-Type: application/x-www-form-urlencoded;charset=utf-8;

key1=val1&key2=val2

用于键值的内容

 

multipart/form-data 

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA

Content-Disposition: form-data; name="text"

title

------WebKitFormBoundaryrGKCBY7qhFd3TrwA

Content-Disposition: form-data; name="file"; filename="chrome.png"

Content-Type: image/png

PNG ... content of chrome.png ...

------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

混合多种对象，可以发送多个文件并包含键值信息。

 

3. ajax

　--url 可以直接带参数，也可以和data一起并行用。后台就需要两种获取参数的格式。

   -- data{id:xx}

         fun:page(string id)..和1.1效果一样

　-- data{p1:xxx;p2:xxx}　 --json格式

         fun:page(FormCollection form)

         form['p1']

 

这里可以设定使用的内容格式，常用的Content-Type: application/json

 

 

ajaxform--将原生表格换成ajaxform

      -- 提交前控制参数

            beforesubmit:function(formData, jqForm, options)--数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象

            增加提交参数，可以在formdata对象里增加。

       　　formData.splice(0,0,{name:'xx',value:'xx',type:'text',required:'false'});

       --预先留占位元素

         <input type='hidden' ,id ,name ,value>

            click 事件时赋值

 　　　$('xxx').value('value')

 

 

~~前端参数组织。

post:　　datatype:"json"--这是指定返回数据的格式

　　　　data:{} --可以是一个对象。。好像也可以是"p=v"的字符串。

 

--数组转对象。

var arr=[];

arr.push("p1:\"v1\"");--先组织成“p:v”这样形式的加入数组;

arrstr="{"+arr.join(",")+"}"--arr序列化成逗号连接，加上格式符'{}'，;

postdata=eval("("+arrstr+")")--加上()让其认为是对象。https://www.cnblogs.com/lovebing/p/8302093.html

 

--对象里包含数组

arr=[]

var postdata={

p_arr:arr.join(",");　　//用join序列化

}

后台再用p_arr.split(',')反序列化为数组。

 

--对象动态添加

postdata.p1=v1;

postdata.p2=v2;

 

 请求类方法参数:

[{page=Page{start=15, count=5, total=0, param='null'}, org.springframework.validation.BindingResult.page=org.springframework.validation.BeanPropertyBindingResult: 0 errors}, Page{start=15, count=5, total=0, param='null'}]

 

 

~~后端返回数据

--json格式列表

后台 return Json(list<obj>)

前端　for {objs[i].p1,obj[i].p2 }--遍历，按属性名读取。

 

--返回子页面

后台 retun partialview(param);

前端 $('xxx').html=(data);

 

 

拼凑子页面

1.脚本中发起

<div id="container"></div>　--容器

post

$('#container').html(data);　--放入

 

后台return partialview(model);

 

2.mvc直接写

@html.Action('page','action',{param});