【银角大王——Django课程——Ajax请求】

Ajax请求(页面不革新)

依赖JQuery

Ajax基本代码代码

1. {% block js %}
2.     <script type="text/javascript">
3.         $(function(){
4.             //页面框架加载完成之后代码自动执行
5.             bindBtnEvent();
6.         })
7.         function bindBtnEvent(){
8.             $("#btn1").click(function(){
9.                     $.ajax({
10.                         url:'/task/ajax/',
11.                         type:"get",
12.                         data:{
13.                             n1:123,
14.                             n2:456
16.                         },
17.                         dataType:"JSON",
18.                         success:function(res){
19.                             console.log(res);
20.                             console.log(res.status);
21.                             console.log(res.data);
22.                 }
23.             })
24.             })
25.         }
26.     </script>
27. {% endblock %}
28.         

复制代码

url.py编写——他返回的是一个json数据

1.     #任务管理
2.     path('task/list/',views.task_list),
3.     #
4.     path('task/ajax/',views.task_ajax),
5.     path('task/add/',views.task_add),
6.    

复制代码

view.py编写

1. #导入
2. # from app01 import models
3. # from app01.utils.bootstrap import BootStrapModelForm
4. from django import forms
5. class TaskModelForm(BootStrapModelForm):
6.     class Meta:
7.         model =models.Task
8.         fields ="__all__"
9.         widgets ={
10.             "detail":forms.TextInput
12.         }
17. #任务列表
18. def task_list(request):
19.    
20.     #实例化
21.     form =TaskModelForm
22.     return render(request,"task_list.html",{"form":form})
25. #导入
26. from django.views.decorators.csrf import csrf_exempt
29. import json
30. from django.http import JsonResponse
31. # @csrf_exempt
32. def task_ajax(request):
33.     print(request.GET)
34.     data_dict = {"status":True,'data':[11,22,33,44]}
35.     json_string = json.dumps(data_dict)
36.     return HttpResponse(json_string)
37.     #return JsonResponse(data_dict)
39. @csrf_exempt
40. def task_add(request):
41.     #< QueryDict: {'level': ['1'], 'title': ['标题'], 'detail': ['详细信息'], 'user': ['2']} >
43.     # print(request.POST)
44.    
45.     #用户发送过来的数据进行校验（modelForm进行校验）
46.     form = TaskModelForm(data=request.POST)
47.     if form.is_valid():
48.         form.save()
49.         data_dict = {"status": True}
50.         return HttpResponse(JsonResponse(data_dict))
51.     data_dict ={"status":False,"error":form.errors}
52.     return HttpResponse(json.dumps(data_dict,ensure_ascii=False))

复制代码

在HTML中编写

1. {% extends 'layout.html'%}
3. {% block content %}
4.     <div class="container">
5.         <div class="panel panel-default">
6.               <div class="panel-heading">新建任务表单</div>
7.               <div class="panel-body">
9.                     <form  id="formAdd">
10.                       <div class="clearfix">
11.                           {% for field in form %}
12.                             <div class="col-xs-6">
13.                                   <div class="form-group" style="position:relative; margin-bottom:20px;">
14.                                         <label >{{ field.label }}</label>
15.                                         {{ field }}
16.                                         <span class="error-msg" style="color:red; position: absolute;"></span>
17.                                   </div>
18.                             </div>
19.                           {% endfor %}
20.                           <div class="col-xs-6">
21.                             <button id="btnAdd" type="button" class="btn btn-primary">提 交</button>
22.                           </div>
23.                       </div>
25.                 </form>
27.               </div>
28.         </div>
32.         <hr/>
33.         <h1>Ajax学习</h1>
35.         <h3>示例1</h3>
36.         <input id="btn1" type="button" class="btn btn-primary" value="点击1" onclick="clickMe();">
37.         <h3>示例2</h3>
38.         <input id="txtUser" type="text"  placeholder="姓名">
39.         <input id="txtAge" type="text"  placeholder="年龄">
40.         <input id="btn2" type="button" class="btn btn-primary" value="点击2" onclick="clickMe();">
41.         <h3>示例3</h3>
42.         <form id="form3">
43.         <input name="user"  type="text"  placeholder="姓名">
44.         <input name="age" type="text"  placeholder="年龄">
45.         <input name="email"  type="text"  placeholder="邮箱">
46.         <input name="more"  type="text"  placeholder="介绍">
47.         <input id="btn3" type="button" class="btn btn-primary" value="点击3" >
48.         </form>
49.     </div>
51. {% endblock %}
53. {% block js %}
54.     <script type="text/javascript">
55.         $(function(){
56.             //页面框架加载完成之后代码自动执行
57.             bindBtnEvent();
58.             bindBtnEvent2();
59.             bindBtnEvent3();
60.             bindBtnAddEvent();
63.         })
64.         function bindBtnEvent(){
65.             $("#btn1").click(function(){
66.                     $.ajax({
67.                         url:'/task/ajax/',
68.                         type:"get",
69.                         data:{
70.                             n1:123,
71.                             n2:456
73.                         },
74.                         dataType:"JSON",
75.                         success:function(res){
76.                             console.log(res);
77.                             console.log(res.status);
78.                             console.log(res.data);
79.                 }
80.             })
81.             })
82.         }
83.         function bindBtnEvent2(){
84.             $("#btn2").click(function(){
85.                     $.ajax({
86.                         url:'/task/ajax/',
87.                         type:"get",
88.                         data: {
89.                             name:$("#txtUser").val(),
90.                             age:$("#txtAge").val()
92.                         },
94.                         dataType:"JSON",
95.                         success:function(res){
96.                             console.log(res);
97.                             console.log(res.status);
98.                             console.log(res.data);
99.                 }
100.             })
101.             })
102.         }
103.         function bindBtnEvent3(){
104.             $("#btn3").click(function(){
105.                     $.ajax({
106.                         url:'/task/ajax/',
107.                         type:"get",
108.                         data:$("#form3").serialize(),
109.                         dataType:"JSON",
110.                         success:function(res){
111.                             console.log(res);
112.                             console.log(res.status);
113.                             console.log(res.data);
114.                 }
115.             })
116.             })
117.         }
118.         function bindBtnEvent3(){
119.             $("#btnAdd").click(function(){
121.                     $(".error-msg").empty();
123.                     $.ajax({
124.                         url:'/task/add/',
125.                         type:"post",
126.                         data:$("#formAdd").serialize(),
127.                         dataType:"JSON",
128.                         success:function(res){
129.                             if(res.status){
130.                                 alert("添加成功！")
131.                             } else {
132.                                 $.each(res.error,function(name,data){
133.                                     $("#id_"+ name).next().text(data[0]);
134.                                 }
136.                             )
139.                             }
140.                 }
141.             })
142.             })
143.         }
146.     </script>
147. {% endblock %}

复制代码

在model.py中编写

1. #任务表   
2. class Task(models.Model):
3.     level_choices ={
4.         (1,"紧急"),
5.         (2,"重要"),
6.         (3,"临时"),
7.     }
8.     level = models.SmallIntegerField(verbose_name="级别",choices=level_choices,default=1)
9.     title = models.CharField(verbose_name="标题",max_length=64)
10.     detail = models.TextField(verbose_name="详细信息")
11.    
12.     user = models.ForeignKey(verbose_name="负责人",to="Admin",on_delete=models.CASCADE)

复制代码

终极显示样式

为了是管理员表显示name而不是对象

1. #输出显示函数——不输出对象
2.     def __str__(self):
3.         return self.username

复制代码

注：为了节约时间不像之前那样详细，之后偶然间复习我会重新编辑。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。