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

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

4.jquery往json中添加键值对

参考链接：
https://blog.csdn.net/ainuser/article/details/80755996
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

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表单提交与后台获取

 <form id="train_exam_form" action="" method="">
        <input name="list_items" id="hid_json_sub" type="hidden" value="">
 </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'))