网络编程技术：第5章 PythonWeb编程2

第5章PythonWeb开发（5）5.10AJAX、JSON与REST5.10.1AJAX与JSON概念5.10.2原生AJAX使用5.10.3Jquery中的AJAX5.10.4REST5.11CRUD示例项目step3（AJAX）5.12SPA与前端MV*框架5.13CRUD示例项目step4（MV*）5.10AJAX、JSON与RESTWeb服务器html动态脚本Web服务器AJAX、JSON、XML应用服务器Web1.0Web2.0WebWebAPP动态页面WebServiceRESTSOAHTMLtoSERVICE内容展示为主更多交互更多服务Web3.05.10AJAX、JSON与REST5.10.1AJAX与JSON概念AJAX概念Asynchronous

Javascript

And

XML（异步JavaScript和XML）AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用Javascript向服务器提出请求并处理响应而不阻塞用户，即可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页页面。AJAX的核心对象是XMLHTTPRequest。示例：

/try/try.php?filename=tryajax_first5.10.1AJAX与JSON概念JSON概念JSON:

JavaScript

Object

Notation(JavaScript对象表示法)JSON使用文本数据来描述数据对象，类似XML。JSON比XML更小、更快，更易解析。{

"employees":[

{"firstName":"John","lastName":"Doe"},

{"firstName":"Anna","lastName":"Smith"},

{"firstName":"Peter","lastName":"Jones"}

]

}5.10.1AJAX与JSON概念JSON文本转换为JavaScript对象方法1：eval()

函数vartxt=‘{}’//txt是JSON字符串varobj=eval("("+txt+")");示例方法2：JSON解析器JSON.parse(txt)vartxt=‘{}’//txt是JSON字符串obj=JSON.parse(txt);示例JSON对象转JSON字符串JSON.stringify(jsonobj);

5.10.2原生AJAX使用创建XMLHttpRequest对象varxmlhttp;

if(window.XMLHttpRequest)

{//codeforIE7+,Firefox,Chrome,Opera,Safari

xmlhttp=newXMLHttpRequest();

}

else

