[django]表格的增加与删除实例(能够借鉴参考)

   
想起来陆续研商一些感兴趣的开源代码于是先挑二个代码量短的来衔接一下,写那篇博客的指标是记录下团结上学的长河。Tinyhttpd算是贰个小型的web服务器,浏览器与Web服务器之间的通讯选取的是Http,所以一开首的切入点是HTTP协议,那里说一些假诺有做HTTP通讯的支付照旧看一下HavalFC中对两样版本HTTP的概念,以下原理部分都是从《后台开发:宗旨技术与使用实践》中HTTP协议章节中裁剪出来的,对后台感兴趣的同班能够看一下,讲述后台开发所急需有所的技艺点一本很正确的书。

友善并未采用别的表格插件,参考网上例子,自身编写出来的django网页实例,请各位参考!

一、HTTP协议

第二看图做事,表格布局选取bootstrap,俗话说bootstrap橹多了就会css了,呵呵,上面看图:

HTTP工作流程:

图片 1

  在OSI七层模型中,HTTP是依据TCP上的应用层协议而大家所说的HTTPS基于同处于应用层的TLS、SSL协议层之上。HTTP暗许的端口号为80,HTTPS默许的端口号为443。在HTTP1.第11中学(通过Connection头设置)暗中认可在HTTP传输达成后不断开TCP连接,在此以前的HTTP版本则暗许是断开连接的,也正是说这一次请求与上次请求是分化的五个TCP连接。3次HTTP操作称为贰个作业,其工作过程能够分成以下四步。

