对按钮/ajax请求使用jQuery

我是jQuery的新手，尽管有很多关于如何绑定按钮的教程，但我相信我的设置有点复杂(超出了范围)。

我所拥有的：

-我正在使用Django在视图中填充Makes。

这是我的模板：

<div class="container">
<div class="row">
<div class="btn-group" id="makesTable">
{%  if makes %}
{% for make in makes %}
<button  type="button" name="button" class="btn btn-default" id="{{ make.id }}">
<br />
<img class="center-block" src="[REDACTED]"  />
<br />
<p>{{ make.name }}</p>
</button>
{% endfor %}
{% endif %}
</div>
</div>
</div>

我目前在响应式设计方面遇到问题。我希望按钮排列在5x7网格中，然而，有时我会遇到以下问题：

这就是一切都好的时候的样子！

这就是问题所在。注意到带？的间距吗？

工作流程：

用户看到(35)个不同的按钮可供选择。正如您所看到的，name和id是唯一的，其中id是来自数据库的主键(这显然很重要)

我可以使用以下函数使用jQuery捕获主键：

$(document).ready(function() {
$("button").click(function() {
var make_id = $(this).attr('id')
});
});

同时，jQuery将隐藏/删除按钮元素(琐碎)
这是通过以下代码片段完成的(anf将fadeout添加到click listener:
```
function fadeOut() { $( "#makesTable" ).fadeOut( "slow", function() {}); };  
```
然后我想使用单击的id from按钮对我的API进行AJAX请求，其中django URL路由为：
```
url(r'^makes/(?P<pk>[d]+)/$', views.MakesDetail.as_view(), name='makes-instance'),  
```
换句话说，AJAX请求转到mysite.com/api/makes/(this.id)并返回一个JSON文件(由于DRF已经设置好了)

样本响应：

{
"name": "BMW",
"model": [
{
"name": "2 Series",
},
{
"name": "3 Series",
}]
}

最后，使用这个API响应，我希望填充一个类似的按钮模板(用模型替换make)

这适用于单页应用程序，在这种意义上，使用JSON和AJAX不需要刷新页面。

全面披露：我是一名入门级程序员/网络开发人员。

代码片段：

<div class="main-content container-fluid"> 
<div class="container">
<div class="row">
<div class="btn-group" id="makesTable">
<button  type="button" name="button" class="btn btn-default" id="200002038">
<br />
<img class="center-block" src=" "  />
<br />
<p>Acura</p>
</button>
<button  type="button" name="button" class="btn btn-default" id="200464140">
<br />
<img class="center-block" src=""  />
<br />
<p>Alfa Romero</p>
</button>
<script>
$(document).ready(function() {
$(document).on( "click", "button", function() {
alert($(this).attr('id')); //testing functionality
});
});
</script>
<script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="assets/js/main.js" type="text/javascript"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//initialize the javascript
App.init();
});
</script>
</div>
</div>
</div>
</div>

因为按钮是动态生成的。你必须让处理程序像这样：

$(document).on('click', 'button.btn', function(e) {   
alert($(this).attr('id')); //testing functionality
});

首先，事件与按钮的关联应该通过类更好(这是一种更好的做法)。对于javascript点击代码，请检查其他答案。对于ajax请求，您可以参考以下链接：

https://api.jquery.com/jquery.post/

https://api.jquery.com/jquery.get/

https://api.jquery.com/jquery.when/

通过示例"when"函数，它允许您知道请求何时结束并在之后执行任何操作。

从您回复的评论中，我希望您在已经呈现的按钮之前附加处理程序，所以我建议您使用冒泡事件概念，如下所示：-

$(document).ready(function() {
$(document).on( "click", "button", function() {
alert($(this).attr('id')); //testing functionality
});
});

警报会弹出，你可以做任何你想做的事情。

相关内容

最新更新

热门标签：