Django3。无法将下拉菜单选择从.html传递到表单

时间:2020-09-08 20:55:50

标签: javascript python html jquery django

我还是Django的新手(大约2周)。在过去的几天中,我一直在努力将html文件中的字符串传递给表单。我的项目允许用户从下拉菜单中选择一种状态(目前为密歇根州和俄亥俄州,我将在稍后添加其余部分)。选择州时,它将使用该字符串并从电子表格中提取该州的县列表。这就是问题所在。我进行了广泛搜索,但似乎找不到解决方法。这些解决方案的主要障碍是我不想通过按钮“提交”。我希望用户“选择”一个州,然后选择一个没有页面刷新的县。我还提供了该网页的屏幕截图。到目前为止,借助youtube教程,依赖下拉列表可以完美运行。图片中的“提交”按钮目前尚不美观。

预先感谢您的帮助。如果您对模型有疑问或对代码有其他疑问,请告诉我。

views.py

def StateForm_Page(request):
    context = {}
    stateChoice = 'Michigan' //hardcode a state so if the post fails, the function can still find an excel sheet
    
    if request.method == 'POST':
        State_Form = StateForm(request.POST)
        stateChoice = State_Form.cleaned_data['stateChoice'] //I think this is where my code is failing
        
    else:
        State_Form = StateForm()


    context['State_Form'] = State_Form 

    dataArray = pd.read_excel(r'C:\filename.xls', sheet_name= stateChoice)
    county_strings = dataArray['County '].values.tolist()
    json_county_strings = json.dumps(county_strings)
    context['json_county_strings'] = json_county_strings
    return render(request, 'StateForm_page.html', context)

StateForm_page.html

<body>

    <form action="" method="POST" name="stateChoice">
        {% csrf_token %}
        {{ State_Form.as_p }} 
        
    </form>
    
    <script>
var state;
var county;

        $(document).ready(function(){

            $('#id_county').empty(); //empties county before state is chosen
           
            $("#id_state").on('change', function(){  //when #id_state is changed...
               
                state = $("#id_state").val(); //assign state with the selection
                
                var countyStrings = JSON.parse('{{ json_county_strings | escapejs }}'); //grabs counties from respective state
           
                var length = countyStrings.length;
                var  i;
                for(i=0; i < length; i++){

                    county = countyStrings[i]; //update county options with spreadsheet values
                    $('#id_county').append(

                        `
                        <option value ="${county}">
                            ${county}
                                
                        </option>
                        `
                    );
                }
            });
        })      
        }

        
    </script>
</body>

到目前为止该网页的外观:

What the webpage looks like so far

第二天更改

嘿,多花了几个小时之后,我仍然没有运气。根据您的建议,以下是我添加的内容 views.py

def retrieveState(request):
    statePick = request.GET.get('state')
    

    return JsonResponse(statePick, safe = False)


def StateForm_Page(request):
    context = {}
    stateChoice = []
    
    if request.method == 'POST':
        
        #stateChoice = State_Form.cleaned_data['stateChoice']
        State_Form = StateForm(request.POST)
        stateChoice = retrieveState(request)
        
        
    else:
        stateChoice = 'Michigan'
        State_Form = StateForm()

StateForm_Page.html

               $.ajax({
                    type: 'POST',
                    url: 'ajax/retrieveState/',
                    data: state,
                    dataType: 'json',
                
                
                    
        
                });

好消息是,我添加的Ajax网址上触发了某事,但我认为视图中的函数没有检索Ajax数据。有什么建议?谢谢你的帮助! Terminal Output

0 个答案:

没有答案