16)django-ajax使用

通过ajax可以悄悄的把数据传输给服务器，实现页面无刷新。

一：ajax使用语法

　　1）普通方式

    ajax使用语法：
    $.ajax({
        url:"/host", //提交到那里
        type:"POST", //提交类型
        data:{"k1":"v1","k2":"v2"} //提交的数据
        success:function(data1){ //success不会直接运行，当服务器有数据传输过来才会触发执行。
　　　　　　　　　　　　　　　　　　　　匿名函数必须要有一个参数，用来接受数据，data1用来接受是服务器端返回字符串数据
        alter(data1);
    }
    })

　　示例：

#ajax使用例子1
    urls.py
        url(r'^test_ajax$', views.ajax_submit),

    views.py
        def ajax_submit(request):
        if request.method=="POST":
            print(request.POST.get("k1"),request.POST.get("k2"))
            return HttpResponse("home")

    模板：
         <a id="ajax_submit">悄悄的提交</a>

    script:
    $("#ajax_submit").click(function() {
        $.ajax({
            url: "/test_ajax",
            type: "POST",
            data: {"k1": "v1", "k2": "v2"},
            success: function (data1) {
                alert(data1);
            }
        })
    })

 

　　2）通过页面传递数据　

        $.ajax({
            url: "/test_ajax",
            type: "POST",
            data: {"hostname":$("#hostname").val(),"ip":$("#ip").val(),"port":$("#port").val(),"group_id":$("#group_id").val()},
            success: function (data1) {
                alert(data1);
            }
        })

data: {"hostname":$("#hostname").val(),"ip":$("#ip").val(),"port":$("#port").val(),"group_id":$("#group_id").val()},
可以通过如下方式代替：
data: $('#add_form').serialize(),把放有form表单数据都打包到后台，不需要自己一个个写字典数据
　

 $.ajax({
            url: "/test_ajax",
            type: "POST",
            data:$("#add_form").serialize(),
            success: function (data1) {
                alert(data1);
            }
        })

　

#ajax使用例子2 传递页面数据给后台
     <form action="/host" method="post">
        <div class="group">
            <input type="text" name="hostname" id="hostname" placeholder="请输入主机名">
        </div>
        <div class="group">
            <input type="text" name="ip" id="ip" placeholder="请输入主机IP">
        </div>
        <div class="group">
            <input type="text" name="port" id="port" placeholder="请输入主机端口">
        </div>
        <div class="group">
            <select name="group_id" id="group_id">
                {% for group in v4 %}
                    <option value="{{ group.id }}">{{ group.caption }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="group">
            <input type="submit" value="提交">
            <input type="button" value="取消">
            <a id="ajax_submit" style="cursor: pointer">悄悄的提交</a>
        </div>
    </form>


        $("#ajax_submit").click(function() {
        $.ajax({
            url: "/test_ajax",
            type: "POST",
            data: {"hostname":$("#hostname").val(),"ip":$("#ip").val(),"port":$("#port").val(),"group_id":$("#group_id").val()},
            success: function (data1) {
                alert(data1);
            }
        })
    })
    
    def ajax_submit(request):
    if request.method=="POST":
        print(request.POST)
        return HttpResponse("home")

    输出结果：<QueryDict: {'hostname': ['22'], 'ip': ['11'], 'group_id': ['1']}>

View Code