Django工程页面带参数跳转和 $.post $.get

柔情只为你懂 2022-05-14 13:58 144阅读 0赞

# Django工程页面带参数跳转 和 $.post $.get #

### 1.Django工程页面带参数跳转 ###

html:
    {% for question_item in question_items %}
                    <div class="subject_num">
                        <h3>第{
       { question_item.num }}题</h3>
                    </div>
                    <div class="">
                        <div class="main_list_title">
                            <span>*</span> 陪练场景问题:</div>
                        <textarea rows="3" id="question_{
       { question_item.num }}" placeholder="正在加载..." disabled>{
       { question_item.question }}</textarea>
                    </div>
                    <div class="">
                        <div class="main_list_title">
                            <span>*</span> 用户答案:</div>
                        <textarea rows="2" class="user_answer" id="user_answer_{
       { question_item.num }}" placeholder="请在此处输入您的答案..."></textarea>
                    </div>
                {% endfor %}

views.py:
    @csrf_exempt
    def train_exam(request):
        try:
            request_data = request.GET['level']
        except Exception as e:
            print(Exception, ':', e)
            return HttpResponse("抱歉，数据格式错误")
        # 建立数据库链接
        connect = pymysql.connect(host="", user="root", password="", db="",
                             port=3306,charset='utf8')
        cur = connect.cursor()
        sql_select = "select * from ytkj_preprocess_intellitrainExam where level=" + request_data
        # 返回查询成功个数
        num = cur.execute(sql_select)
        # 获取查询成功返回的数据
        results = cur.fetchall()
        print(len(results))
        print(results)
        connect.close()
    
        # 将查询数据库返回的数据集合封装为键值对，并返回前台页面
        list_items = []
        for row in results:
            item =  {}
            item['num'] = row[0]
            item['level'] = row[1]
            item['question'] = row[2]
            item['stdAnswer'] = row[3]
            item['keySentence'] = row[4]
            item['keyWord'] = row[5]
            list_items.append(item)
    
        # 根据查询结果返回数据
        if num != 5:
            return HttpResponse("数据库查询出错，请检查服务器")
        else:
            #return HttpResponse(results)
            return render(request, 'train_exam.html', {'question_items': list_items})

### 2.$.post $.get ###

跳转前html的jquery：
    $("#btn_start_exam").click(function () {
                sub_val_level=$(".sub_val").text()
                
                if (sub_val_level < 1 || sub_val_level > 10) {
                    $(".warning_info").text("温馨提示：请选择一个关卡再开始测试！")
                    //alert("请选择一个关卡再开始测试！")
                } else {
                    //清除warning_info信息
                    $(".warning_info").text("")
    
                    //根据当前选择关卡请求115数据库，并返回数据
                    level = $(".sub_val").text()
                    parms = {
                        "level": level
                    };
                    str_parms = JSON.stringify(parms);
                    $.post(
                        "/searchExam",  //url
                        {
                          'level': str_parms    //params
                        },
                        function(res) {         //result
                            try {
                                //alert(res)
                               resp = JSON.parse(res)
                                return
                            } catch(err) {
                                $(".warning_info").text("服务异常，请耐心等待修复")
                                return
                            }
                            //alert(resp)
                            //show_grade(resp.resp.scoreCorrect, resp.resp.scoreComplete, resp.resp.scoreCoherence, resp.resp.scoreLogic, resp.resp.scoreTotal, resp.resp.scoreHitRate, resp.info);
                            // return
                        }
                    );
                    
                    document.cookie = "第"+sub_val_level+"关"
                    window.location.href = "/train_exam?level="+level
                }
            })

### 3.jQuery中json中关于带有html代码网页的处理 ###

list_items = []
                    $(".subject_num").each(function () {
                        //获取当前题号
                        num = $(this).children('h3').children('span').text()
                        //根据题号获取该题所有信息
                        var list_item = eval("("+$("#main_list_all_" + num).text()+")")
                        //根据题号获取该题用户输入结果
                        user_input = $("#user_answer_" + num).val()
                        alert(user_input)
                        //将userAnswer添加至list_item
                        list_item.userAnswer=user_input
                        console.log(list_item)
                        //alert(list_item)
                    })

