接受发送数据函数
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里面去取