Django中数据在前后端传递的方式之表单、JSON与ajax

Kitty ·

更新时间:2024-09-20

· 235 次阅读

前言

先说简单的：

复杂一点的 Ajax 与 JSON

总结

前言

最近用Django写项目的时候用到了数据的传递，一窍不通，查了点资料。记录一下。水平不高，瓜不保熟。

从两方面来说：从后端传递给前端页面、以及从前端页面的输入数据传给后端

先说简单的：

1、从后端到页面、也就是view文件到传递给HTML展示出来

以Django框架为例，views里有个函数叫test_view 他作为后端函数向浏览器发送 test_view.html展示给用户。

# /views
def test_view(request):
    python_data = "python里的数据"
    return render(request, "test_view.html", {"html_data_name":python_data})

render的第三个参数就是传进去的数据

那么，怎么获取呢。html 文件里：双大括号扩住数据名

<!--/test_view.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>数据读取：{{html_data_name}}</p>
</body>
</html>

2、从页面到后端、也就是HTML文件到views文件

通过表单传给后端：在HTML里建一个表单，这是一种HTML内置的获取、提交数据的方法。表单里action=""意为把数据传给自己页面的url

<!--/test_view.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form  method="post" action="">
        {% csrf_token %}
        <input type="text" name="html_data_to_views_name" value="Mickey">
        <input type="submit" value="Submit">
    </form> 
</body>
</html>

获取方法：request.POST.get('变量名')

# /views
def test_view(request):
    if request.method == 'POST':
        data_from_html = request.POST.get('html_data_to_views_name')
        HttpResponse(f'views得到表单数据{data_from_html}')
    python_data = "python里的数据"
    return render(request, "test_view.html", {"html_data_name":python_data})

以上代码的修改在于增加了个判断。判断request.method 是否为POST。当表单提交的时候就会重新调用了一次test_view，并且request里包含着表单的内容，方法为post。

这就会进入判断，通过request.POST.get将request里的数据取出。

以上这两种有很大缺陷，每次传递都是一次刷新，不适用于大量数据。比如网页需要根据数据实时更新画面之类的。那就不大行了

复杂一点的 Ajax 与 JSON

可以简单理解为：

Ajax 是一个不用刷新就能传输数据的玩意儿，而且这个玩意不是单方向的，它既能页面传给后端，也能后端传给页面。而且你运行一次他就给你传一次。

JSON 是一种数据格式，在python里一个字典的变量，你把它传到HTML的JavaScript里它还像字典一样使用。其实就是方便传输。

JSON

在Django中，使用JSON由后端传输数据给前端，有两种方式，一种是使用Python的JSON包，一种是使用Django的JsonResponse

# views.py 发送
 def test_view(request):
     data={
         'html_data_name': 'python_data',
     }
    # return HttpResponse(json.dumps(data)) # 会被识别为text/html应该是：
    return HttpResponse(json.dumps(data), content_type='application/json')
    # 或return JsonResponse(data)

<!--/test_view.html 读取-->
<script>
var jsondata  = JSON.parse(data);//原生
</script>

同样的也能从HTML发送给后端，只是需要放到表单里提交：

<!--/test_view.html -->
<!--假设你有一个JSON数据要先把他转为字符串 -->
<script>
JSONdata={'key':'value'}
json_str_data = JSON.stringify(JSONdata).toString();
function get_json_str(){
    var inp_id =document.getElementById("str_json_data");
    inp_id.value = json_str_data
}
</script>
<!--将字符串放到一个隐藏的表单input里，提交后就传走了 -->
<form method="post" action="">
    {% csrf_token %}
    <input type="text" id="str_json_data" style="display:none" name="str_json_data">
    <button type="submmit" onclik="get_json_str()">提交</button>
</form>

# views.py 读取
    # /views
    def test_view(request):
        if request.method == 'POST':
            json_data = json.loads(request.body) //json读取方式
            return HttpResponse("get!")
        return render(request, "test_view.html", {})

这里涉及到俩概念：

「解析」：将JSON格式的字符串转化成JSON对象（JS对象值）的过程。也称为「反序列化」。

「序列化」：就是说把原来是对象的类型转换成字符串类型（或者更确切的说是JSON字符串类型的）。

解析：将字符串变成了Obj带有的属性就是字符串里显示的。可以用点号取出。

var data = '{"name":"chunlynn" ,"age": 27, "sex": "man" ,"qq":"277539687"}'; 
var jsondata = $.parseJSON(data);//jQuery
var jsondata  = JSON.parse(data);//原生

序列化

var jsonstrdata = JSON.stringify(data).toString();

ajax

ajax的使用方式:

我当时没看懂，所以在这解释一下里面的语句都是干嘛的：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
    data:{"data_send":"你想发给url的数据"} //教程里没给url发数据
    url:"访问这个url后，对应views发过来的数据就是下面的data_get",
    success:function(data_get){
      $("#div1").html(data_get); //用得到的数据替换掉id="div1"的div里的那句话
    }});
  });
});
</script>
</head>
<body>
<div id="div1"><h2>在ajax访问成功后将这里的数据变成ajax得到的数据</h2></div>
<button>使用ajax</button>
</body>
</html>

整体流程就是：点击按钮->触发了对应函数->ajax启动：此时ajax将data里的数据传给了url（教程里没传，但可以传）并访问、触发了url对应views里的视图（后端）、并且后端返回了数据被ajax放到了success:function()的参数里、运行了这个函数-> html内容被改变。

ajax的主要字段:

data: 传给后端的数据

url：传给哪个后端处理函数

success：得到数据后要这些数据干啥

Ajax+json：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function(){
  $("button").click(function(){
    var token_csrf = "{{ csrf_token }}";  //因为django的form表单中都包含csrf_token，因此在用ajax传表单数据时也要带上
    var JSON_data = { "js_data": 555 };  
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        headers: { "X-CSRFToken": token_csrf },
        url: "/testview",
        dataType: "json",
        data: JSON.stringify(JSON_data), //传进views里的数据
        success: function (data) { //data为地址传过来的数据
            //在此对data进行操作
            }
        };
    });
  });
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取其他内容</button>
</body>
</html>

后端：

def post(self, request):
    data = json.loads(request.body)
    get_data = data["js_data"]
    data={
        'send_data':'send_data',
    }
    return HttpResponse(json.dumps(data),content_type="application/json")
    # 或者直接使用JsonResponse函数
    # return JsonResponse(data)

总结

到此这篇关于Django中数据在前后端传递的方式之表单、JSON与ajax的文章就介绍到这了,更多相关Django数据在前后端传递方式内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

JSON 表单数据 Django AJAX

1024 个赞