单击按钮时发出 AJAX 请求答案

【问题标题】：Make AJAX request when button is clicked单击按钮时发出 AJAX 请求
【发布时间】：2014-08-29 00:45:02
【问题描述】：

首先，我不是很熟悉 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">&times;</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);

【问题讨论】：

$.when 执行你的方法...这就是为什么它显示在页面加载

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

您是立即调用函数而不是传递引用。

$("#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');
    });
}

快速查看此fiddle。

【讨论】：

为什么.click(loadPlantilla); 没有()？似乎当它有() 时，它会在页面加载时调用该方法。
因为您正在传递一个引用 - 这是一个回调方法。单击链接时会调用它。 () 执行该方法，因此该方法的返回值将被传递。

【解决方案2】：

$.when 执行您的方法...这就是它显示在页面加载中的原因。

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 调用。我不知道when 用于进行多个ajax 调用。就像我所说的，我刚刚开始学习 JQuery 和 AJAX。我已经用您的建议替换了我的 loadPlantilla() 方法，并且它不再显示加载模式。但问题是当我点击按钮时。它似乎不起作用。
我编辑了我的代码。实际上，您应该再次考虑您的“错误”代码。 api.jquery.com/jQuery.ajax 。如您所见，3 个参数被传递给函数Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )。