V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
102516949
V2EX  ›  问与答

初学后端, django 怎么添加前端按钮点击事件

  •  
  •   102516949 · 2015-07-11 10:21:09 +08:00 · 18347 次点击
    这是一个创建于 3427 天前的主题,其中的信息可能已经有所发展或是发生改变。

    主要是前端点击按钮,然后django数据库查询后返回到前端页面上,Google了好久了.......

    32 条回复    2015-07-12 10:45:09 +08:00
    iiduce
        1
    iiduce  
       2015-07-11 10:26:53 +08:00   ❤️ 1
    和django没什么关系。无非两种,get和post。返回到前端页面,刷新或者无刷新,无刷新就用ajax,刷新就重新渲染页面。
    fyl00
        2
    fyl00  
       2015-07-11 10:30:42 +08:00
    我这个新手是这么做的:

    views.py 写个函数来处理查询,然后在 urls.py 里面给这个 view 定义个 url;
    前端的按钮可以是直接跳转到这个 url 页面,或者用 js 来处理直接显示在当前页面。
    qige023
        3
    qige023  
       2015-07-11 10:31:10 +08:00
    和django没关系,你需要的是jquery ajax
    tini26
        4
    tini26  
       2015-07-11 10:32:37 +08:00
    楼主还没搞懂后端和前端的关系,10年前经常被问到的问题:asp怎么读取javascript中的变量
    iiduce
        5
    iiduce  
       2015-07-11 10:32:40 +08:00   ❤️ 6
    这种问题在v2ex上很难有人回答的,因为太基础。我回答是因为5年前刚到v2ex的时候,问了差不多同样的问题,被批判的体无完肤。那次提问确实刺激到我,也对我职业生涯影响重大,让我放弃了.net,转向了python及django开发。
    tobyxdd
        6
    tobyxdd  
       2015-07-11 10:37:54 +08:00 via Android
    @iiduce 好事😂
    imlonghao
        7
    imlonghao  
       2015-07-11 10:41:54 +08:00 via Android
    Ajax
    sox
        8
    sox  
       2015-07-11 10:47:50 +08:00   ❤️ 2
    本着 SOX 团乐于助人的惊人来回答一下:

    form/ajax
    102516949
        9
    102516949  
    OP
       2015-07-11 11:34:03 +08:00
    @iiduce 这次的project也刺激了我。
    102516949
        10
    102516949  
    OP
       2015-07-11 11:42:52 +08:00
    @iiduce 去看了你5年前的帖子,我也决定放弃.net,放弃visual Studio了
    abelyao
        11
    abelyao  
       2015-07-11 11:55:54 +08:00 via iPhone
    看标题猜测楼主之前用 asp.net 的?
    102516949
        12
    102516949  
    OP
       2015-07-11 11:58:49 +08:00
    @abelyao 第一次写web,之前写的都是桌面和安卓程序。原本是android的课程设计,但那个老师不知怎么的,改成HTML5 Programming了
    102516949
        13
    102516949  
    OP
       2015-07-11 12:01:09 +08:00
    @abelyao 周一就要交了,我觉得有点悬。。。。
    abelyao
        14
    abelyao  
       2015-07-11 12:03:04 +08:00 via iPhone
    @102516949 ……是有点悬,从你上一贴问的时候就感觉是挑了个重担,不过当时以为没有前端基础应该也是有 web 开发基础的。
    102516949
        15
    102516949  
    OP
       2015-07-11 12:05:03 +08:00
    @abelyao 同学都在网上抄模板,我以为web也是和桌面程序差不多的,所以就笑嘻嘻的自己做了......
    sciooga
        16
    sciooga  
       2015-07-11 12:48:20 +08:00
    @iiduce 看了你五年前的主题 /t/2253 再看你今天回复,对我有一种莫名的激励... 已感谢!
    zonghua
        17
    zonghua  
       2015-07-11 13:00:21 +08:00
    @102516949 我记得aps.net的还真的是有按钮事件的
    sciooga
        18
    sciooga  
       2015-07-11 13:01:18 +08:00   ❤️ 1
    简单逻辑如下,点击按钮向接口发送 GET 请求 比如 jQuery 可以这样写:

    $.get('/api?q=What’s your name?', function(data){

    //do something

    });

    网页上点了按钮后,服务端会收到一个来自客户端的请求(我记得还得留意一下 csrf 的问题),然后 views.py 处理需要处理的数据返回给客户端 return HttpResponse("My name is Li Lei.")。

    最后你在网页上就可以收到数据然后进行处理了。
    102516949
        19
    102516949  
    OP
       2015-07-11 13:05:15 +08:00
    @zonghua Asp.net感觉和winform好像,不过我没学,只是当初写winform的时候顺便看了看
    102516949
        20
    102516949  
    OP
       2015-07-11 13:08:17 +08:00
    @sciooga 谢了,刚刚一直再看AJAX这一方面,这方面一窍不通,这次真的是作大死了。话说我有一个登陆窗口,我准备用post一个JSON过去,那django那里该怎么接收JSON?然后怎么返回登入成功或失败给前端?
    102516949
        21
    102516949  
    OP
       2015-07-11 13:11:18 +08:00
    @sciooga 看了下你竟然是大一的学弟,感觉没脸继续问问题了
    abelyao
        22
    abelyao  
       2015-07-11 13:21:48 +08:00
    @102516949 @zonghua

    asp.net 的 webform 其实也是一样的,只是 asp.net 把点击事件的绑定 hash 之后写在页面上,服务端接收到请求之后先去解析这段 hash 就知道点了调用哪个事件来处理相应的事情,这也是为什么 webform 的 html 源代码包含了一大堆 __VIEWSTATE 和 __EVENTVALIDATION 的东西。

    当然 asp.net 也有不用 webform 的写法,向楼上说的 mvc 就是其中一种,web 的东西目前来说原理都是一样,只是怎么封装而已,而 .net 正巧喜欢把东西都封装起来,但是 web 是需要让响应速度尽量快,这个快包括了服务端处理事件的速度,以及响应页面的速度,我看过一些 webform 的页面包含了几百行 __VIEWSTATE 的,给页面增加了上百 K 代码,简直… 脑残。

    楼上的朋友说得对,如果楼主想继续走 asp.net 那么 mvc 是必须要学习的,抛弃 webform 你才能看到 web 的本身,而 mvc 相比其它语言的 mvc 框架其实也已经简化(封装)了很多。如果楼主暂时理解不了其它语言是怎么处理的,那么甚至建议你从 html 的 form 开始去了解。
    abelyao
        23
    abelyao  
       2015-07-11 13:27:25 +08:00   ❤️ 1
    @102516949

    然后我觉得你的问题是和 AJAX 无关的,你现在也不要去看 AJAX 了。

    首先你需要确定一件事,在页面上点一个按钮,django 查询数据库之后把数据展示在页面上,这个过程之间,页面要不要刷新?页面的地址要不要变?这些都是需要先交代的前提,到底是在一个普通页面上点开一个列表页面、或者数据展示页面,还是一个搜索框输入关键词之后跳到结果页面,这都有不同的做法。

    总而言之,先了解一下 django 怎么处理 get 和 post 请求,然后 html 怎么去产生 get 和 post 请求吧。
    sciooga
        24
    sciooga  
       2015-07-11 13:36:51 +08:00
    @102516949
    在这个论坛“竟然”应该是留给高中学弟的... 我还太菜了...
    登陆的话 Django 直接用 https://docs.djangoproject.com/en/1.8/topics/auth/
    Django 接收 json 应该是这样:

    x = simplejson.loads(request.raw_post_data)
    post_q = x['q']

    具体你多 Google 一下,官网文档也很清晰,照着文档写个简单的页面应该不是太难的。
    102516949
        25
    102516949  
    OP
       2015-07-11 13:38:28 +08:00
    @abelyao
    现在项目就差这一块交互的没做了,具体的交互有下面几点
    1.登入,登入时需要查询数据库是否是合法用户。
    2.注册,查询数据库是否有重名来决定是否注册成功。
    3.发帖,将数据存进数据库。
    4.看帖,通过瀑布流布局,不断地读取数据库。返回给前端
    我觉得这些操作本质上都是一样的,都是点击按钮后,后端执行一系列操作最后返回结果给前端。谢谢你的指导,现在就去看。
    learnshare
        26
    learnshare  
       2015-07-11 13:44:20 +08:00
    是不是先找本前端、Phthon/Django 入门的资料看看比较好
    zonghua
        27
    zonghua  
       2015-07-11 14:12:54 +08:00
    @abelyao 我没碰过asp.net,只是模拟登陆正方教务系统的时候发现了这个东西,感觉表单,表格都是直接拖出来的,名称都是按序数命名。微软的这个webform 简直是奇技淫巧,不考虑数据过长的情况下,简直够精妙啊,造个轮子移植到其他地方去。
    abelyao
        28
    abelyao  
       2015-07-11 14:36:52 +08:00 via iPhone
    @zonghua webform 能让人觉得那么好用,那么容易上手,Visual Studio 这么变态的 IDE 是功不可没的。
    102516949
        29
    102516949  
    OP
       2015-07-11 14:44:26 +08:00
    @abelyao
    刚刚学习了下,您看看我理解的对不对。
    django和前端jquery可以通过JSON来传递数据。
    前端发送HTTP REQUEST里面可以包含JSON数据,后端处理后可以返回一个JSON给前端,前端jquery再通过callback method处理这个返回的data
    abelyao
        30
    abelyao  
       2015-07-11 15:54:25 +08:00
    @102516949
    如果目前这样可以解决你的问题,那么就赶紧先把作业做完吧。
    如果你打算学习 web 开发的,那么还是建议你先学一下最最基础 html,页面向服务端发生请求,是不需要 jQuery 甚至不需要 JavaScript 的。
    MrEggNoodle
        31
    MrEggNoodle  
       2015-07-12 10:43:21 +08:00
    @iiduce 哈哈哈,从此走上了光明大道吗?
    MrEggNoodle
        32
    MrEggNoodle  
       2015-07-12 10:45:09 +08:00
    最近看到好些Django新人,好兴奋,虽然我也只是用了1年。
    下面是我收集的资料~希望对你有帮助啊~

    http://www.ziqiangxuetang.com/django/django-tutorial.html
    这是一个非常好关于Django的简明教程,国内的,希望对你有帮助。

    http://django-china.cn
    这是一个国内相对活跃的Django论坛。他的Q群很活跃。(155719011)

    http://www.cnblogs.com/fnng/p/3737964.html
    这是一个叫虫师的Blog,有几篇不错的Django入门教程,完整的小项目。

    http://study.163.com/course/introduction/320022.htm#/courseDetail
    这是网易云课堂的一个Django课程,免费的~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5492 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 07:45 · PVG 15:45 · LAX 23:45 · JFK 02:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.