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