zoukankan      html  css  js  c++  java
  • python Ajax的使用

    转自:http://www.cnblogs.com/python-study/p/6060530.html

    1.使用Ajax在后台传递参数的示例

      要使用Ajax传递参数,需要使用jquery,使用jquery需要注意以下几点。

      1.建立static的目录,将jquery导入

      

      2.在项目s13day18_django的settings配置中,指定jquery的目录,同时注释掉CSRF

    STATIC_URL = '/static/'
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR,'static'),
    )

    # 'django.middleware.csrf.CsrfViewMiddleware',

      3.在app01下面,指定路由关系

    复制代码
    urlpatterns = [
        # url(r'^index/(d+)/', views.index),
        # url(r'^detail/(d+)/',views.detail),
        # url(r'^template/',views.template),
        url(r'^extend/',views.extend),
        url(r'^assets/',views.assets),
        url(r'^userinfo/',views.userinfo),
        url(r'^ajax_demo/',views.ajax_demo),
    ]
    复制代码

      4.在app01下面,定义ajax_demo函数

    复制代码
    def ajax_demo(request):
        if request.method == 'POST':
            user = request.POST.get('user')
            pwd = request.POST.get('pwd')
            print(user,pwd)
            if user == '111' and pwd == '222':
                return HttpResponse('1')
            else:
                return HttpResponse('2')
        return render(request,'ajax_demo.html')
    复制代码

      5.在templates中,添加关于ajax_demo的HTML信息

    复制代码
    <body>
        <div>
            <p>用户名: <input type="text" id="username" /></p>
        </div>
        <div>
            <p>密码: <input type="password" id="pwd" /></p>
        </div>
        <input type="button" value="提交" onclick="SubmitForm();"/>
    
        <script src="/static/jquery-1.12.4.js"></script>
        <script>
            function SubmitForm(){
                $.ajax({
                    url:'/web/ajax_demo/',
                    type:'POST',
                    data:{'user':$('#username').val(),'pwd':$('#pwd').val()},
                    success:function(data){
                        if(data == '1'){
                            location.href="http://www.baidu.com";
                        }
                        else{
                            alert("用户名或密码错误")
                        }
                    }
                })
            }
        </script>
    </body>
    复制代码

      整个执行的过程是,ajax传递参数给了函数ajax_demo,函数获取到用户键入的值,然后通过HttpResponse返回给回调函数success,回调函数再执行相应的操作。

     ====================================================================================================  但是在实际的使用中,我们要这么定义views.py

    复制代码
    import json
    def ajax_demo(request):
        if request.method == 'POST':
            ret = {'status':False,'message':''}
            user = request.POST.get('user')
            pwd = request.POST.get('pwd')
            print(user,pwd)
            if user == '111' and pwd == '222':
                ret['status'] = True
                return HttpResponse(json.dumps(ret))
            else:
                ret['message'] = '用户名或密码错误'
                return HttpResponse(json.dumps(ret))
        return render(request,'ajax_demo.html')
    复制代码

      ajax_demo.html

    复制代码
    <body>
        <div>
            <p>用户名: <input type="text" id="username" /></p>
        </div>
        <div>
            <p>密码: <input type="password" id="pwd" /></p>
        </div>
        <input type="button" value="提交" onclick="SubmitForm();"/>
    
        <script src="/static/jquery-1.12.4.js"></script>
        <script>
            function SubmitForm(){
                $.ajax({
                    url:'/web/ajax_demo/',
                    type:'POST',
                    data:{'user':$('#username').val(),'pwd':$('#pwd').val()},
                    dataType:'json',
                    success:function(data){
                        if(data.status){
                            location.href="http://www.baidu.com";
                        }
                        else{
                            alert(data.message)
                        }
                    }
                })
            }
        </script>
    </body>
    复制代码

      如果不用ajax自带的dataType类型,也可以自己将json的格式转化为字典格式:

    复制代码
        <script src="/static/jquery-1.12.4.js"></script>
        <script>
            function SubmitForm(){
                $.ajax({
                    url:'/web/ajax_demo/',
                    type:'POST',
                    data:{'user':$('#username').val(),'pwd':$('#pwd').val()},
    {#                dataType:'json',#}
                    success:function(data){
                        var data_dic = JSON.parse(data);
                        if(data_dic['status']){
                            location.href="http://www.baidu.com";
                        }
                        else{
                            alert(data_dic['message'])
                        }
                    }
                })
            }
        </script>
    复制代码

      JQuery中的ajax也是调用了浏览器中的XMLHttpRequest对象来执行的。

      http://www.cnblogs.com/wupeiqi/articles/5703697.html

  • 相关阅读:
    Samba
    百度贴吧
    baidu.com关键字查询
    vim 删除每行开头结尾空格
    read line(逐行读取)
    pycharm 激活
    rsync 启动脚本
    收藏
    elk
    sql is null
  • 原文地址:https://www.cnblogs.com/iexperience/p/10002374.html
Copyright © 2011-2022 走看看