如何通过Django中的ajax在下拉列表中提交所选值

时间:2014-06-22 17:05:40

标签: javascript ajax django

django ajax有点新手,所以我的问题可能对专家来说很容易。 我有一个选择选项下拉列表我想要当用户从下拉列表中选择一个值时,该值通过ajax提交,以便我可以使用所选值在django后端运行查询集。 我可以以某种方式在后端找到这样做,但需要一些帮助,如何在前端通过ajax提交此值。 这是下拉代码,只是基本的html,

<select>
<option>joshua</option>
<option>peter</option>
<option>james</option>
<option>pawine</option>
<option>flonah</option>
</select>

我想要一个将所选值发送到服务器的ajax函数,以便我可以使用它在django后端运行查询集并将结果适当地返回给ajax成功函数。 在adavnce中感谢

3 个答案:

答案 0 :(得分:0)

检查:

<select id="select_form">
<option>joshua</option>
<option>peter</option>
<option>james</option>
<option>pawine</option>
<option>flonah</option> 
</select>

var name = $('#select_form').find(":selected").text();
var url = 'your_url_here'+userName+'/';
   $.get(url, function(data)
   {
      //do something with data
   })

答案 1 :(得分:0)

我尝试使用以下选择下拉列表:

<select id="select_dropdown">
<option value='joshua'>joshua</option>
<option value='peter'>peter</option>
....
....
</select>

<script>

$(document).ready(function(){

 $('#select_dropdown').change(function(){
    var e = document.getElementById("select_dropdown");
    var value = e.options[e.selectedIndex].value;

    $.ajax({
        url: "your-url",
        type: "post",
        data: value,
        success: function(data) {

           console.log(data);
        }});

});

</script>

答案 2 :(得分:0)

这是一个使用JQuery的示例,它在select小部件上放置一个事件处理程序,当用户进行选择时,它将调用Django视图。在此示例中,所选名称将附加到URL,以便Django可以使用urls.py中的以下正则表达式获取它:

url(r'^path_to_app/(?P<name>\w+)$', 'app.views.function'),

以下是一个例子:

<select id="chooseme">
<option>--select a name--</option>
<option>joshua</option>
<option>peter</option>
<option>james</option>
<option>pawine</option>
<option>flonah</option>
</select>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {

    $('#chooseme').change(function(){
        var name = document.getElementById("chooseme").value;
        $.get('/path_to_app/' + name, function(data){
               // do something here with a return value data, if desired
        });
    });
});
</script>