zoukankan      html  css  js  c++  java
  • ajax发送json格式数据

    前后端在做数据交互的时候 一定一定要表明你所发的的数据到底是什么格式

    前段后交互 你不能骗人家,不然后端开发人员来找你的时候会抄着一根凳子腿。
    你的数据时什么格式 你就应该准确无误告诉别人是什么格式

    那么怎么告诉后端你要发送的数据的格式是什么呢

    form 表单是通过 他的 enctype

    而 ajax 是通过 contentType,如果你要传送的数据是json(通常只有json格式)

    你需要这么写 contentType:'application/json'

    要怎样发送一个json格式的数据呢? 后端有json.dumps 前端有JSON.stringify()。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
    </head>
    <body>
    <input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
    <p>
        <button id="b1">计算</button>
    </p>
    <script>
        $('#b1').on('click',function () {
            $.ajax({
                url:'',
                type:'post',
                contentType:'application/json',
                {#data:{'t1':$('#t1').val(),'t2':$('#t2').val()},#}
                data:JSON.stringify({'username':'chanyuli','password':'123'}),
                success:function (data) {
                    $('#t3').val(data)
                    {#alert(data)#}
                }
            })
        })
    </script>
    </body>
    </html>
    

    这时候就会发现后端 post 里面没有任何信息了,这就是之前讲过的,django后端会对不同的数据格式进行不同的处理,这又不是 xxxxx&xxxxx类型的。所以没有在post里面。

    Ajax传json格式数据:django后端针对json格式的数据 不会自动帮你解析 会直接原封不动的给你放到request.body中 你可以手动处理 获取数据。

    这时候去后端 打request.body ,发现是一个b'{"username":"chanyuli","password":"123"}

    是一个bytes类型的数据,这时候我们自己反序列化就好了。

    注意点
    1.指定contentType参数
      contentType:'application/json',
    2.要将你发送的数据 确保是json格式的
                    data:JSON.stringify({'username':'jason','password':'123'})
            
    

    注意:有些时候 request.body 会看不了,django会给你报错。

  • 相关阅读:
    401. Binary Watch
    46. Permutations
    61. Rotate List
    142. Linked List Cycle II
    86. Partition List
    234. Palindrome Linked List
    19. Remove Nth Node From End of List
    141. Linked List Cycle
    524. Longest Word in Dictionary through Deleting
    android ListView详解
  • 原文地址:https://www.cnblogs.com/chanyuli/p/11761401.html
Copyright © 2011-2022 走看看