Django+bootstrap 實現頁面跳轉並傳遞參數

一、跳轉

 

據我試驗，django后台不會自動跳轉頁面，需要前端自動跳轉，它只做渲染

1、ajax請求成功后，replace頁面

$.ajax({
    url: "/ctest/env_add/",
    type: "post",
    data: {
        "env_id": env_id,
        "env_name": env_name,
    },
    success: function () {
        alert("保存成功");
        window.location.replace("/ctest/env/?flag=true");   //可以帶點參數
    },
    error: function () {
        alert("error!錯了錯了");
    }
});

2、直接href參數跳轉

<td>
    <a href="/ctest/env_update/?env_id={{env.env_id}}" class="layui-btn layui-btn-xs" lay-event="edit" onclick="edit_env(this)">編輯</a>
    <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" onclick="del_env(this)">刪除</a>
</td>

 

二、傳參

 

1、window.location.replace()傳參

window.location.replace("/ctest/env/?flag=true");

在區分跳轉前的頁面時可以這樣傳參

頁面獲取該參數較麻煩，下面是獲取傳參的方法，返回的是一個對象

function GetRequest() {
var url = location.search; //獲取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    strs = str.split("&");
    for(var i = 0; i < strs.length; i ++) {
        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
    }
}
return theRequest;
}

取值

function fill() {
    var flag = GetRequest();
    console.log(flag)
    if (flag.flag){
pass
    }
}

 

2、直接href傳參

<a href="/ctest/env_update/?env_id={{env.env_id}}" class="layui-btn layui-btn-xs" lay-event="edit" onclick="edit_env(this)">編輯</a>

這里相當於一個get請求，可以后台get方法取值，如下

def env_update(request):
    if request.method == 'GET':
        env_id = request.GET.get('env_id')
        env_list = Env.objects.get(env_id=env_id)
        print(env_list.username)
        return render(request,'ctest/env/update_new.html',{'env_list':env_list})

目測這里也可以按照replace的方法取值，參考第一點

 

3、storage存取值

storage有兩種，sessionStorage 和 localStorage,大致的區別是，sessionStorage 的緩存只存在會話中，關閉網頁就沒有了，localStorage會長久保存在瀏覽器的緩存中，除非手動清理瀏覽器緩存。

目前使用的沒有需要長期保存的，我都用的sessionStorage

存值

var storage = window.sessionStorage;
var if_pb = moa_pb;
var request_body_param = moa_req;
storage.setItem("if_pb",if_pb);
storage.setItem("request_body_param",request_body_param);

取值

function fill() {
    var flag = GetRequest();
    var storage = window.sessionStorage;
    var if_pb = storage.if_pb;
    var request_body_data = storage.request_body_param;
    console.log(flag)
    if (flag.flag){
        $("#if_pb").attr("value",if_pb);
        $("#request_body_data").val(request_body_data);
    }
}
window.onload=fill;    //初始化頁面會加載這個函數

 

4、view.py 函數中渲染頁面時返回參數

if request.method == 'GET':
    env_list = Env.objects.all()
    return render(request, 'ctest/env/index_new.html', {"env_list": env_list})

上面的env_list是數據庫返回的一個對象，返回后前端取值

<table class="table table-bordered">
    <thead>
    <tr>
        <th>ID</th>
        <th>測試環境</th>
        <th>環境ip</th>
        <th>默認執行賬號</th>
        <th>默認賬號密碼</th>
        <th>描述</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for env in env_list %}
    <tr>
        <td>{{ env.env_id }}</td>
        <td>{{ env.env_name }}</td>
        <td>{{ env.hostname }}</td>
         <td>{{ env.defaultUser }}</td>
        <td>{{ env.defaultPwd }}</td>
        <td>{{ env.description }}</td>
        <td>
            <a href="/ctest/env_update/?env_id={{env.env_id}}" class="layui-btn layui-btn-xs" lay-event="edit" onclick="edit_env(this)">編輯</a>

            <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" onclick="del_env(this)">刪除</a>
        </td>
    </tr>
    {% endfor %}
    </tbody>

 

5、ajax結果賦值

$.ajax({
            url: "/ctest/moa_moauditool/",
            type: "post",
            data: {
                "moa_pb": moa_pb,
                "moa_ip": moa_ip,
                "clienttype": clienttype,
            },

            success: function (data) {
                // alert("請求成功");
                $("#moa_req").val(data.req);
                $('#moa_rsp').val(data.rsp);

            },
            error: function () {
                alert("error!失敗咯失敗咯");
            }
        });

view.py

data = json.dumps(data)
return HttpResponse(data,content_type='application/json')