**使用eval函数来解析**  
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。  
参考链接：[https://www.cnblogs.com/fogwang/p/3213668.html][https_www.cnblogs.com_fogwang_p_3213668.html]

### 4.jquery往json中添加键值对 ###

参考链接：  
[https://blog.csdn.net/ainuser/article/details/80755996][https_blog.csdn.net_ainuser_article_details_80755996]  
[http://www.cnblogs.com/ymj0906/p/9264729.html][http_www.cnblogs.com_ymj0906_p_9264729.html]

### 5.django模板中for标签，计数器 ###

{% for resp_result in resp_results %}
                    <div class="train_result_{
       { forloop.counter }}">
                        <h3>第{
       { forloop.counter }}题得分：</h3>
                        <div>
                            <i class="fa fa-check pr-10"></i>
                            <span>总得分:</span>
                            <span class="score_0">70</span>
                            <span>分</span>
                        </div>
                        <div>
                            <i class="fa fa-check pr-10"></i>
                            <span>正确性:</span>
                            <span class="score_1">90</span>
                            <span>分</span>
                        </div>
                        <div>
                            <i class="fa fa-check pr-10"></i>
                            <span>完整性:</span>
                            <span class="score_2">80</span>
                            <span>分</span>
                        </div>
                        <div>
                            <i class="fa fa-check pr-10"></i>
                            <span>连贯性:</span>
                            <span class="score_3">95</span>
                            <span>分</span>
                        </div>
                        <div>
                            <i class="fa fa-check pr-10"></i>
                            <span>逻辑性:</span>
                            <span class="score_4">60</span>
                            <span>分</span>
                        </div>
                        <div>
                            <i class="fa fa-check pr-10"></i>
                            <span>关键词命中率得分:</span>
                            <span class="score_keyword">50</span>
                            <span>分</span>
                        </div>
                        <div>
                            <span class="error_info" style="color:#ff0000"></span>
                        </div>
                    </div>
                    {
       { resp_result }}
                    <hr/>
                    <hr/>
                    <hr/>
                {% endfor %}

{% for aanswer in autoanswer %}
        {
       { forloop.counter }}
    {% endfor %}

参考连接：[https://blog.csdn.net/hadooppythondjango/article/details/8827416][https_blog.csdn.net_hadooppythondjango_article_details_8827416]

### 6.Django工程views.py向html传值 ###

[views.py][]:

if flag == 0:
            # 向该页面传入两个参数：resp_results为响应结果集，present_level为当前关卡值
            return render(request, 'train_result.html', {'resp_results': resp_results, 'present_level': request_data_jsons[0]['level']})
        else:
            return HttpResponse("抱歉，服务暂停！")

jquery

//当前关卡提示
            $('#exam_title').html("第" + {
       { present_level }} + "关评测结果")

### 7.Django工程form表单提交与后台获取 ###

//将封装好的json数据放入hidden的input的value，用于views.py根据name获取。(封装后后台一次获取，避免重复根据name获取)
                    $("#hid_json_sub").val(list_items_json)
                    //设置form的action和method，并提交
                    newUrl = '/train_result'
                    $("#train_exam_form").attr('action',newUrl)
                    $("#train_exam_form").attr('method','get')
                    $("#train_exam_form").submit()
    
                    //用问号带参数json字符串太长，效果不好。优化为：form表单get提交时将json数据传递
                    //window.location.href = "/train_result?list_items=" + list_items_json

# 通过问号带参数的获取方法：json.loads(request.GET['list_items'])
    # 通过form表单提交根据name获取value的方法：json.loads(request.GET.get('list_items'))
    # 解析json字符串
    request_data_jsons = json.loads(request.GET.get('list_items'))

[https_www.cnblogs.com_fogwang_p_3213668.html]: https://www.cnblogs.com/fogwang/p/3213668.html
[https_blog.csdn.net_ainuser_article_details_80755996]: https://blog.csdn.net/ainuser/article/details/80755996
[http_www.cnblogs.com_ymj0906_p_9264729.html]: http://www.cnblogs.com/ymj0906/p/9264729.html
[https_blog.csdn.net_hadooppythondjango_article_details_8827416]: https://blog.csdn.net/hadooppythondjango/article/details/8827416
[views.py]: http://views.py