django中前端HTMl 怎么传递数组给后台（js,ajax）

今天讲一下在项目中的使用js，ajax 怎么传递数组到后台：

前端界面的效果：（业务是进行自然语言的NER）

传递两个数组：

一个中文字符组成的数组一；另一个是标记中文字符(这里是一个下拉option)的数组二;

function post_annotation_data(data) {
     var array1 = new Array();
     var array2 = new Array();
    $(".data_per").map(function(){  #map 方法 注意这里用class 标签 处理  不能用id 标签
        array2.push($(this).text());
    });

    $(".biaoshi  option:selected").map(function(){  #option获取选中的文本内容 
        array1.push($(this).text());  #类似于python 中list 的append()
    });
    var datas=JSON.stringify(array2); #数组一
    var tags=JSON.stringify(array1);#数组二
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{% url 'pre_process_data' %}",
            data: {'datas': datas ,"tags":tags},
            success: function (result) {
              alert('成功');
            },
            error: function () {
                alert('错误');
            }
        });
    }

全部代码：

 <div style="text-align: center;margin-left: 35px;margin-top: 30px">
      <table width="50%" >
      {% for i in data %}  #这里的data 为我后台处理的页面分页的数据
            <tr>
            {% for ii in i %} ##ii 为一句话中的每个中文字
                <th style="background-color:#c2d1d4;width: 60%" class="data_per"> {{ ii }}</th>
                {% endfor %}
             <th style="background-color:#c2d1d4;width: 60%;visibility:hidden" class="data_per">OO</th>
            </tr>
             <tr style="margin-bottom: 3px">
                {% for ii in i %}
                <th style="background-color:#c2d1d4;width: 40%" class="data_tag">  <span>
                    <select class="biaoshi" name="biaoshi" size="1" >
                   <option value="1">B-ORG</option>
                   <option value="2">I-ORG</option>
                    <option value="3">B-V</option>
                   <option value="4">I-V</option>
                   <option value="5">B-PER</option>
                   <option value="6">I-PER</option>
                   <option value="7" selected = "selected">O</option>

                </span></th>
                    {% endfor %}
 <th style="background-color:#c2d1d4;width: 40%;visibility:hidden" class="data_tag">  <span>
                    <select class="biaoshi" name="biaoshi" size="1" >
                   <option value="1">B-ORG</option>
                   <option value="2">I-ORG</option>
                    <option value="3">B-V</option>
                   <option value="4">I-V</option>
                   <option value="5">B-PER</option>
                   <option value="6">I-PER</option>
                   <option value="7" selected = "selected">O</option>

                </span></th>
             </tr>
        {% endfor %}
        <div style="text-align: center">
        {% if data.has_previous %}
            <a href='?page={{ data.previous_page_number }}'>&lt;&lt;</a>
        {% endif %}
        {% for page in data.paginator.page_range_ext %}
            {% ifequal page data.number %}
                <a>{{ page }}</a>
            {% else %}
                <a href='?page={{ page }}'>{{ page }}</a>
            {% endifequal %}
        {% endfor %}
        {% if data.has_next %}
            <a href='?page={{ data.next_page_number }}'>&gt;&gt;</a>
        {% endif %}
    </div>

    </table>
     </div>
    <script>

function post_annotation_data(data) {
     var array1 = new Array();
     var array2 = new Array();
    $(".data_per").map(function(){
        array2.push($(this).text());
    });

    $(".biaoshi  option:selected").map(function(){
        array1.push($(this).text());
    });
    var datas=JSON.stringify(array2);
    var tags=JSON.stringify(array1);
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{% url 'pre_process_data' %}",
            data: {'datas': datas ,"tags":tags},
            success: function (result) {
              alert('成功');
            },
            error: function () {
                alert('错误');
            }
        });
    }


    </script>

django中前端HTMl 怎么传递数组给后台（js,ajax）

相关推荐