韦德国际bv1946_www.bv1946com_韦德国际1946手机版
做最好的网站

首先要引入jquery文件

日期:2019-07-04编辑作者:韦德国际bv1946计算机

首先要引入jquery文件,可以引入在线的,也可以下载离线的 添加进自己staticfiles

这里演示的是添加离线的

<script src={% static 'jquery/jquery.min.js' %}></script>

注意这句是要添加到自己写的jquery脚本前边

然后写一个简单的表单

<form method="post" id="formadd">
        {% csrf_token %}
        <label for="id_name">用户名</label>
        <input type="text" id="id_name"/>
        <label for = "id_password">密码</label>
        <input type="password" id="id_password"/>
        <button type="submit" id="submit" >提交</button>
    </form>

只有一个用户名和密码以及一个提交按钮的的简单表单 注意我这里的form的id是formadd  看起来非常简陋~

图片 1

然后再添加我们的表单处理的jquery

如果你在settings里边没有注释掉

'django.middleware.csrf.CsrfViewMiddleware',

你的jquery里边需要添加上这句,详情参照自强学堂django ajax csrf

$.ajaxSetup({
                 data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
            });

然后整个jquery脚本,这里写的比较就简单主要突出与django的通信

<script src={% static 'jquery/jquery.min.js' %}></script>
    <script>
        $(document).ready(function(){
            $.ajaxSetup({
                 data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
            });
        $('#formadd').submit(function(){
                var name = $("#id_name").val();                 //获得form中用户输入的name 注意这里的id_name 与你html中的id一致
                var password = $("#id_password").val();    //同上

                $.ajax({
                    type:"POST",
                    data: {name:name, password:password},
                    url: "{% url 'blog:comments_upload' %}", //后台处理函数的url 这里用的是static url 需要与urls.py中的name一致
                    cache: false,
                    dataType: "html",
                    success: function(result, statues, xml){
                        alert(result);                                         //成功时弹出view传回来的结果
                    },
                    error: function(){
                        alert("false");
                    }
                });
                return false;
            });

        });
    </script>

接下来写我们后端的view.py 中的后端处理函数

def comments_upload(request):
    if request.method == 'POST':
        print "it's a test"                            #用于测试
        print request.POST['name']           #测试是否能够接收到前端发来的name字段
        print request.POST['password']     #用途同上

        return HttpResponse("表单测试成功")     #最后返会给前端的数据,如果能在前端弹出框中显示我们就成功了
    else:
        return HttpResponse("<h1>test</h1>")

由于有中文所以views.py 开头加上

#coding=utf8

最后urls.py中加一条,(注意这是我的app中的urls.py)

url(r'^comments_upload/$', comments_upload, name='comments_upload'),

然后fire your server

测试

Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
it's a test
test
testpassword

后端console成功打印出我们的name和password字段

其实我们在这个views.py 中可以做许多事情,比如把这个name和password字段进行验证了,或者存入数据库,然后返回一段真正的html代码,局部替换前端的页面,达到异步传输的效果

图片 2

版权声明:本文为博主原创文章,未经博主允许不得转载。


本文由韦德国际bv1946手机版发布于韦德国际bv1946计算机,转载请注明出处:首先要引入jquery文件

关键词:

JQuery.lazyload 图片延迟加载

1.引入  jquery.lazyload.js 延时加载的方式  script type="text/javascript"  $(function() {  $("img").lazyload({  effect : "fadeIn"  })...

详细>>