javascript - 如何在ajax中从具有相同类或ID的许多元素中推送多值

Question

我创建了一个表单，该用户可以将需要的附加列附加到该表单，例如我在表单中有列名，如果人们想添加更多列名，他们只需按下添加按钮，然后选择元素列名，它将被添加，因此它将有 2 个具有相同类的选择元素，但问题是，我不知道如何使用 ajax 发送数据，所以 django 视图可以获取数据。每次我尝试打印结果，它将打印为 [] 表示：推送数据失败

这是代码html

<div class="row mt">
          <div class="col-lg-12">
            <div class="form-panel">
              <form class="form-horizontal  style-form" action="#">
                <div class="form-group">
                  <label class="control-label col-md-3">Database Name</label>
                  <div class="col-md-4">
                    <div class="input-group bootstrap-timepicker">
                      <div class="btn-group">
                            <select id = "tableselect"  style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">              
                            <!-- <li><a href="#"></a></li> -->
                            {% for table in obj2 %}
                                    <option value = "{{table}}" >{{ table }}</option>
                            {% endfor %}                          
                            <!-- <li><a href="#">Dropdown link</a></li> -->
                            </option>
                            </select>                    
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-md-3">Table Name</label>
                  <div class="col-md-4">
                    <div class="input-group bootstrap-timepicker">
                       <div class="btn-group">
                            <select id="dataselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">            
                            </select>                    
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <button class="btn btn-theme" onclick="return appendBox()">Add</button>
                  <label class="control-label col-md-3">Column Name</label> 
                  <div class="col-md-4" id ="test">

                       <div class="btn-group">
                            <select class = "columnselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">              
                            </select>                
                      </div>

                  </div>
                </div>
                <div class="form-group">
                  <button class="btn btn-theme" onclick=" return appendFilterBox()">Add</button>
                  <label class="control-label col-md-3">Filter</label>
                  <div class="col-md-4" id="filtbox">
                    <div class="input-group bootstrap-timepicker">
                       <div class="btn-group">                          
                            <select class="conditionselect" style="width:150px;background-color:white;height:30px;font-size:15px;text-align-last:center;">                                          
                            </select>    
                            <select class="operator" style="width:120px;background-color:white;height:30px;font-size:15px;text-align-last:center;">              
                                <option> > </option>
                                <option> < </option>
                                <option> ≥ </option>
                                <option> ≤ </option>
                                <option> = </option>
                            </select>  
                            <input class="parameter" type="text" style="width:150px;background-color:white;height:30px;font-size:15px;text-align-last:center;">                                          
                            </input>                                                                 
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">                                                    
                  <div class="col-md-4" id="showquery">
                    <div class="input-group bootstrap-timepicker">
                       <div class="btn-group">             
                        <button id="result" class="btn btn-theme" type="submit" style="height:30px;width:100px;" onclick="return showQuery()">Show</button>

                        <button id="export" class="btn btn-theme" type="Export" style="height:30px;width:100px;" onclick="return ExportFile()">Export</button>
                       </div>
                     </div>
                   </div>
                 </div>

                 <div id="query_result">                              
                 </div>

              </form>

附加框的脚本

<script>
      function appendBox()
      {
          $('#test').append('<select class = "columnselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;"></select>')
            return false
      }
  </script>

  <script>
      function appendFilterBox()
      {
            $('#filtbox').append('<select class="columnselect" style="width:125px;background-color:white;height:30px;font-size:15px;text-align-last:center;margin-top:5px;margin-right:2px"></select><select class="operator" style="width:125px;background-color:white;height:3 0px;font-size:15px;text-align-last:center;margin-top:5px;margin-right:3px"><option> > </option><option> < </option><option> ≥ </option><option> ≤ </option><option> = </option></select><input type="text" class="parameter" style="width:150px;background-color:white;height:30px;font-size:15px;"></input>')
              return false
      }
  </script>

Ajax 发送数据

<script>
      $(document).ready(function() {
      $("#result").click(function () {
        var urls = "{% url 'polls:load-query' %}";
        var table = $('#dataselect').val();

      data = {
        'name' : [],
        'table': table,
        'condition': []
      };

        $('#column-name .columnselect').each((idx, el) => data.name.push($(el).val()));
        $('#filtbox .input-group').each((idx, el) => {
          condition = {
            'column' : $(el).find('.conditionselect').val(),
            'operator' : $(el).find('.operator').val(),
            'value' : $(el).find('.parameter').val()
          };
          data.condition.push(condition);
        });

        $.ajax({                     
          url: urls,                    
          data: data,
          success: function(data) {   
              $("#query_result").html(data);  
          },
          error: function(data)
          {
            alert("error occured");
          }
        });
      });
      });
  </script> 

这是用ajax发送多值的正确方法吗？当django想要获取数据时，数据似乎没有正确发送..

如果你们好奇的话，这里的观点

def list_all_data(request):
    import cx_Oracle
    dsn_tns = cx_Oracle.makedsn('', '', sid='') #ip port and user and password i hide it for privacy 
    conn = cx_Oracle.connect(user=r'', password='', dsn=dsn_tns) 
    c = conn.cursor()
    print(request.GET.getlist('condition'))
    data_name = request.GET.get('name',1)
    table_name = request.GET.get('table',1)
    column = request.GET.get('condition', {}).get('column', 1)
    print(column)
    operator = request.GET.get('condition', {}).get('operator', 1)
    print(operator)
    value = request.GET.get('condition', {}).get('value', 1)
    print(value)

    c.execute("select "+data_name+" from "+table_name+" where "+column + operator+"'"+value+"'")

    c.rowfactory = makeDictFactory(c)
    columnalldata = []
    columnallname = []

    for rowDict in c:
        columnalldata.append(rowDict[data_name])
        columnallname.append(data_name)

    context = {
        'obj4' : columnalldata,
        'column_name' : columnallname
    }
    return render(request,'query_result.html',context) 

标签： javascriptpythonjquerydjangoajax