zoukankan      html  css  js  c++  java
  • ajax基本操作

    基本操作:

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

    STATIC_URL = '/static/'
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR,'static'),
    )
    
    # 'django.middleware.csrf.CsrfViewMiddleware',

    2在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),
    ]

    3在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')

    4 在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>
  • 相关阅读:
    C#递归方法把数据表加载到treeview控件(C/S和B/S) 子曰
    ASP.NET 2.0 Web Part编程入门(转) 子曰
    C#中委托的运用 子曰
    window.returnValue使用方法(转) 子曰
    Treevi中的checkbox联动选择,以及Treeview的生成(即选择或取消复选框,其自选框同时选择或取消) 子曰
    发布MicrosoftReportViewer时的问题 子曰
    WCF,Net Remoting,Web service概念和区别 子曰
    使用sql字符串查询关键字CHARINDEX 子曰
    Mysql安装时出现APPLY security settings错误 子曰
    设计模式——单例模式(Singleton)
  • 原文地址:https://www.cnblogs.com/systemsystem/p/10918372.html
Copyright © 2011-2022 走看看