{//codeforIE6,IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}5.10.2原生AJAX使用向服务器发送请求open(method,url,async)method：请求的类型；GET或POSTurl：文件在服务器上的位置async：true（异步）或false（同步），默认为true，JavaScript无需等待服务器的响应，在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理send(string)string：仅用于POST请求5.10.2原生AJAX使用向服务器发送请求GET请求示例：POST请求示例：如果需要像HTML表单那样POST数据，需使用setRequestHeader()来添加HTTP头xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);

xmlhttp.send();5.10.2原生AJAX使用向服务器发送请求POST请求示例：xmlhttp.open("POST","ajax_test.html",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");5.10.2原生AJAX使用获取服务器响应获得来自服务器的响应，需使用XMLHttpRequest对象的responseText

或responseXML

属性。responseText：获得字符串形式的响应数据。responseXML：获得XML形式的响应数据何时获取响应：

onreadystatechange：readystate发送变动时调用此函数xmlhttp.onreadystatechange=function()

{if(xmlhttp.readyState==4&&xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}5.10.2原生AJAX使用xmlhttp.onreadystatechange=function()

{if(xmlhttp.readyState==4&&xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}5.10.2原生AJAX使用示例：1、创建Django项目ajaxdemo，然后创建app：default，并在settings.pyINSTALLED_APPS列表中添加default2、在default下创建templates文件夹，在文件夹中新建index.html3、在urls.py中的urlpatterns中添加url(r'^$','default.views.index')4、在viws中创建处理函数defindex(request):

returnrender(request,'index.html')5.10.2原生AJAX使用示例：5、在settings.py中注释掉csrf一行，关闭csrf，否则POST提交不成功'django.middleware.csrf.CsrfViewMiddleware',5.10.2原生AJAX使用示例：6、在index.html的body中添加以下内容：<h1>添加备忘记录</h1>

<label>请输入内容：</label>

<inputtype="text"id="todo"/>

<buttonid="save">确定</button>

<pid="addResult"></p>界面效果5.10.2原生AJAX使用示例：7、在index.html的body中添加以下脚本：<script>

document.getElementById("save").onclick=function(){

varxhr=newXMLHttpRequest()

xhr.open("POST","/api/addtodo/")

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

vardata="todo="+document.getElementById("todo").value

xhr.send(data)

5.10.2原生AJAX使用xhr.onreadystatechange=function(){

if(xhr.readyState===4){

if(xhr.status===200){

varresult=JSON.parse(xhr.responseText)

document.getElementById("addResult").innerHTML=result.message

}else{

alert("error:"+xhr.status)

}

}

}

}

</script>5.10.2原生AJAX使用示例：8、在urls.py中添加以下配置：url(r'^api/addtodo/$','default.views.apiaddtodo')9、在views.py中添加以下处理函数：defapiaddtodo(request):

todo=request.POST['todo']

result={}

result['status']="success"

result['message']=todo+"isadded"

returnJsonResponse(result)5.10.3Jquery中的AJAXJquery中有多个ajax操作方法：load()、$.get()、$.getJSON()、$.post()、$.ajax()load()从服务器加载数据，并把返回的数据放置到指定的元素中$("button").click(function(){

$("#div1").load("demo_test.txt");

});5.10.3Jquery中的AJAXJquery中有多个ajax操作方法：load()、$.get()、$.getJSON()、$.post()、$.ajax()$.get()：使用HTTPGET请求从服务器加载数据语法：

$.get(URL,data,function(data,status,xhr),dataType)URL：提交地址，必需data：提交时携带的数据，可选function：回调函数，data--返回数据，status—状态xhr包含XMLHttpRequest对象dataType：服务器响应的数据类型，默认自动判断5.10.3Jquery中的AJAXJquery中有多个ajax操作方法：load()、$.get()、$.getJSON()、$.post()、$.ajax()$.getJSON()：使用AJAX的HTTPGET请求获取JSON数据语法：

$.getJSON(URL,data,function(data,status,xhr))URL：提交地址，必需data：提交时携带的数据，可选function：回调函数，data--返回数据，status—状态xhr包含XMLHttpRequest对象5.10.3Jquery中的AJAXJquery中有多个ajax操作方法：load()、$.get()、$.getJSON()、$.post()、$.ajax()$.post()：使用HTTPPOST请求从服务器加载数据语法：

$.post(URL,data,function(data,status,xhr),dataType)URL：提交地址，必需data：提交时携带的数据，可选function：回调函数，data--返回数据，status—状态xhr包含XMLHttpRequest对象dataType：服务器响应的数据类型，默认自动判断5.10.3Jquery中的AJAXJquery中有多个ajax操作方法：load()、$.get()、$.getJSON()、$.post()、$.ajax()$.ajax()：该方法通常用于其他方法不能完成的请求。语法：

$.ajax({name:value,name:value,...})type:“GET“或”POST”url：提交地址dataType：预期返回数据类型success(result,status,xhr)成功时的处理函数error(xhr,status,error)如果请求失败要运行的函数5.10.3Jquery中的AJAX示例：10、在index.html的body中添加以下三个按钮<buttonid="save">确定</button>

<buttonid="jqueryget">确定--jqueryget</button>

<buttonid="jquerypost">确定--jquerypost</button>

<buttonid="jqueryajax">确定--jqueryajax</button>在head部分引入jquery库，如下：<scriptsrc="/libs/jquery/1.11.1/jquery.js"></script>5.10.3Jquery中的AJAX示例：10、在index.html的body中添加以下三个按钮5.10.3Jquery中的AJAX示例：11、在index.html的script中添加以下js代码$(document).ready(function(){

$("#jqueryget").click(function(){

$.get("/api/addtodo/",{todo:$("#todo").val()},function(data,status){

$('#addResult').text(data.message)

})

}

)5.10.3Jquery中的AJAX$("#jquerypost").click(function(){

$.post("/api/addtodo/",{todo:$("#todo").val()},function(data,status){

$('#addResult').text(data.message)

})

})

5.10.3Jquery中的AJAX

$("#jqueryajax").click(function(){

$.ajax({

type:"POST",

url:"/api/addtodo/",

data:{todo:$("#todo").val()},

success:function(data,status){

$('#addResult').text(data.message)

},

})

}

)

}

)5.10.3Jquery中的AJAX示例：12、修改views.py中的apiaddtodo函数，使其可以处理get请求defapiaddtodo(request):

ifrequest.method=="POST":

todo=request.POST['todo']

else:

todo=request.GET['todo']

result={}

result['status']="success"

result['message']=todo+"isadded"

returnJsonResponse(result)5.10.4RESTWebService：一种跨编程语言和跨操作系统平台的远程调用技术，比如天气预报、语音合成、语音识别、支付系统等把自己的服务以webservice的形式暴露出来，让第三方网站和程序可以调用这些服务功能，即面向服务的架构SOA。XML-RPC、SOAP、REST是三种主流的WebService服务实现方法XML-RPC：远程过程调用协议（慢慢被soap所取代）SOAP：简单对象访问协议，HTTP+XML，采用XML封装要调用远程服务对象的哪个方法，传递的参数是什么，服务返回的结果是什么，服务器根据soap格式的请求，决定要调用哪个类的哪个方法。5.10.4RESTREST：表述性状态传递（英文：RepresentationalStateTransfer，简称REST）,不是一个具体的标准，只是一套设计原则和架构风格REST模式的Web服务比SOAP更加简洁，多数互联网公司的开放接口都采用了类似REST的形式REST基于HTTP+URLURL标识着任何有引用必要的事物，即资源网络上的所有事物都被抽象为资源，每个资源对应一个唯一标识URL通过HTTP协议方法对资源进行操作（GET/POST/PUT/DELETE）所有的服务器操作都是无状态的5.10.4RESTTastypie

Tastypie

是

Django

框架的一个

webservice

接口。它提供了一个方便、强大而且高定制化的

REST

风格接口。支持

GET/POST/PUT/DELETE/PATCH

方式调用

支持多种序列化的格式，在输入结果时不需要自己实现序列化操作使用方法：1、pipinstall

django-tastypie2、在INSTALLED_APPS中加入‘tastypie’,如下图所示：5.10.4RESTTastypie3、在自己的APP下创建Python包api：如下图所示4、在api包中创建resources.py文件，在该文件中定义模型对应的资源模型，如下图5.10.4RESTTastypie5、在URLconf中创建REST接口映射：如下图所示fromtastypie.apiimportApi

fromdefault.api.resourcesimportTodolistResource

v1_api=Api(api_name='v1')

v1_api.register(TodolistResource())然后在urlpatterns中增加url(r'^api/',include(v1_api.urls)),5.10.4RESTTastypie6、此时即可使用REST接口访问资源：http://localhost:8000/api/v1/?format=jsonhttp://localhost:8000/api/v1/todolist/?format=json5.11CRUD示例项目step3操作流程：1、创建Django项目todolist3，然后创建app：default，并在settings.pyINSTALLED_APPS列表中添加default2、在default下创建templates文件夹，在文件夹中新建index.html3、在urls.py中的urlpatterns中添加url(r'^$','default.views.index')4、在viws中创建处理函数defindex(request):

returnrender(request,'index.html')5.11CRUD示例项目step3示例：5、在settings.py中注释掉csrf一行，关闭csrf，否则POST提交不成功'django.middleware.csrf.CsrfViewMiddleware',5.11CRUD示例项目step3Index.html核心内容如下：<aid="btnAdd"type="button"class="btnbtn-successpull-right">添加</a>

<tableid="todotable"class="tabletable-hover">

<thead>

<tr>

<thclass="hidden">id</th>

<thclass="text-center"style="width:5%">序号</th>

<thclass="text-left"style="width:70%">内容</th>

<thclass="text-center"style="width:25%">操作</th>

</tr>

</thead>

<tbody>

</tbody>

</table>5.11CRUD示例项目step3Index.html核心内容如下：<divclass=“modalfade”id=“modal_form”role=“dialog”>

<divclass=“modal-dialog”>

<divclass=“modal-content”>

<divclass=“modal-header”>

<buttontype=“button”class=“close”data-dismiss=“modal”aria-label=“Close”><span

aria-hidden=“true”>×</span></button>

<h3class=“modal-title”>新建备忘事项</h3>

</div>

<divclass=“modal-bodyform”>

<formaction=“#”id=“form”class=“form-horizontal”>

<inputtype=“hidden”value=“”name=“id”/>

<divclass=“form-body”>

<divclass=“form-group”>

<labelclass=“control-labelcol-md-3”>备忘事项</label>5.11CRUD示例项目step3Index.html核心内容如下：<divclass="col-md-9">

<inputname="todo"placeholder="备忘事项"class="form-control"type="text">

</div>

</div>

</div>

</form>

</div>

<divclass="modal-footer">

<buttontype="button"id="btnSave"class="btnbtn-primary">Save</button>

<buttontype="button"class="btnbtn-danger"data-dismiss="modal">Cancel</button>

5.11CRUD示例项目step3Index.html核心内容如下：</div>

</div>

<!--/.modal-content-->

</div>

<!--/.modal-dialog-->

</div>

<!--/.modal-->

<!--EndBootstrapmodal-->以上三页为bootstrap模态对话框部分，用于弹出新建和编辑框5.11CRUD示例项目step3Index.html核心js如下：$(document).ready(

$("#btnAdd").click(

function(){

save_method='add';

$('#form')[0].reset();//重置form

$('#modal_form').modal('show');//显示modal

$('.modal-title').text('新建备忘');//设置title

}

),点击新建按钮弹出添加对话框5.11CRUD示例项目step3Index.html核心js如下：$("#btnSave").click(

function(){

varurl;

if(save_method=='add'){

url="/api/todoadd/";

}

else{

url="/api/todoedit/";

}

),确定点击保存按钮时是新建操作还是编辑操作5.11CRUD示例项目step3Index.html核心js如下：

$.ajax({

url:url,

type:"POST",

data:$('#form').serialize(),

dataType:"JSON",

success:function(data){

//如果成功，隐藏弹出框并重新加载数据

$('#modal_form').modal('hide');

reload_table();

},

error:function(jqXHR,textStatus,errorThrown){

alert('新建或添加错误！');

}

})

}

),点击保存时提交数据5.11CRUD示例项目step3Index.html核心js如下：$("#todotable").on('click',".btnEdit",function(){

save_method='update';

$('#form')[0].reset();

$('[name="id"]').val($(this).parent("td").siblings("td.hidden").text());

$('[name="todo"]').val($(this).parent("td").prev().text());

$('#modal_form').modal('show');

$('.modal-title').text('编辑备忘');

}

),点击编辑按钮时，确定当前编辑的id和内容，把内容放置到弹出对话框中5.11CRUD示例项目step3Index.html核心js如下：$("#todotable").on('click',".btnDel",function(){

$.ajax({

url:"/api/tododel/",

type:"GET",

data:{"id":$(this).parent("td").siblings("td.hidden").text()},

dataType:"JSON",

success:function(data){

//如果成功，隐藏弹出框并重新加载数据

$('#modal_form').modal('hide');

reload_table();

},点击删除按钮时发送删除请求5.11CRUD示例项目step3Index.html核心js如下：编辑按钮和删除按钮都是动态生成，因此需要使用jquery的动态绑定。error:function(jqXHR,textStatus,errorThrown){

alert('删除错误！');

}

})

}5.11CRUD示例项目step3Index.html核心js如下：functionreload_table(){

$.ajax({

url:"/api/todogetlist/",

type:"get",

dataType:"JSON",

success:function(data){

$("#todotable").children("tbody").empty()

varhtmlstr=""发起加载所有数据请求清楚原有表格内容5.11CRUD示例项目step3Index.html核心js如下：for(vari=0;i<data.todolist.length;i++){

htmlstr=htmlstr+"<tr>"+

"<tdclass='hidden'>"+data.todolist[i].id+"</td>"+

"<td>"+(i+1)+"</td>"+

"<td>"+data.todolist[i].content+"</td>"+

"<tdclass='text-center'>"+

"<atype='button'class='btnbtn-xsbtn-successbtnEdit'>编辑</a>"+

"<atype='button'class='btnbtn-xsbtn-dangerbtnDel'>删除</a>"+

"</td>"+

"</tr>";

}

构造表格内容动态字符串5.11CRUD示例项目step3Index.html核心js如下：

$("#todotable").children("tbody").html(htmlstr);

},

error:function(jqXHR,textStatus,errorThrown){

alert('获取数据错误');

}

})

}使用新内容更新表格5.11CRUD示例项目step3后台urls.py修改如下：urlpatterns=[

url(r'^admin/',include(admin.site.urls)),

url(r'^$',"default.views.index"),

url(r'^api/todogetlist/$',"default.views.todogetlist"),

url(r'^api/todoadd/$',"default.views.todoadd"),

url(r'^api/todoedit/$',"default.views.todoedit"),

url(r'^api/tododel/$',"default.views.tododel"),

]5.11CRUD示例项目step3后台views.py修改如下：deftodogetlist(request):

dataset=Todolist.objects.all()

todolist=[]

foritemindataset:

temp={"id":item.id,"content":item.content}

todolist.append(temp)

res={"todolist":todolist}

returnJsonResponse(res)5.11CRUD示例项目step3后台views.py修改如下：deftodoadd(request):

todo=request.POST['todo']

Todolist.objects.create(content=todo)

res={"success":"true"}

returnJsonResponse(res)

5.11CRUD示例项目step3后台views.py修改如下：deftodoedit(request):

id=request.POST['id']

content=request.POST['todo']

todo=Todolist.objects.get(id=id)

todo.content=content

todo.save()

res={"success":"true"}

returnJsonResponse(res)

5.11CRUD示例项目step3后台views.py修改如下：deftododel(request):

id=request.GET['id']

Todolist.objects.get(id=id).delete()

res={"success":"true"}

returnJsonResponse(res)

5.12SPA与前端MV*框架SPA单页Web应用(singleapplication简称为SPA)是一种特殊的Web应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用JavaScript动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA可以提供较为流畅的用户体验。5.12SPA与前端MV*框架SPA优点：良好的交互体验：无须刷新，异步加载，显示流畅良好的前后端工作分离模式：通过RESTAPI提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。减轻服务器压力：服务器只用出数据就可以，不用管展示逻辑和页面合成共用一套后端程序代码：不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端；5.12SPA与前端MV*框架SPA缺点：SEO难度较高前进、后退管理：不能使用浏览器的前进后退功能，所有的页面切换需要自己管理。初次加载耗时多5.12SPA与前端MV*框架MV*GUI程序面临的问题：界面用户行为->业务逻辑数据操作>更新界面为了应对业务复杂性、可测试、可复用、可维护，需要一套解决问题的框架5.12SPA与前端MV*框架MVC施乐公司在Smalltalk编程语言中设计了MVC的图形应用程序架构MVC出了把应用程序分成View、Model层和Controller层MVC的调用关系：1、Controller执行应用逻辑2、Controller操作Model，而不直接操作view3、View和Model的同步消息是通过观察者模式进行，而同步操作是由View自己请求Model的数据然后对视图进行更新。5.12SPA与前端MV*框架MVCB/S架构中的MVC服务端通过路由规则把用户请求交由给特定的Controller进行处理Controller执行相应的应用逻辑，对Model进行操作然后用数据去渲染特定的模版，返回给客户端。5.12SPA与前端MV*框架MVPMVP模式把MVC模式中的Controller换成了Presenter,打破了View原来对于Model的依赖MVP的PassiveView模式1、View不再负责同步的逻辑，而是由Presenter负责。

2、View需要提供操作界面的接口给Presenter进行调用。5.12SPA与前端MV*框架MVVMMVVM代表的是Model-View-ViewModel,ViewModel的含义就是"ModelofView"，视图的模型。在ViewModel当中会有一个叫Binder，或者是Data-bindingengine的东西,以前全部由Presenter负责的View和Model之间数据同步操作交由给Binder处理。即MVVM把View和Model的同步逻辑自动化了。5.12SPA与前端MV*框架MVVMMVVM代表的是Model-View-ViewModel,ViewModel的含义就是"ModelofView"，视图的模型。在ViewModel当中会有一个叫Binder，或者是Data-bindingengine的东西,以前全部由Presenter负责的View和Model之间数据同步操作交由给Binder处理。即MVVM把View和Model的同步逻辑自动化了。5.12SPA与前端MV*框架前端MV*框架AngularJSReactBackboneKnockoutJSEmberavalon……使用项目体验，可以参考/Github地址：/tastejs/todomvc5.12SPA与前端MV*框架AngularJSng-app

指令定义一个AngularJS应用程序。ng-model

指令把元素值（比如输入域的值）绑定到应用程序。ng-bind

指令把应用程序数据绑定到HTML视图。/try/try.php?filename=try_ng_intro<divng-app=""> <p>在输入框中尝试输入:</p><p>姓名:<inputtype="text"ng-model="name"></p><png-bind="name"></p></div>5.12SPA与前端MV*框架AngularJSAngularJS事件ng-click、ng-mousedown、ng-keypress。。。示例：/angularjs/angularjs-html-events.htmlAngularJS表格ng-repeat示例：/try/tryit.php?filename=try_ng_tables_cssAngularJSHTTP示例：/angularjs/angularjs-http.html5.12SPA与前端MV*框架AngularJS应用示例：备忘录示例代码5.12SPA与前端MV*框架AngularJS应用示例：备忘录<bodyng-app="myApp"ng-controller="todoCtrl"><h2>我的备忘录</h2><formng-submit="todoAdd()"><inputtype="text"ng-model="todoInput"size="50"placeholder="新增"><inputtype="submit"value="新增"></form><br><divng-repeat="xintodoList"><inputtype="checkbox"ng-model="x.done"><spanng-bind="x.todoText"></span></div><p><buttonng-click="remove()">删除记录</button></p>5.12SPA与前端MV*框架AngularJS应用示例：备忘录<script>varapp=angular.module('myApp',[]);app.controller('todoCtrl',function($scope){

$scope.todoList=[{todoText:'CleanHouse',done:false}];$scope.todoAdd=function(){$scope.todoList.push({todoText:$scope.todoInput,done:false});$scope.todoInput="";};

5.12SPA与前端MV*框架AngularJS应用示例：备忘录$scope.remove=function(){varoldList=$scope.todoList;$scope.todoList=[];

angular.forEach(oldList,function(x){if(!x.done)$scope.todoList.push(x);});};});</script>5.13CRUD示例项目step4Django和AngularJS模板标签{{}}冲突问题解决方案1：修改其中一方的模板标签语法解决方案2：在Django中使用verbatim标签解决方案3：不使用Django的模板系统本示例通过把应用做成SPA静态页面的形式，不使用Django的模板系统5.13CRUD示例项目step4操作流程：1、创建Django项目todolist4，然后创建app：default，并在settings.pyINSTALLED_APPS列表中添加default2、在default下创建static文件夹，在文件夹中新建index.html3、在urls.py中的urlpatterns中添加url(r'^$','default.views.index')4、在viws中创建处理函数，需要在前面加上：fromdjango.httpimportHttpResponseRedirectdefindex(request):

returnHttpResponseRedirect('/static/index.html')5.13CRUD示例项目step4示例：5、在settings.py中注释掉csrf一行，关闭csrf，否则POST提交不成功'django.middleware.csrf.CsrfViewMiddleware',5.13CRUD示例项目step4Index.html核心内容如下：<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>ToDoList</title>

<linkhref="/libs/bootstrap/3.3.0/css/bootstrap.min.css"rel="stylesheet">

<scriptsrc="/libs/jquery/2.0.0/jquery.min.js"></script>

<scriptsrc="/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<scriptsrc="/libs/angular.js/1.3.9/angular.min.js"></script>

</head>引入库5.13CRUD示例项目step4Index.html核心内容如下：<bodyng-app="myApp"ng-controller="todoCtrl">

<divclass="wrapper">

<divclass="row">

<divclass="col-md-8col-md-offset-2">

<h1>ToDoList</h1>

<hr>

<aid="btnAdd"type="button"ng-click="add()"class="btnbtn-successpull-right">添加</a>

<tableid="todotable"class="tabletable-hover">

<thead>

<tr>

<thclass="hidden">id</th>

<thclass="text-center"style="width:5%">序号</th>

<thclass="text-left"style="width:70%">内容</th>

<thclass="text-center"style="width:25%">操作</th>

</tr>

</thead>

5.13CRUD示例项目step4Index.html核心内容如下：<tbodyng-repeat="xintodoList">

<tr>

<tdclass='hidden'ng-bind="x.id"></td>

<td>{{$index+1}}</td>

<tdng-bind="x.content"></td>

<tdclass='text-center'>

<atype='button'ng-click="edit($index)"class='btnbtn-xsbtn-successbtnEdit'>编辑</a>

<atype='button'ng-click="del($index)"class='btnbtn-xsbtn-dangerbtnDel'>删除</a>

</td>

</tr>

</tbody>

</table>

<hr>

</div>

</div>

</div>5.13CRUD示例项目step4Index.html核心内容如下：<!--Bootstrapmodal-->

<divclass="modalfade"id="modal_form"role="dialog">

<divclass="modal-dialog">

<divclass="modal-content">

<divclass="modal-header">

<buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><span

aria-hidden="true">×</span></button>

<h3class="modal-title"ng-bind="title">></h3>

</div>

<divclass="modal-bodyform">

<formaction="#"id="form"class="form-horizontal">

<inputtype="hidden"ng-bind="curid"name="id"/>

5.13CRUD示例项目step4Index.html核心内容如下：<divclass="form-body">

<divclass="form-group">

<labelclass="control-labelcol-md-3">备忘事项</label>

<divclass="col-md-9">

<inputname="todo"class="form-control"type="text"ng-model="curcontent">

</div>

</div>

</div>

</form>

</div>

5.13CRUD示例项目step4Index.html核心内容如下：

<divclass="modal-footer">

<buttontype="button"id="btnSave"ng-click="save()"class="btnbtn-primary">Save</button>

<buttontype="button"class="btnbtn-danger“data-dismiss="modal">Cancel</button>

</div>

</div>

<!--/.modal-content-->

</div>

<!--/.modal-dialog-->

</div>5.13CRUD示例项目step4Index.html核心内容如下：<script>

varapp=angular.module('myApp',[]);

app.controller('todoCtrl',function($scope,$http){

$http.get("/api/todogetlist/")

.success(function(response){$scope.todoList=response.todolist;});

$scope.add=function(){

$scope.title="新建备忘"

$scope.save_method='add'

$scope.curcontent=''

varelement=angular.element('#modal_form');

element.modal('show');

};

5.13CRUD示例项目step4Index.html核心内容如下：$scope.edit=function(index){

$scope.title="修改备忘"

$scope.save_method='update'

$scope.curindex=index

$scope.curcontent=$scope.todoList[index].content

$scope.curid=$scope.todoList[index].id

varelement=angular.element('#modal_form');

element.modal('sh