如何应用ajax在下拉列表中获取数据? [英] How to apply ajax to get data in dropdown?
问题描述
我正在使用django作为后端来查询我的结果，就像我有三个下拉列表一样，在我看来，我正在使用前两个下拉列表中的值来绑定第三个下拉列表中的数据. 我知道我必须应用ajax，但是我对ajax调用是完全陌生的.通过这种方式，我想要的数据在我的视图中出现.
i am using django as a backend to query my result.Like i have three dropdown and in my views I am using the value from first two drop down to bind the data in third dropdown. I know i have to apply ajax but i am totally new to ajax call.By the way my desired data is comming in my views.
我的观点在这里:-
def send_notification(request):
try:
university_all_list = Universities.objects.using("cms").all()
master_user_types = MasterUserTypes.objects.using("cms").all()
university = request.POST.getlist('universityId')
masterUser = request.POST.getlist('masterUserId')
users = Users.objects.using("cms").filter(userTypeId_id__in=masterUser, universityId_id__in=university)
print university
print masterUser
print users
result_for_user =[]
for list in users:
result_for_user = list
print result_for_user.name
return render(request, 'templates/push-notification/push_notification.html',
{'university_all_list':university_all_list,'master_user_types':master_user_types
,'result_for_user':result_for_user})
except Exception as e:
print e
raise Http404
我的html到这里，您可以看到我有三个下拉列表，分别是university，userType和users:-
my html goes here where you can see i have three drop down named university,userType and users :-
<div class="clearfix margin_bottom30">
<div class="form-group">
<label class="col-sm-4 control-label text_left">University</label>
<div class="col-sm-8 multiselect_container">
<select class="mutisel" multiple="multiple" value="university_all_list.id"
name="universityId"
id="userName" required>
{% for university_name in university_all_list %}
{% if university_name.id == university_list.id%}
<option value="{{ university_name.id }}"
selected>{{ university_name.name }}</option>
{% else %}
<option value="{{ university_name.id }}"
>{{ university_name.name }}</option>
{% endif %}
{% endfor %}
</select>
<script>
$("select.mutisel").multipleSelect({
filter: false,
placeholder: "Select",
});
</script>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label text_left">User Type</label>
<div class="col-sm-8 multiselect_container">
<select class="mutisel" multiple="multiple" value="master_user_types.id"
name="masterUserId"
id="userName" required>
{% for master_user in master_user_types %}
{% if master_user.id == university_list.id %}
<option value="{{ master_user.id }}"
selected>{{ master_user.userType }}</option>
{% else %}
<option value="{{ master_user.id }}"
>{{ master_user.userType }}</option>
{% endif %}
{% endfor %}
</select>
<script>
$("select.mutisel").multipleSelect({
filter: false,
placeholder: "Select",
});
</script>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label text_left">User</label>
<div class="col-sm-8 multiselect_container">
<select class="mutisel" multiple="multiple" value="users.id"
name="masterUserId"
id="userName" required>
{% for user in users %}
<option value="{{ user.id }}"
selected>{{ users.name }}</option>
{% endfor %}
</select>
<script>
$("select.mutisel").multipleSelect({
filter: false,
placeholder: "Select",
});
</script>
</div>
</div>
我尝试将值传递给上下文，但是我发现可以通过Ajax调用...在某些地方犯错，这是我的错误. 预先感谢
i tried passing values values to context but i learnt somewhere it is posible through ajax call...pardon for my mistakes. Thanks in advance
推荐答案
您是否要检索某些数据以用于第三选择? 您可以这样做:
Are you trying to retrieve some data to use in the third select? You can do this:
$.ajax({
url: 'The url to the view',
type: 'GET', //Use POST if database modification would occur
data: {
'first_select': $('#first-select').val(),
'second_select': $('#second-select').val()
},
success: function(data){
//data contains whatever your view returns. If it's html, then add it to the select directly like $('#select').html(data); but if it's json response, Use it as you wish
},
error: function(xhr){
alert(xhr.status + ": " + xhr.responseText);
}
})
我建议您在关闭页面上的body标签之前(而不是在页面内)添加此标签.
您可以在继承的基本模板中定义一些{% block script %}{% endblock %}，并覆盖该块以在其中添加脚本.
I'd recommend that you add this just before closing the body tag on your page and not within the page.
You may define some {% block script %}{% endblock %} in the base template that you've inherited and override that block to add your scripts in there.
这篇关于如何应用ajax在下拉列表中获取数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
