Djangoajax
Posted dalyday
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Djangoajax相关的知识，希望对你有一定的参考价值。
1.前后端交互
<div class="shade hide"></div> <!--遮罩层，全屏--> <div class="add-modal hide"> <!--弹出框--> <form method="POST" action="/host/"> <!--编辑弹出框内容--> <div class="group"> <input id="host" type="text" placeholder="主机名" name="hostname"/> </div> <div class="group"> <input id="ip" type="text" placeholder="IP" name="ip"/> </div> <div class="group"> <input id="port" type="text" placeholder="端口" name="port"/> </div> <div class="group"> <select id="sel" name="b_id"> {% for op in b_list %} <option value="{{ op.id }}">{{ op.caption }}</option> {% endfor %} </select> </div> <input type="submit" value="提交"/> <a id="ajax_submit" style="display: inline-block;padding:5px;background: blue;color: white">悄悄提交</a> <input id="cancel" type="button" value="取消"/> </form> </div>
$(function(){ $(\'#ajax_submit\').click(function () { $.ajax({ url:"/test_ajax/", //提交到 type:"POST", //什么方式提交 data:{\'hostname\':$(\'#host\').val(),\'ip\':$(\'#ip\').val(),\'port\':$(\'#port\').val(),\'b_id\':$(\'#sel\').val()}, //提交什么数据 success:function (data) { if(data==\'OK\'){ location.reload() // 重新加载页面 }else { alert(data); } } }) }) }) #Ajax代码
def test_ajax(requset): h = requset.POST.get(\'hostname\') i = requset.POST.get(\'ip\') p = requset.POST.get(\'port\') b = requset.POST.get(\'b_id\') if h and len(h) > 5: # models.Host.objects.create(hostname=h, ip=i, port=p, b_id=b,) return HttpResponse(\'OK\') else: return HttpResponse(\'开不了门\')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .shade{ position: fixed; top: 0; right:0 ; left: 0; bottom: 0; background: black; opacity: 0.6; z-index: 100; } .add-modal{ position: fixed; height: 300px; width: 400px; top: 100px; left: 50%; z-index: 101; border: 1px solid red; background: white; margin-left: -200px; } </style> </head> <body> <h1>主机列表（列表）</h1> <div> <input id="add_host" type="button" value="添加"/> <!--模态对话框--> </div> <table border="1"> <thead> <tr> <th>主机序号</th> <th>主机名字</th> <th>IP</th> <th>端口</th> <th>业务线名称</th> </tr> </thead> <tbody> {% for row in v1 %} <tr aa="{{ row.nid }}" ab="{{ row.b.id }}" ac="{{ row.b.code }}"> <td>{{ forloop.counter }}</td> <td>{{ row.hostname }}</td> <td>{{ row.ip }}</td> <td>{{ row.port }}</td> <td>{{ row.b.caption }}</td> </tr> {% endfor %} </tbody> </table> <h1>主机列表（字典）</h1> <table border="1"> <thead> <tr> <th>主机名字</th> <th>业务线名称</th> </tr> </thead> <tbody> {% for row in v2 %} <tr aa="{{ row.nid }}" ab="{{ row.b__id }}"> <td>{{ row.hostname }}</td> <td>{{ row.b__caption }}</td> </tr> {% endfor %} </tbody> </table> </table> <h1>主机列表（元组）</h1> <table border="1"> <thead> <tr> <th>主机名字</th> <th>业务线名称</th> </tr> </thead> <tbody> {% for row in v3 %} <tr aa="{{ row.0 }}" ab="{{ row.2}}"> <td>{{ row.1 }}</td> <td>{{ row.3 }}</td> </tr> {% endfor %} </tbody> </table> <div class="shade hide"></div> <!--遮罩层，全屏--> <div class="add-modal hide"> <!--弹出框--> <form method="POST" action="/host/"> <!--编辑弹出框内容--> <div class="group"> <input id="host" type="text" placeholder="主机名" name="hostname"/> </div> <div class="group"> <input id="ip" type="text" placeholder="IP" name="ip"/> </div> <div class="group"> <input id="port" type="text" placeholder="端口" name="port"/> </div> <div class="group"> <select id="sel" name="b_id"> {% for op in b_list %} <option value="{{ op.id }}">{{ op.caption }}</option> {% endfor %} </select> </div> <input type="submit" value="提交"/> <a id="ajax_submit" style="display: inline-block;padding:5px;background: blue;color: white">悄悄提交</a> <input id="cancel" type="button" value="取消"/> </form> </div> <script src="/static/jquery-1.12.4.js"></script> <!--JS文件--> <script> $(function () { <!--页面框架加载完成--> $(\'#add_host\').click(function () { <!--绑定事件--> $(\'.shade,.add-modal\').removeClass(\'hide\'); <!--点击添加按钮，呼出遮罩层与弹出框--> }); $(\'#cancel\').click(function () { $(\'.shade,.add-modal\').addClass(\'hide\'); }); $(\'#ajax_submit\').click(function () { $.ajax({ url:"/test_ajax/", <!--提交到--> type:\'POST\', <!--什么方式提交--> data:{\'hostname\':$(\'#host\').val(),\'ip\':$(\'#ip\').val(),\'port\':$(\'#port\').val(),\'b_id\':$(\'#sel\').val()}, <!--提交什么数据--> success:function (data) { if (data == \'OK\'){ location.reload() <!--重新加载页面--> }else { alert(data); } } }) }) }) </script> </body> </html>
2.后端发送请求，前端无法感受，且页面无反应
<form method="POST" action="/host/"> <!--编辑弹出框内容--> <div class="group"> <input id="host" type="text" placeholder="主机名" name="hostname"/> </div> <div class="group"> <input id="ip" type="text" placeholder="IP" name="ip"/> </div> <div class="group"> <input id="port" type="text" placeholder="端口" name="port"/> </div> <div class="group"> <select id="sel" name="b_id"> {% for op in b_list %} <option value="{{ op.id }}">{{ op.caption }}</option> {% endfor %} </select> </div> <input type="submit" value="提交"/> <a id="ajax_submit" style="display: inline-block;padding:5px;background: blue;color: white">悄悄提交</a> <input id="cancel" type="button" value="取消"/> <span id="error_msg" style="color:red"></span> </form>
$(function () { $(\'#ajax_submit\').click(function () { $.ajax({ url:"/test_ajax/", <!--提交到--> type:\'POST\', <!--什么方式提交--> data:{\'hostname\':$(\'#host\').val(),\'ip\':$(\'#ip\').val(),\'port\':$(\'#port\').val(),\'b_id\':$(\'#sel\').val()}, <!--提交什么数据--> success:function (data) { var obj = JSON.parse(data); //反序列，字符串转换成对象 if(obj.status){ location.reload(); }else { $(\'#error_msg\').text(obj.error); } } }) }) })
def test_ajax(requset): import json ret = {\'status\':True,\'error\':None,\'data\':None} try: h = requset.POST.get(\'hostname\') i = requset.POST.get(\'ip\') p = requset.POST.get(\'port\') b = requset.POST.get(\'b_id\') if h and len(h) > 5: # models.Host.objects.create(hostname=h, ip=i, port=p, b_id=b, ) else: ret[\'status\'] = False ret[\'error\'] =\'太短了\' except Exception as e: ret[\'status\'] = False ret[\'error\'] = \'请求错误\' return HttpResponse(json.dumps(ret)) #字符串，形似字典
3.利用serialize自动获取form表单数据
<div class="edit-modal hide"> <!--弹出框--> <form id="edit_form" method="POST" action="/host/"> <!--编辑弹出框内容--> <input type="text" name="aa" style="display: none" /> <input id="host" type="text" placeholder="主机名" name="hostname"/> <input id="ip" type="text" placeholder="IP" name="ip"/> <input id="port" type="text" placeholder="端口" name="port"/> <select id="sel" name="b_id"> {% for op in b_list %} <option value="{{ op.id }}">{{ op.caption }}</option> {% endfor %} </select> <a id="ajax_submit_edit">确认编辑</a> </form> </div>
$(function () { $(\'.edit\').click(function () { $(\'.hide,.edit-modal\').removeClass(\'hide\'); var ab = $(this).parent().parent().attr(\'ab\'); var aa = $(this).parent().parent().attr(\'aa\'); $(\'#edit_form\').find(\'select\').val(ab); $(\'#edit_form\').find(\'input[name="aa"]\').val(aa); //修改 $.ajax({ //data:{\'hostname\':$(\'#host\').val(),\'ip\':$(\'#ip\').val(),\'port\':$(\'#port\').val(),\'b_id\':$(\'#sel\').val()}, data:$(\'#edit_form\').serialize() //取代上面一句话，通过form中的id="edit_form"值一一对应发到后台（name是name,值是值） }) }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .shade{ position: fixed; top: 0; right:0 ; left: 0; bottom: 0; background: black; opacity: 0.6; z-index: 100; } .add-modal,.edit-modal{ position: fixed; height: 300px; width: 400px; top: 100px; left: 50%; z-index: 101; border: 1px solid red; background: white; margin-left: -200px; } </style> </head> <body> <h1>主机列表（列表）</h1> <div> <input id="add_host" type="button" value="添加"/> <!--模态对话框--> </div> <table border="1"> <thead> <tr> <th>主机序号</th> <th>主机名字</th> <th>IP</th> <th>端口</th> <th>业务线名称</th> <th>操作</th> </tr> </thead> <tbody> {% for row in v1 %} <tr aa="{{ row.nid }}" ab="{{ row.b.id }}" ac="{{ row.b.code }}"> <td>{{ forloop.counter }}</td> <td>{{ row.hostname }}</td> <td>{{ row.ip }}</td> <td>{{ row.port }}</td> <td>{{ row.b.caption }}</td> <td> <a class="edit">编辑</a>|<a class="delete">删除</a> </td> </tr> {% endfor %} </tbody> </table> <h1>主机列表（字典）</h1> <table border="1"> <thead> <tr> <th>主机名字</th> <th>业务线名称</th> </tr> </thead> <tbody> {% for row in v2 %} <tr aa="{{ row.nid }}" ab="{{ row.b__id }}"> <td>{{ row.hostname }}</td> <td>{{ row.b__caption }}</td> </tr> {% endfor %} </tbody> </table> </table> <h1>主机列表（元组）</h1> <table border="1"> <thead> <tr> <th>主机名字</th> <th>业务线名称</th> </tr> </thead> <tbody> {% for row in v3 %} <tr aa="{{ row.0 }}" ab="{{ row.2}}"> <td>{{ row.1 }}</td> <td>{{ row.3 }}</td> </tr> {% endfor %} </tbody> </table> <div class="shade hide"></div> <!--遮罩层，全屏--> <div class="add-modal hide"> <!--弹出框--> <form method="POST" action="/host/"> <!--编辑弹出框内容--> <div class="group"> <input id="host" type="text" placeholder="主机名" name="hostname"/> </div> <div class="group"> <input id="ip" type="text" placeholder="IP" name="ip"/> </div> <div class="group"> <input id="port" type="text" placeholder="端口" name="port"/> </div> <div class="group以上是关于Djangoajax的主要内容，如果未能解决你的问题，请参考以下文章使用 Jquery 的 Django ajax 'like' 按钮？