前后端数据交互_前后端数据怎么交互

• 目录
• 1、路由请求：
• 1.1、django中的get：
• 1.2、django中的post：
• 2、动态路由：
• 2.1、django中方案
• 3、JS：
• 3.1、django中的ajax：

---

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)