单击按钮时发出AJAX请求
Make AJAX request when button is clicked
首先,我对JQuery和AJAX不是很熟悉。我通过尝试我在网上找到的所有东西,想出了以下代码,老实说,我并不完全理解。
我想展示一个引导模式,当点击按钮时,它包含数据库中的记录。我的问题是,当页面加载时,它已经打开了模态,而不是单击按钮时。
<button id="modalData">Load Modal</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Plantilla</h4>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Item Code</th>
<th>New Item Code</th>
<th>Position</th>
<th>Station</th>
</tr>
</thead>
<tbody>
<c:forEach var="plantilla" items="${sessionScope.plantilla}">
<tr>
<td><c:out value="${plantilla.getItemCode()}"/></td>
<td><c:out value="${plantilla.getNewItemCode()}"/></td>
<td><c:out value="${plantilla.getPosition()}"/></td>
<td><c:out value="${plantilla.getStation()}"/></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
这是我的脚本:
$("#modalData").click(loadPlantilla());
$.when(loadPlantilla()).done(function() {
$('#modal').modal('show');
});
function loadPlantilla() {
return $.ajax({
url: './TryAjax',
type: 'POST',
error: function() {
alert('Ajax readyState: ' + xhr.readyState + ''nstatus: ' + xhr.status + ' ' + err);
}
});
}
这是我的Servlet:
PlantillaViewDao dao = new PlantillaViewDao();
List<PlantillaView> plantilla = dao.read();
HttpSession session = request.getSession();
session.setAttribute("plantilla", plantilla);
您正在立即调用函数,而不是传递引用。
$("#modalData").click(loadPlantilla);
在ajax请求中也使用.done
:
function loadPlantilla() {
$.ajax({
url: './TryAjax',
type: 'POST',
error: function() {
alert('Ajax readyState: ' + xhr.readyState + ''nstatus: ' + xhr.status + ' ' + err);
}
}).done(function() {
$('#modal').modal('show');
});
}
快看看这把小提琴
$.当执行您的方法时。。。这就是为什么它显示在页面加载上。
function loadPlantilla() {
$.ajax({
url: './TryAjax',
type: 'POST'
}).done(function() {
$('#modal').modal('show');
});
}
你必须这样做。
或者,如果您真的想使用$.when(可能是因为您有多个ajax调用),如下所示:
$("#modalData").click(function() {
$.when(loadPlantilla(), method2(), method3()).done(function() {
$('#modal').modal('show');
});
});
相关文章:
- ajax请求的顺序总是不同的
- 从ajax请求中获取javascript对象
- Ajax请求文档就绪会导致jquery加载缓慢
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- JavaScript代码未正确检查ajax请求
- "日期“;AJAX请求返回的类型值未定义
- 在等待ajax请求时显示微调器并禁用页面
- 跨域ajax请求
- Ajax请求返回空的数据字符串,但首先得到了正确的数据
- Javascript-如何让脚本与Ajax请求的数据一起运行
- ajax请求成功,但可以'我看不到我的数据
- 如何将给定的curl命令复制为jquery ajax请求
- 为什么我能够从javascript控制台发送跨域ajax请求
- 一台特定计算机的Ajax请求数据未定义/失败
- 获取ajax请求的请求头
- 原型Ajax请求参数为嵌套json
- 可以't从AJAX请求中筛选数据
- jQuery Mobile Collapse上的AJAX请求
- 暂停函数执行流程,直到ajax请求完成