上面有多少个按钮,是动态拉长进去的,能够使用jquery语言,$(“#xx”).append新添一个按钮,

  (1)首先客户机与服务器要求树立连接 。 只要单击有些拔尖链接, HTTP
的工作即开头 。
  (2)建立连接后,客户机发送2个伸手给服务器,请求情势的格式为:统一能源标识符(UCR-VL
)、协议版本号,前边是 MIME
新闻(包括请求修饰符、客户机新闻和或者的内容) 。

最大旨的表单代码:

  (3)服务器收到请求后,给予对应的响应新闻,其格式为贰个状态行,蕴涵新闻的商议版本号、1当中标或不当的代码,前边是
MTh伍新闻(包涵服务器音信、实体消息和大概的内容) 。

<button class="btn btn-small btn-primary" type="button" id="blank">添加空白表单</button>
<form class="form-inline">
       {% csrf_token %}
        <table class="table table-conde" id="t2">
            <caption class="text-left"></caption>
            <thead></thead>
            <tbody></tbody>
            <tfoot></tfoot>
        </table>
        <table class="table table-conde" id="t3">
            <caption class="text-left"></caption>
            <thead></thead>
            <tbody></tbody>
            <tfoot></tfoot>
        </table>
        <div class="text-center" id="form_add"></div>
 </form>

  (4)客户端接收服务器所再次来到的音讯通过浏览器突显在用户的显示器上,然后客户机与服务器断开连接

接下去使用js动态加载表格:

HTTP协议结构:

$('#blank').click(function(){//空白表单
            $("#t1 caption").append("<i class='icon-forward'></i> 合同基础清单");
            $("#t1 tbody").append(formbill());
            $("#t2 caption").append("<i class='icon-forward'></i> 附件1 合同手机清单 &nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-small' id='t2row'><i class='icon-plus'></i> 添加一行</a>");
            $("#t2 thead").append("<th>客户姓名</th><th>合同号</th><th>业务号码</th><th>套餐类型</th><th>经办人</th><th>备注</th><th>操作</th>");
            $("#t3 caption").append("<i class='icon-forward'></i> 附件2 合同座机清单 &nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-small' id='t3row'><i class='icon-plus'></i> 添加一行</a>");
            $("#t3 thead").append("<th>客户姓名</th><th>合同号</th><th>业务号码</th><th>套餐类型</th><th>经办人</th><th>备注</th><th>操作</th>");
            $("#form_add").append("<input type='button' id='btn_add' value='提交数据' class='btn btn-primary btn-sm'/>");
      });    

  HTTP 协议无论是请求报文依旧答应报文,都分为以下 4 个部分 。

下一场实现行添加和行删除的功力:

  (1)报文头( initial line ),上边的例子中的“ GET
http://www.baidu.com/favicon.icoHTTP/1.1 ”表示用 GET 方法请求
http://www.baidu.com/favicon. ic。那么些文件,用的是HTTP/1.1 协议。

//行添加
$('#t2 caption').on("click","#t2row",function(){
               var len = $("#t2 tr").length+1; 
              $("#t2 tbody").append("<tr id="+len+">"
                                   +"<td><input type='text' class='input-medium acct_code' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium acc_nbr' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium tc_type' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium con_agent' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium remark' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium remark' placeholder='.input-medium'></td>"
                                   +"<td><a class='btn btn-small' onclick='deltr("+len+")'>删除</a></td>"
                                   +"</tr>"
                                   );
      });
      $('#t3 caption').on("click","#t3row",function(){
            var len = $("#t3 tr").length+1; 
              $("#t3 tbody").append("<tr id="+len+">"
                                  +"<td><input type='text' class='input-medium acct_name' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium acct_code' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium acc_nbr' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium tc_type' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium con_agent' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium remark' placeholder='.input-medium'></td>"
                                  +"<td><a class='btn btn-small' onclick='deltr("+len+")'>删除</a></td>"
                                  +"</tr>"
                                  );
      });
//行删除
   function deltr(index) {
     $("tr[id='"+index+"']").remove();//删除当前行
    }

  (2) 0 个或三个请求头( header line ),例如 Accept-Language: en

 

  (3)空行(作为 header lines 的结束) 。

 那里要专注三个难点:

  (4)可选的音信体 。

先是,像id=t2row/t3rowde
按钮是动态添加上的,假如使用普通的$(‘#xxx’).click是没用的,必须运用$(‘#t2
caption’).on(“click”,”#t2row”,function(){})那种格式

  HTTP 协议是基于行的商业事务,每一行 以 \r\n 作为分隔符 。
报文头平日申明报文的门类(例如请求类型),且报文头只占一行
;请求头附带一些奇异音信,每个请求头占一行,其格式为 name:value
,即以分集团作为分隔; 空行也就以三个 \r\n 分隔;可选 body
经常包括数据,例如服务器重返的有个别静态 HTML 文件的剧情 。

其次,删除按钮的id必须跟tr中的id相对应

  HTTP请求方法:

 

  HTTP/ 1.1 协议中国共产党定义了 9 种形式(有时也叫“动作”)来表 明
Request-UHavalI 钦定的财富的不等操作方法,如下所述。

贯彻行添加和行删除的功用后,该考虑什么将多字段的表单传递到django的后端中去,代码如下:

  ( 1 ) OPTIONS :重返服务器针对一定财富所支持的 HTTP
请求方法;也足以应用向 Web服务器发送“*”的请求来测试服务器的作用性。

          var str_tailsj = "[";
          $("#t2 tbody").find("tr").each(function(){
                var tdArr1 = $(this).children();
                str_tailsj = str_tailsj+"{'product_name':'手机',";
                str_tailsj = str_tailsj+"'acct_name':'"+ tdArr1.eq(0).find("input").val()+"',";
                str_tailsj = str_tailsj+"'acct_code':'"+ tdArr1.eq(1).find("input").val()+"',";
                str_tailsj = str_tailsj+"'acc_nbr':'"+ tdArr1.eq(2).find("input").val()+"',";
                str_tailsj = str_tailsj+"'tc_type':'"+ tdArr1.eq(3).find("input").val()+"',";
                str_tailsj = str_tailsj+"'con_agent':'"+ tdArr1.eq(4).find("input").val()+"',";
                str_tailsj = str_tailsj+"'remark':'"+ tdArr1.eq(5).find("input").val()+"'},";
          });
          str_tailsj = str_tailsj + "]";

  ( 2) HEAD :向服务器须求与 GET
请求相平等的响应,只然而响应体将不会被重回 。
这一方法能够在不必传输整个响应内容的气象下,就足以博得包罗在响应新闻头中的元音讯。该方法常用于测试超链接的可行,是或不是足以访问,以及近年来是或不是更新等新闻。

将多字段表单,用json字符串的款型传递到后端,然后在后端利用python中的eval转换到相应的样式展开处理,具体代码参照下:

  ( 3) GET :向特定的财富发出请求 。 注意 : GET
方法不该被用来产生“副成效”的操作中,例如在 web app .
中的应用,在那之中四个缘由是 GET 大概会被网络蜘蛛等随意访问 。

参考网址:http://www.cnblogs.com/CQ-LQJ/p/5442785.html

  ( 4 ) POST
:向钦命财富提交数据进行拍卖请求(例如提交表单或许上传文件) 。
数据被含有在请求体中 。 POST
请求或者会促成新的能源的树立或对已有财富的改动 。

a="[{'bill1':'1','bill41':'2'},{'bill1':'1','bill41':'2'},]"
print eval(a)[0]['bill1']
输出为1

  ( 5 ) PUT :向钦点财富任务上传其最新内容 。

 

  ( 6) DELETE : 请求服务器删除 Request-U本田CR-VI 所标识的财富 。

  ( 7 ) TRACE :回显服务器收到的伸手,首要用来测试或确诊。

  ( 8) CONNECT: HTTP/ 1.1
协议中留下给可以将延续改为管Doug局的代办服务器 。

  ( 9) PATCH :用来将有个别修改应用于某一财富,该操作添加于规范盯C5789
中 。

  HTTP 服务器至少应当达成 GET 和 HEAD 方法,其余办法都是可选的 。
其它,除了上述办法,特定的 HTTP 服务器还是能够够壮大自定义的办法 。

  HTTP 常见的央求头:

  在 HTTP/ l.l 协议中,全体的请求头(除 Host
外)都以可选的,因为Host主要用来请求的服务器的IP地址和端口号,请求头有Host、Connection、Accept、Accept-Encoding、User-Agent、Cookie等,请求头太多那里就不列出来了。

  HTTP回应报文:

  重返码由 3 位数字构成,第二个数字定义了响应的品类,且有 5
种恐怕的取值。

  ( 1 ) lxx :提醒信息,表示请求已收取,继续处理。

  ( 2) 2xx :成功,表示请求已被成功接到、掌握 、 接受 。

  ( 3) 3xx :重定向,要大功告成请求必须开始展览更进一步的操作 。

  ( 4 ) 4xx :客户端错误,请求有语法错误或请求无法兑现。

  ( 5) 5xx :服务器端错误,服务器未能兑现合法的央求 。

  Date :表示音讯发送的时刻,时间的叙说格式由 rfc822 定义 。

  Server : 指明 Web 服务器用来拍卖请求的软件消息 。

  Accept-Ranges : Web
服务器评释自个儿是不是接到获取其某些实体的一部分(比如文件的一部分)的乞请。 bytes 代表收到, none 代表不收受。

  Vary: Web 服务器用该底部的内容告诉 Cache
服务器,在怎么着条件下才能用本响应所重临的靶子响应后续的呼吁 。

  Content-Encoding : Web 服务器注解自个儿使用了何等压缩方法( gzip,
deflate)压缩响应中的对象。

  Content-Length: Web 服务器告诉浏览器自身响应的靶子的长短 。

  Content-Type: Web 服务器告诉浏览器本身响应的靶子的类型 。

二、CGI

  CGI ( Common Gateway Interface ,通用网关接口)是 HTTP
协议中最要害的技巧之一,有着不可取代的重中之重地点 。 CGI 是2个 Web
服务器提供音信服务的标准接口 。 通过 CGI 接口, Web
服务器就可见取得客户端提交的音信,转交给服务器端的 CGI
程序开始展览处理,最后回到结果给客户端 。 组成 CGI 通信系统的是两片段:
一部分是 HTML
页面,正是在用户端浏览器上海展览中心示的页面;另一有个别则是运作在服务器上的 CG I
程序 。

  浏览器只必要钦命执行服务器上的哪些CGI程序就行,一般景观下,服务器和
CGI
程序之间是透过专业输入输出来拓展多少传递的(就像是tinyhttpd中调用CGI程序),而那个历程要求环境变茸的合作方可完毕。环境变量在
CGI 中拥有重庆大学的身价,每一种 CGI
程序只可以处理2个用户请求,所以在激活3个CGI程序进度时也开创了属于该进程的环境变量,CGI程序能够用Python、PERAV4L、Shell、C或C++等语言来兑现。

  CGI 环境变量在 CGI 程序运转时先河化,在得了时销毁。当1个 CGI
程序不是被 HTTP 服务器调用时,它的条件变盘差不离是系统环境变量的复制
。当那些 CGI 程序被 HTTP 服务器调用时,它的环境变量就会多了以下关于HTTP
服务器、客户端、 CGI 传输进程等门类。CGI 相关的环境变量有 3
种:与请求相关的环境变量、与服务器相关的环境变量和与客户端相关的环境变量,,详细见表
12-1 。

  图片 2

  CGI 工作规律:每当客户请求 CGI 的时候 Web
服务器就请求操作系统生成1个新的CGI
进程,该进程处理完请求后脱离,下2个伸手来时再次创下造新历程 。
当然,那样在访问量很少没有出现的意况使得,然而当访问量增大且并发存在时,那种办法就不适合了,于是就有了法斯特CGI。

  一般意况下, 法斯特CGI 的全部工作流程如下所述。

  ( 1 ) Web Server 运转时载入 FastCGI 进度管理器( IIS ISAPI 或 Apache
Module ) 。

  ( 2 )法斯特CGI 进程管理器自己初叶化,运行七个 CGI 进程并等候来自 Web
服务器的连接 。

  ( 3 )当客户端请求到达 Web Server 时, 法斯特CGI
进程管理器选用并延续到3个 FastCGI进度 。 Web 服务器将 CGI
环境变量和行业内部输入发送到 法斯特CGI 进度 。

  ( 4) 法斯特CGI 子进程完成处理后将行业内部输出和错误音信从同连续接再次来到 Web
Server。当法斯特CGI 子进度关闭连接时,请求便被报告处理完了 。 法斯特CGI
进度接着等待并拍卖来自法斯特CGI 进度管理器(运维在 Web
服务器中)的下三个连接 。

三、tinyhttpd解析

  关于tinyhttpd的代码解析的博客太多了,流程跟注释都讲述的很详细,随便搜个tinyhttpd解析就有无数博客出现,那里依然写一下融洽在看那份源码时不够的知识点,因为本身差不离一直不linux下编程的经历,所以对linux下用的Glib库调用不太熟习,TCP协议栈也是自家只看过过轻量级Lwip的源码。

  1.bind函数当传入的port为0时是会轻易分配三个端口号,所以tinyhttpd中才会有显示随机的端口号,getsockname函数获取套接字的地址把动态分配的端口号值取出。

  图片 3图片 4

  2.int stat(const char *file_name, struct stat
*buf);通过文件名filename获取文件音讯,并保留在buf所指的组织体stat中,S_IXUS兰德奔驰G级:文件全体者具可实施权限,S_IXGTiguanP:用户组具可实施权限,S_IXOTH:别的用户具可读取权限。

图片 5

  3.int pipe(int filedes[2]);

  再次来到值:成功,再次回到0,不然再次来到-1。参数数组包罗pipe使用的多少个文件的讲述符。fd[0]:读管道,fd[1]:写管道。

  必须在fork()中调用pipe(),不然子进度不会持续文件讲述符。五个进程不共享祖先进度,就无法动用pipe。可是足以应用命名管道。

  pipe(cgi_output)执行成功后,cgi_output[0]:读通道
cgi_output[1]:写通道

  图片 6

   int dup2(int oldfd,int newfd);函数的功力是复制文件讲述符。

  4.fork函数,成立二个子进程,fork函数之后的一部分由在fork函数执行完结后,尽管创制新历程成功,则产出三个经过,2个是子进程,五个是父进度。在子进程中,fork函数再次来到0,在父进度中,fork再次回到新成立子进度的长河ID,有时间再看fork源码是何等实现的。

  5.execl函数进行,第三参数path字符指针所指向要推行的文书路径,后边跟着可变参数,那里说一些由于GCC使用AAPCS规范,可变参数的实现小于多少个的话是从r0-r3收获,大于八个的话就要从栈中获取参数。 

  6.pid_t waitpid(pid_t pid, int * status, int
options);会一时半刻平息近来历程的实施, 直到有信号来到或子进度甘休. 

  在编排博客边看tinyhttpd,近期本人的不够驾驭的函数就地点多少个,有空再看看它们的源码实现。

 

  

  

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图