Django學習之-后端數據展示在前端


先看前端代碼

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        td,th {
            text-align: center;
            border:1px solid black;
            }
        table {
            margin-left:100px;
            margin-top:50px;
            border:1px solid black;
            border-collapse:collapse;
            }
        .align_center{
            text-align: center;
            }
    </style>
    <title>推置引擎測試界面</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
   <table width="800" >
      <caption>
        <h1>推置引擎測試界面</h1>
      </caption>
       <tr>
        <td>異常id</td>
        <td><input type="text" id="exception_id" class="text"></td>
        <td>方案id</td>
        <td><input type="text" id="plan_id" class="text"></td>
      </tr>
       <tr>
        <td colspan="4"></td>
       </tr>
       <tr>
        <td colspan="2">規則</td>
        <td>操作</td>
        <td>測試結果</td>
       </tr>
       <tr>
        <td colspan="2">testcase1:測試用例1說明</td>
        <td><input type="button" name="button1" value="測試" onclick="calculate_test1()"/></td>
        <td><span id="result1" class="align_center"></span></td>
       </tr>       
   </table>
    <script>
      function calculate_test1() {
         var exception_id = $("#exception_id").val()
         var plan_id = $("#plan_id").val()
         $.ajax({
            url: '/calculate_test1pro/',
            data: {'exception_id':exception_id,'plan_id':plan_id},
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                console.log(data)
                document.getElementById("result1").innerText = data.result
                }
            })
            }
    </script>
</body>
</html>

后端代碼

from django.shortcuts import HttpResponse
from django.http import JsonResponse

# Create your views here.
def test1pro(request):
    result = "PASS"
    response = JsonResponse({"status": '服務器接收成功', 'result': result})
    return response

說明:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM