在线编程在线课堂在线测评Anycodes在线编程

编程论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

How to use bs4??
本帖最后由 carry0987 于
Double Queue 问题描述 : The new founded Balkan Investment Group Bank (
John 问题描述 : Little John is playing very funny game
linux-command Linux命令大全搜索工具,内容包含Linux命令
Coati 是一款跨平台的代码查看工具,适用于 C/C++ 和 Java。商业软件。特性:1. 索引
系统可承载海量并发,消息收发确认机制 保障消息必达 系统采用动态智
全平台视频监控,支持安卓苹果以及pcweb,支持海康大华等主流dvr,全部源码以及文档 单聊、群聊、商
如何访问类的私有属性? 下面以 TPathData 为例,
问题:从 XE4 以来,Firemonkey 曲线绘图在移动平台不平滑的问题一直令人诟病,提交到官方的 QC 也是族繁不及备载,官方似乎有意的
操作数据库(RODBC)   odbcConnect(dsn, uid="", p
数据模式:mode函数显示任何对象的模式。常见的单个的
系统可承载海量并发,消息收发确认机制 保障消息必达 系统采用动态智
RabbitMQ与PHP(一) 项
Iease团队扩编预备中,盼望能有Ruby或者java工程师加盟。全职兼职都可以。有爱好的伴侣请与我接洽。 邮件:i
ruby 怎么设置装备摆设GTK2,求教指导下!
#include #include #include #include using namespace std; int main() {
标题如图所示: 有n盏灯,编号1~n。一开端灯都是关着的
成熟的消息收发确认机制,支持万人大群 支持开发自定义的消息sdk接口,扩展性超强 支持单/
成熟的消息收发确认机制,支持万人大群 支持开发自定义的消息sdk接口,扩展性超强 支持单/
1. 注意列表和集合的区别 set 列表表现形式: list_1
Ajax   Ajax即“Asynchronous Javascript And
大师好,我比来在做布谷鸟优
分辨提取A和B图像Harris角点,接下来须要对

[Python] Python开发【前端】:Ajax

[复制链接]
发表于 2016-12-24 15:00:43 | 显示全部楼层 |阅读模式
Ajax

  Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScriptXML标准通用标记语言的子集),AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面
1、初识
  1. $.ajax({
  2.     url: '/host',               // 数据提交地址
  3.     type: "POST",               // 提交类型
  4.     data: {'k1': 123, 'k2': "root"},        // 提交的内容 字典格式
  5.     success: function(data){    // 客户端会一直等待服务端返回的数值
  6.             // data是服务器端返回的字符串
  7.         var obj = JSON.parse(data);
  8.     }
  9. })
  10. 建议:永远让服务器端返回一个字典
  11. return HttpResponse(json.dumps(字典))
复制代码

2、简单的前后端交互 
  1. <div class="shade hide"></div>
  2.         <div class="add-modal hide">
  3.             <form method="POST" action="/home/">
  4.             <div class="group">
  5.                 <input id='host' type="text" placeholder="主机名" name="hostname" />
  6.             </div>
  7.             <div class="group">
  8.                 <input id='ip' type="text" placeholder="IP" name="ip" />
  9.             </div>
  10.             <div class="group">
  11.                 <input id='port' type="text" placeholder="端口" name="port" />
  12.             </div>
  13.             <div class="group">
  14.                 <select id='sel' name="b_id">
  15.                     {% for op in b_list %}
  16.                     <option value="{{ op.id }}">{{ op.caption }}</option>
  17.                     {% endfor %}
  18.                 </select>
  19.             </div>
  20.             <input type="submit" value="提交" />
  21.             <a id="ajax_submit">要上天提交</a>
  22.             <input id="cancel" type="button" value="取消" />
  23.         </form>
  24.     </div>
复制代码
index.html
Ajax代码:
  1. $(function(){
  2.     $('#ajax_submit').click(function () {
  3.         $.ajax({
  4.             url:"/test_ajax/",
  5.             type:"POST",
  6.             data:{'hostname':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#sel').val()},
  7.             success:function (data) {
  8.                 if(data=='OK'){
  9.                     location.reload()   // 重新加载页面
  10.                 }else {
  11.                     alert(data);
  12.                 }
  13.             }
  14.         })
  15.     })
  16. })
复制代码
Django代码:
  1. def test_ajax(request):
  2.     print(request.method)
  3.     h = request.POST.get('hostname')
  4.     i = request.POST.get('ip')
  5.     p = request.POST.get('port')
  6.     b = request.POST.get('b_id')
  7.     print(h,i,p,b)
  8.     if h and len(h) > 5:        # 主机名长度判断
  9.         models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b) # 创建数据
  10.         return HttpResponse("OK")    # 返回OK 严格大小写
  11.     else:
  12.         return HttpResponse("主机名太短")  # 返回错误提示
复制代码
  
3、对前后端交互完善(当后端有问题时,前端收不到data,页面无反应)
  1. <div class="add-modal hide">
  2.             <form method="POST" action="/home/">
  3.             <div class="group">
  4.                 <input id='host' type="text" placeholder="主机名" name="hostname" />
  5.             </div>
  6.             <div class="group">
  7.                 <input id='ip' type="text" placeholder="IP" name="ip" />
  8.             </div>
  9.             <div class="group">
  10.                 <input id='port' type="text" placeholder="端口" name="port" />
  11.             </div>
  12.             <div class="group">
  13.                 <select id='sel' name="b_id">
  14.                     {% for op in b_list %}
  15.                     <option value="{{ op.id }}">{{ op.caption }}</option>
  16.                     {% endfor %}
  17.                 </select>
  18.             </div>
  19.             <input type="submit" value="提交" />
  20.             <a id="ajax_submit">要上天提交</a>
  21.             <input id="cancel" type="button" value="取消" />
  22.             <span id="error_msg"></span>
  23.         </form>
  24.     </div>
复制代码
index.html
Ajax代码:
  1. $(function(){
  2.     $('#ajax_submit').click(function () {
  3.         $.ajax({
  4.             url:"/test_ajax/",
  5.             type:"POST",
  6.             data:{'hostname':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#sel').val()},
  7.             success:function (data) {
  8.                 console.log(data)    // data {"data": null, "status": false, "error": "\u4e3b\u673a\u540d\u592a\u77ed"}
  9.                 var obj = JSON.parse(data);     // 反序列化 把字符串data换成对象obj
  10.                                                 // 序列化 JSON.stringify() 把obj转换为字符串
  11.                 if(obj.status){
  12.                     location.reload()   // 重新加载页面
  13.                 }else {
  14.                     $('#error_msg').text(obj.error)
  15.                 }
  16.             }
  17.         })
  18.     })
  19. })
复制代码
Django代码:  
  1. import json
  2. def test_ajax(request):
  3.     ret = {'status':True,'error':None,'data':None}  # 返回一个字典
  4.     try:
  5.         h = request.POST.get('hostname')
  6.         i = request.POST.get('ip')
  7.         p = request.POST.get('port')
  8.         b = request.POST.get('b_id')
  9.         print(h,i,p,b)
  10.         if h and len(h) > 5:        # 主机名长度
  11.             print("ok")
  12.             models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)
  13.         else:
  14.             ret['status'] = False
  15.             ret['error'] = '主机名太短'
  16.     except Exception as e:
  17.         ret['status'] = False
  18.         ret['error'] = '请求错误'
  19.     return  HttpResponse(json.dumps(ret))       # 对字典进行序列化
复制代码

4、serialize自动获取表单数据
  1. <form class="add-form" method="POST" action="/home/">
  2.             <div class="group">
  3.                 <input id='host' type="text" placeholder="主机名" name="hostname" />
  4.             </div>
  5.             <div class="group">
  6.                 <input id='ip' type="text" placeholder="IP" name="ip" />
  7.             </div>
  8.             <div class="group">
  9.                 <input id='port' type="text" placeholder="端口" name="port" />
  10.             </div>
  11.             <div class="group">
  12.                 <select id='sel' name="b_id">
  13.                     {% for op in b_list %}
  14.                     <option value="{{ op.id }}">{{ op.caption }}</option>
  15.                     {% endfor %}
  16.                 </select>
  17.             </div>
  18.             <input type="submit" value="提交" />
  19.             <a id="ajax_submit">要上天提交</a>
  20.             <input id="cancel" type="button" value="取消" />
  21.             <span id="error_msg"></span>
  22.         </form>
复制代码
index.html
Ajax代码:
  1. $.ajax({
  2.     url:"/test_ajax/",
  3.     type:"POST",         
  4.     data:$('.add-form').serialize(),  // 获取表单数据提交 必须是form表单
  5.     success:function (data) {
  6.         })
复制代码

5、Ajax代码补充(traditional,dataType)
Ajax代码:
  1. $(function(){
  2.     $('#add_submit_ajax').click(function(){
  3.         $.ajax({
  4.             url: '/ajax_add_app',
  5.             data: {'user': 123,'host_list': [1,2,3,4]},
  6.             // data: $('#add_form').serialize(),
  7.             type: "POST",
  8.             dataType: 'JSON',       // 内部对传过来的数据直接执行JSON.parse 拿到的数据直接为对象而非字符串
  9.             traditional: true,      // 添加此项 当字典里包含列表时候,后端可以getlist到里面的数据
  10.             success: function(obj){
  11.                 console.log(obj);
  12.             },
  13.             error: function () {     // 未知错误时执行,指前端收不到后台发送的obj时,执行
  14.             }
  15.         })
  16.     });
  17. })
复制代码
Django代码:
  1. <div class="shade hide"></div>
  2.         <div class="add-modal hide">
  3.             <form method="POST" action="/home/">
  4.             <div class="group">
  5.                 <input id='host' type="text" placeholder="主机名" name="hostname" />
  6.             </div>
  7.             <div class="group">
  8.                 <input id='ip' type="text" placeholder="IP" name="ip" />
  9.             </div>
  10.             <div class="group">
  11.                 <input id='port' type="text" placeholder="端口" name="port" />
  12.             </div>
  13.             <div class="group">
  14.                 <select id='sel' name="b_id">
  15.                     {% for op in b_list %}
  16.                     <option value="{{ op.id }}">{{ op.caption }}</option>
  17.                     {% endfor %}
  18.                 </select>
  19.             </div>
  20.             <input type="submit" value="提交" />
  21.             <a id="ajax_submit">要上天提交</a>
  22.             <input id="cancel" type="button" value="取消" />
  23.         </form>
  24.     </div>0
复制代码
  

  



上一篇:python -os、sys
下一篇:在编程中容易出现的许多粗心
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复

使用道具 举报

发表于 2017-3-28 15:54:20 | 显示全部楼层
楼下大都比
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发表于 2017-6-4 04:59:37 | 显示全部楼层
牛逼啊
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发表于 2017-6-15 04:17:00 | 显示全部楼层
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发表于 2017-6-18 22:29:40 | 显示全部楼层
真无聊啊
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发表于 2017-6-28 07:34:47 | 显示全部楼层
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发表于 2017-7-20 14:25:03 | 显示全部楼层
楼上是脑残
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发表于 2017-7-25 07:46:12 | 显示全部楼层
顶顶顶
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发表于 2017-7-31 20:39:43 | 显示全部楼层
楼下大都比
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发表于 2017-9-6 01:48:48 | 显示全部楼层
这个是真心的
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发布主题 上个主题 下个主题 快速回复 返回列表 官方QQ群
在线客服
客 服 中 心
群 机 器 人
网站二维码
收 起 客 服

QQ|Archiver|手机版|小黑屋|Anycodes ( ICP14002806Anycodes在线编程

GMT+8, 2018-11-15 04:47 , Processed in 1.516922 second(s), 96 queries .

Powered by Anycodes

© 2001-2013 吉林市群龙科技有限公司 Inc.

快速回复 返回顶部 返回列表