如何将 javascript 函数的值传递给 Django 视图？

Posted 2023-02-24

【中文标题】如何将 javascript 函数的值传递给 Django 视图？

【英文标题】：How pass javascript function 's value to Django view?

【发布时间】：2015-01-21 22:16:55

【问题描述】：

在模板中我有一些这样的代码：

<div id="form">
        <form name="myForm"  action="Http://localhost:8000/student/student_add_course/" onclick="return addTable();" method="post">
        % csrf_token %
         form.non_field_errors 
                <div id="form-data">
                 form.course_id  form.course_id.errors 
                <label for="id_course_id">:Course Id number:</label><br>

                 form.score  form.score.errors 
                <label for="id_score">Course score:</label><br>
               <p><input type="button" value="add" /></p>
                <p><input type="submit" value="submit" /></p>
                </div>
        </form>
    </div>

    <div id="table">
    <table id="TABLE" border = '1'>
    <tr>
        <th>id number</th>
        <th>score</th>
    </tr>
    <tr>
        <td id="id_number"></td>
        <td id="score"></td>
    </tr>

这是“脚本”部分：

<script type="text/javascript">
    var stock = new Array();
    var i = 0;

    function addTable() 

        var id = document.forms["myForm"]["course_id"].value;
        var score = document.forms["myForm"]["score"].value;

        stock[i] = new Array(id, score);

        //Get the table that shows the selected course from html code
        var table = document.getElementById('TABLE');

        //Add id and score to row of the table which is inside the html code.
        if (document.getElementById("id_number").innerHTML=="" || document.getElementById("score").innerHTML=="")
            document.getElementById("id_number").innerHTML=id;
            document.getElementById("score").innerHTML=score;

        //Create table row and append it to end of above table
        elsevar tr = document.createElement('TR');
            for (j = 0; j < 2; j++) 
                var td = document.createElement('TD')
                td.appendChild(document.createTextNode(stock[i][j]));
                tr.appendChild(td)
                
            table.appendChild(tr);
            

        i=i+1;
        return stock;
    

</script>

我想为选定的学生添加一些新课程，为此，我创建了获取课程 ID 号和课程分数的表单。首先，当我填写表单时，当我点击“添加”按钮时，javascript 创建表，我可以添加许多课程，然后当我应该提交它以在视图部分执行其他步骤并将所有课程保存在数据库中时。 我有一些问题，如果有人帮助我，我会很高兴。

1)如何将“stock”数组（javaScript 中的全局数组，包括创建表中的所有课程）发送到 Django 视图？

2)按“添加”按钮后如何清理表单？

我很抱歉我的英语不好。

【问题讨论】：

试试 w3schools.com/ajax/ajax_xmlhttprequest_send.asp 或 jqery ajax api.jquery.com/jquery.ajax

使用 AJAX！更多信息在这里：***.com/questions/20306981/…

【参考方案1】：

您好，发回数据的诀窍是将 POST 请求发回服务器。

我将以 JQuery 为例来做这件事（因为它更快更容易）

$.ajax(
    // points to the url where your data will be posted
    url:'/postendpoint/$',
    // post for security reason
    type: "POST",
    // data that you will like to return 
    data: stock : stock,
    // what to do when the call is success 
    success:function(response),
    // what to do when the call is complete ( you can right your clean from code here)
    complete:function(),
    // what to do when there is an error
    error:function (xhr, textStatus, thrownError)
);

然后您将不得不调整应用的 urls.py 以匹配您的 postendpoint 并将其指向正确的视图

##urls.py
urlpatterns = [
    url(r'^postendpoint/$', views.YourViewsHere),
    ....
] 

最后，在您的视图中，您可以像这样访问帖子数据

##views.py
def YourViewsHere(request):
   if request.method == 'GET':
       do_something()
   elif request.method == 'POST':
       ## access you data by playing around with the request.POST object
       request.POST.get('data')

你可以请求是一个 python 对象，你可以查看许多属性和方法。

更多信息请看

1) Django 请求-响应https://docs.djangoproject.com/en/1.7/ref/request-response/ 2) Django Ajax 示例：How do I integrate Ajax with Django applications?

请注意，您将不得不使用我给您的代码。我认为这将是从中学习的最佳方式。

希望对你有用

【讨论】：

非常感谢您的回答，我认为这很有帮助，但我不知道 JQuery，一开始我想我必须学习它:) 谢谢。

您能接受我的答案作为正确答案吗？干杯 =)

您可以选择不使用 JQuery 并使用 vanilla javascript 进行 post call，但概念是相同的。请记住在 javascript 中将数据添加到您的请求中，并通过访问请求对象从 django 中访问您的数据