数据发送的三种方式

接受发送数据函数

 1 # 在这个页面去发送数据
 2 def ajax(request):
 3     return render(request, 'ajax.html')
 4 
 5 # 在这个函数中接收数据
 6 def ajaxjson(request):
 7     print(request.POST)
 8     ret = {'status': True, 'data': request.POST.get('username')}
 9     import json
10     return HttpResponse(json.dumps(ret))

 

方式一

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div>
 9     <form method="POST" action="/ajaxjson/" target="fm1">
10         <iframe name="fm1" id="fm1"></iframe>
11         <input type="text" name="username" placeholder="用户名">
12         <input type="password" name="pwd" placeholder="密码">
13         <input type="submit" onclick="submit_iframe();" value="Form提交">
14     </form>
15 </div>
16 
17 <script>
18     {#        此函数为固定用法，处理各个浏览器之间的兼容性问题#}
19     function getXHR() {
20         var xhr = null;
21         if (XMLHttpRequest) {
22             xhr = new XMLHttpRequest();
23         } else {
24             xhr = new ActiveXObject("Microsoft.XMLHTTP");
25         }
26         return xhr;
27     }
28     {# post请求发送数据拿到返回的数据并且设置请求头发送xmhl数据 #}
29     function ajax1() {
30         var xhr = getXHR();
31         xhr.open("POST", '/ajaxjson/', true);
32         xhr.onreadystatechange = function () {
33             if (xhr.readyState == 4) {
34                 //接受完毕
35                 {#                    console.log(xhr.responseText);#}
36                 var obj = JSON.parse(xhr.responseText);
37                 console.log(obj)
38             }
39         };
40         xhr.setRequestHeader('k1', 'v1');
41         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
42         xhr.send("name=root;pwd=123");
43     }
44 </script>
45 </body>
46 </html>

 

 

方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form method="POST" action="/ajaxjson/" target="fm1">
        <iframe name="fm1" id="fm1"></iframe>
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="pwd" placeholder="密码">
        <input type="submit" onclick="submit_iframe();" value="Form提交">
    </form>
</div>

<script>
    {# 定义submit_iframe提交时的鼠标事件,在鼠标点击之后为ifrom添加一个load事件 #}
    function submit_iframe() {
        $('#fm1').load(function () {
            var text = $('#fm1').contents().find('body').text();
            var obj = JSON.parse(text);
            console.log(text);
        })
    }
</script>
</body>
</html>

 

 

 

方式三

 

数据上传和文件上传一样还有一种基于jquery来做的上传方法与文件上传相同，只是接受参数的时候，数据上传文件的接受是在request.post里面提取，而文件是在request.FILE里面去取

posted @ 2018-02-15 15:31  cerofang  阅读(666)  评论(0)  编辑  收藏  举报