Python 如何从下拉选择中获取数据并将其显示在同一HTML页面上？德扬戈

我正在做一个项目管理工具web应用程序。我希望用户可以从下拉选择中选择“用户”，单击“添加成员”，然后该成员将显示在该成员？下的某个位置？。这就是我正在做的

请不要担心款式。我还没有完成UI

view.py

def member_select(request):
    if request.method == 'GET':
        selection = request.GET.get('id',None)
        if selection:
            selected_member = User.objects.filter(pk=selection)
            return selected_member

project_index.html

 <form action="" method="GET" id="selection-form">
                  {% csrf_token %}
                    <select id="member_list">
                            {% for user in user %}
                        <option>
                            {{ user.username }}
                        </option>
                            {% endfor %}
                    </select>
                     <input type="button" value="Add member" id="selection-button">
                     </form>

{%csrf_令牌%}
{用户%中的用户为%1}
{{user.username}
{%endfor%}

base.html

 <script>
      var url = $( '#selection-form' ).attr( 'action' );
        $("selection-button").onclick(function (e) {
            e.preventDefault();
            $.ajax({
                type:'GET',
                url:url,
                data:{
                    id:$('#member_list').val()
                },
                success:function (result) {
                    alert('okay');
                },
                error:function (result) {
                    alert('error');
                }

            });
        });

  </script>

var url=$（'选择表'）.attr（'操作'）；
$（“选择按钮”）.onclick（函数（e）{
e、 预防默认值（）；
$.ajax({
类型：'GET'，
url:url，
数据：{
id:$（“#成员列表”）.val（）
},
成功：功能（结果）{
警惕（‘好’）；
},
错误：函数（结果）{
警报（“错误”）；
}
});
});

可能使用空的

和 在jquery成功函数中选择后 改为

  success:function (result) {
                $('.member-name').text(result);

            },

试试这个（没有完全测试）

从文件中

在javascript ajax功能中，如果存在，响应应该是用户对象或空json字符串

<form action="" method="GET" id="selection-form">
    {% csrf_token %}
    <select id="member_list">
       {% for user in user %}
          <option value="{{user.pk}}">{{ user.username }}</option>
       {% endfor %}
     </select>
     <input type="button" value="Add member" id="selection-button">
  </form>
   <di id='res'></div>


  $("#selection-button").on('click', function(e) {
     e.preventDefault();
     var value =$('#member_list').val(); 
      $.ajax({
         type:'GET',
         url:'.',
         data:{
             id:value
         },
         success:function (result) {
            alert('okay');
            $('#res').append(result);
            console.info(result);
         },
         error:function (result) {
              alert('error');
         }
       });
     });

{%csrf_令牌%}
{用户%中的用户为%1}
{{user.username}
{%endfor%}
$（“#选择按钮”）。在（'click'，函数（e）{
e、 预防默认值（）；
var值=$（“#成员列表”）.val（）；
$.ajax({
类型：'GET'，
网址：‘.’，
数据：{
id:值
},
成功：功能（结果）{
警惕（‘好’）；
$（'#res'）。追加（结果）；
控制台信息（结果）；
},
错误：函数（结果）{
警报（“错误”）；
}
});
});

$（'.member name'）。文本（结果）是否添加了“.”因为我输入错误，请尝试在Response中发送
选定的\u成员。名称
，并尝试
提醒（Response）
查看它是否会返回成员的姓名@Sue May Xu
提醒（Response）
说什么不确定我错在哪里，当我单击按钮时，没有显示任何内容。@Sue MayXu
form action=”“method=“GET”id=“selection form
表单操作为空，因此js没有获取url您是否尝试调试
print（“成员选择”）
下面的
def member\u select（请求）：
只是为了检查是否激活了该功能Yes.I print（'selected\u member'））在def member_select（request）：，但没有显示@Kostadin slavovvwhat is content_type？这不起作用：/。@Dimitris kougioumtzises，因为javascript函数中的id错误（输入错误），请将其更改为$（“#选择按钮”）。内容类型告诉django函数，请求的响应是json对象。我将其更改为“#selection_button”，但仍然没有work@Sue-May Xu我编辑了我的答案，并添加了一个div res，以便在该div中显示ajax的结果。因此，当您运行它时，ajax的结果应该显示在div中。如何显示“us”ername’而不是用户id’？目前，它只显示id。顺便说一句，如何将这些数据存储到数据库中？因为当我刷新页面时，所有信息都消失了。@Dimitris Kougioumtzis
<form action="" method="GET" id="selection-form">
    {% csrf_token %}
    <select id="member_list">
       {% for user in user %}
          <option value="{{user.pk}}">{{ user.username }}</option>
       {% endfor %}
     </select>
     <input type="button" value="Add member" id="selection-button">
  </form>
   <di id='res'></div>


  $("#selection-button").on('click', function(e) {
     e.preventDefault();
     var value =$('#member_list').val(); 
      $.ajax({
         type:'GET',
         url:'.',
         data:{
             id:value
         },
         success:function (result) {
            alert('okay');
            $('#res').append(result);
            console.info(result);
         },
         error:function (result) {
              alert('error');
         }
       });
     });