Bootstrap標記輸入發送帶空格的POST

Question

我正在使用JQuery和Bootstrap在Django中未開發的系統中工作。

我有這個標籤，輸入：

<div id="roles" class="tab-pane"><!-- ROLES --> 

      <input id="roles_tag" type="text" value="{{ roles }}" data-role="tagsinput" placeholder="Add role" /> 

與此javascript：

$("#roles_tag").change(function(){ 
       roles = ($(this).tagsinput('items')); 
       $.ajax({ 
        type: 'POST', 
        dataType: 'json', 
        url: "{% url manage_roles %}", 
        data: { 
         csrfmiddlewaretoken: "{{ csrf_token }}", 
         'roles_list': roles 
        }, 
        cache: false, 
        async: true, 
       }); 
      }); 

但對於原因，我不有時用在空間發送帖子知道一些標籤的開始。

image 1

image 2

有什麼可以造成的呢？對不起，有任何問題，這是我的第一篇文章。 在此先感謝。

Answer 1

如果您嘗試使用表單控件

<div id="roledata" class="form-group"> 
    <label for="last_name" class="col-lg-3 control-label">Roles</label> 
    <div class="col-lg-8"> 
     <input type="text" class="form-control" id="roles" placeholder="add role"> 
    </div> 
</div> 

JS取數據

var roled = {} 

$.each($('#roledata').find('.form-control'), function(){ 
    var field = this.id, 
     value = $(this).val() 
     data[field] = value 
}) 

data={ 
    csrfmiddlewaretoken: "{{ csrf_token }}", 
    'role' : roled 
} 

$.ajax({ 
    type: "POST", 
    url: "", 
    data: JSON.stringify(data), 
    contentType: "application/json", 
    dataType: "json", 

})