django 用jquery ajax提交form 實現刷新部分頁面

首先要引入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  看起來非常簡陋～

然後再添加我們的表單處理的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代碼，局部替換前端的頁面，達到異步傳輸的效果