javascript - 如何将变量从javascript传递到django View

Question

我正在尝试从下拉列表中获取用户的输入。我使用 javascript 获取动态大小的输入，然后使用 appendChild 将输入存储在变量中。现在我想将这个变量发送回 Django View ，在那里我可以对其执行一些操作。

我试过在 django 中使用 getlist 和 get 函数，但我无法弄清楚如何获取变量。

<form method = "POST" name = "myForm" onsubmit = "return validateForm()">{% csrf_token %}

    <p>Entry Condtion:</p>
    <div id ="entry-parameters"></div>
    <button type="button" onclick= "add_entry_parameter()" class="btn btn-primary m-t-15 waves-effect">Add a new Entry Condition</button> 
    <button type= "button" onclick= "remove_entry_parameter()" class= "btn btn-primary m-t-15 waves-effect">Remove Entry Condtion</button>
    <br>

    <p>Exit Condtion</p>
    <div id = "exit-parameters"></div>
    <button type="button" onclick= "add_exit_parameter()" class="btn btn-primary m-t-15 waves-effect">Add a new Exit Condition</button> 
    <button type= "button" onclick= "remove_exit_parameter()" class= "btn btn-primary m-t-15 waves-effect">Remove Exit Condtion</button>
    <br>
    <br>
    <br>    
    <input type="submit" value="submit"  >

</form>

<script>
    var list = ['open' , 'close' , 'high', 'low'];
    var addField = document.getElementById('addField');
    parameters= document.getElementById('entry-parameters');
    exit_parameters= document.getElementById('exit-parameters');

    parameters.setAttribute("name" , "parameters" );
    exit_parameters.setAttribute("name" , "exit_parameters");

    function remove_entry_parameter()
    {
        parameters.removeChild(parameters.lastElementChild);
    }
    function add_entry_parameter()
    {

            var _form = document.body.appendChild(document.createElement('form')),
            _input = _form.appendChild(document.createElement('input')),
            _condition = _form.appendChild(document.createElement('input')),
            _input2 = _form.appendChild(document.createElement('input')),
            _datalist = _form.appendChild(document.createElement('datalist'));
            _cond_list = _form.appendChild(document.createElement('datalist'));


            _input.placeholder = "First Parameter";
            _input.list = 'exampleList';
            _input.setAttribute('list','exampleList')
            _input.datalist_id = 'exampleList';

            _input2.placeholder = "Second Parameter";
            _input2.list = 'exampleList';
            _input2.setAttribute('list','exampleList')
            _input2.datalist_id = 'exampleList';

            _condition.placeholder = "Condition";
            _condition.list = 'conditionList';
            _condition.setAttribute('list','conditionList')
            _condition.datalist_id = 'conditionList';

            _datalist.id = 'exampleList';
            _cond_list.id = 'conditionList';

            var list = ['open' , 'close' , 'high' , 'low' , 'vol'];
            var cond_list = ['greater than', 'less than' , 'crossed above' , 'crossed below', 'equal to'];



            for (var i = 0; i < list.length ; i++) {
                var _option = _datalist.appendChild(document.createElement('option'));
                _option.text =list[i];   
            };
            for (var i = 0; i < cond_list.length ; i++) {
                var _option = _cond_list.appendChild(document.createElement('option'));
                _option.text = cond_list[i];   
            };

            parameters.appendChild(_form);
    }
// I've written a similar code for exit_parameters
</script>

def get_data(request):
    if request.method == 'POST':
        entry_data = request.POST.get('parameters')
        exit_data = request.POST.get('exit_parameters')
        print(entry_data)
        print(exit_data)

    return render(request, 'get_data.html' , {})

Answer 1

您的函数 add_entry_parameter 首先在页面上创建一个新表单。您几乎肯定希望页面上只有一个表单——无需创建新表单。

在下拉列表中所做的选择应该在 DOM(检查器)中可见，并具有唯一的字段名称(如您在上面的回复中所述，表单上的所有字段都具有相同的名称没有意义) -- 所有字段必须有一个唯一的名称。

一旦您验证了现有的、唯一命名的字段中的值在用户进行选择时已更新，它应该在 POST 中通过。