1、路由请求:
1.1、django中的get:
如:
<form method="get"> #路由通过get请求进行获取q值
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="搜索">#输入框数据以q=的方式拼接到链接
<span class="input-group-btn">
<button class="btn btn-default" type="submit"> #type="submit"这样才能传
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
</div>
</form>
后端可以通过search_data = request.GET.get('q', "")获取到。
1.2、django中的post:
表单通过post请求传过来
<form method="post" novalidate>
{% csrf_token %}
<div class="form-group">
<label >用户名</label>
{{ form.username }}
<span style="color: red">{{ form.username.errors.0 }}</span>
</div>
<div class="form-group">
<label >密码</label>
{{ form.password }}
<span style="color: red">{{ form.password.errors.0 }}</span>
</div>
<input type="submit" value="登 录" class="btn btn-primary">
</form>
则后端则用request.POST来获取到:
class LoginForm(forms.Form):
username=forms.CharField(
label="用户名",
widget=forms.TextInput(attrs={"class":"form-control","placeholder":"用户名"}),
required=True
)
password=forms.CharField(
label="密码",
widget=forms.PasswordInput(render_value=True,attrs={"class": "form-control","placeholder":"密码"}),
required=True
)
def login(request):
if request.method=="GET":
form = LoginForm()
return render(request,'login.html',{'form':form})
form = LoginForm(data=request.POST)
2、动态路由:
2.1、django中方案
前端:
<a class="btn btn-primary btn-xs" href="/user/{{ i.nid }}/edit/">编辑</a>
路由对应:
path('admin/<int:nid>/edit/', admin.admin_edit), 这里可获取到id
视图函数:
def admin_edit(request,nid):
这样就可以使用前端获取的nid了,如:
row_object=models.Admin.objects.filter(id=nid).first()
3、JS:
3.1、django中的ajax:
get请求:
基于dom绑定onclick="clickMe()
<input id="x".....>
<input type="button" class="btn btn-primary" value="点击" onclick="clickMe();" />
<script type="text/javascript">
function clickMe() {
$.ajax({
url:'/task/list/',
type:"get" , 说明这是个get请求
data:
通过标签id定位数据。也可以将input输入框放在一个form表单里,
然后用表单的id进行定位,用.serialize()打包成类似字典的东西。
表单中的每个输入框的name=""就是传到后台的数据的字典key
n1:$("#x").val(),
dataType:"JSON",
success : function (res) {
console.log(res);
}
})
}
</script>
这样在/task/list/的对应路由函数就可以通过
request.GET获取到data的对象集合
基于jquery绑定
<input id="x" .....>
<input id="btn1" class="btn btn-primary" value="点击" />
<script type="text/javascript">
$(function (){
这里页面加载完成后直接执行
binBtn1Event();
})
function binBtn1Event(){
$("#btn1").click(function (){
$.ajax({
url:'/task/list/',
type:"get" ,
data:n1:$("#x").val(),
success : function (res) {
console.log(res);
}
})
})
}
</script>
对于post请求,则需要额外在对应视图函数文件上:
from django.views.decorators.csrf import csrf_exempt
然后紧挨着对应视图函数上:
后端接收:
案例:
通过post获取个表单:
form = TaskModeLForm(data=request.POST)
通过get获取一个数:
uid=request.GET.get('uid')
!!!注意前端发送过来的数据类型,都是queryset(字典集合),你懂的。
上面说了那么多,其实都是ajax往后端发送。下面是后端返回到前端:
案例:
from django.http import JsonResponse
from django.core.exceptions import ValidationError
@csrf_exempt
def task_add(request):
form=TaskModelForm(data=request.POST)
if form.is_valid():
form.save()
data_dict = {"status": True}
return JsonResponse(data_dict)
data_dict={"status":False,'error':form.errors}
记住,ajax后端返回的一定要json格式
return JsonResponse(data_dict)