Django与ajax交互的典型案例
- 功能的结构性分析
- 代码执行流程
- 1、构造字典格式的图书数据，然后作为参数给JsonResponse对象，返回一个Json字典关于这部分的内容，我们可以参考之前json案例的过程：获取数据 -- 定义空列表 -- 定义数据存储格式 -- 追加到空列表 -- 定义整体字典格式所以我们可以根据上面的流程来完成这一步
- 1.1 获取所有的图书数据 tushu = BookInfo.objects.all()
- 1.2 定义空列表 tushu_list = []
- 1.3 定义数据存储格式，因为我们要根据图书的id获取到人物的所有信息，所以必须有两个字段内容：
- id和btitle[图书id,图书名称]
- 1.4 追加到空列表
- for ts in tushu:
- tushu_list.append([ts.id,ts.btitle])
- 1.5 构造字典对象，传递给JsonResponse对象
- tushu_dict = {"TuDic":tushu_list}
- return JsonResponse(tushu_dict)
- 2、点击图书的选择项，触发一个ajax请求实践因为没有按钮，而且直接点击，就能出现数据，所以我们就可以直接在jquery文件加载完成后，就触发一个ajax请求，去获取所有的图书数据。所以这部分我们只需要使用一个$.get()方法即可完成该任务
- $(function(){
- $.get('/TuShu/',function (){
- });
- });
- 3、将Json对象数据传递给ajax请求我们知道ajax发起127.0.0.1:8000/TuShu/请求后，会返回一个Json格式的数据，那我们直接对这个对象进行操作即可，所以我们将获取到的对象存放到function后面的()内部即可
- $(function(){
- $.get('/TuShu/',function (data){
- });
- });
- 注意：function后面的小括号内部的名字随意起，反正都代表/TuShu/请求返回的结果，返回的结果是：
- {"TuDic": [[1, "\u5c04\u96d5\u82f1\u96c4\u4f20"], [2, "\u5929\u9f99\u516b\u90e8"], [3, "\u7b11\u50b2\u6c5f\u6e56"], [4, "\u96ea\u5c71\u98de\u72d0"], [5,"\u78a7\u8840\u5251"]]}
- 4、对这些数据进行选项的拼接我们要对获取的Json格式的数据的真实内容，那么怎么获取呢？使用对象.属性的方法来获取，那么我们可以通过data.TuDic的格式获取出来所有的数据
- [[1, "\u5c04\u96d5\u82f1\u96c4\u4f20"], [2, "\u5929\u9f99\u516b\u90e8"], [3,"\u7b11\u50b2\u6c5f\u6e56"], [4, "\u96ea\u5c71\u98de\u72d0"], [5, "\u78a7\u8840\u5251"]] 可以看到，这是一大堆列表数据，那么我们就可以使用ajax的遍历方法$.each来分别获取具体的内容
- $.each(data.TuDic,function (i,t) {。。。});
- 因为是一个列表的格式，所以我们可以使用列表的分片功能，分别获取到他们的值图书的id可以使用t[0],图书的名称可以使用t[1]我们要把获取到的图书id和图书名称展示到选项框内，那么我们可以使用绑定的方式，给他定义一个孔列表，然后使用列表的追加方式，将所有内容以选项框的方式追加到空列表空间内
- tushu=$('#tushu');
- $.each(data.TuDic,function (i,t) {
- tushu.append('<option value="'+t[0]+'">'+t[1]+'</option>');
- });
