Question

我有一个包含所有常用元素（html / php，css，js）的页面，并且在其中我通过ajax调用（使用表单）页面。所有这一切都很好，我对此感到高兴...除了不知何故没有完成！

ajax调用是：

$( ".view_button" ).click(function( event ) {
    $( "#reportframe" ).html( "Loading...");
    var geturl = $( "#holder" ).attr("action");
    $.ajax({
        url: geturl,
        type: 'get',
        dataType: 'html',
        async: false,
        data: $('#holder').serialize()
    })
    .done(function(html) {
        $( "#reportframe" ).html(html);
        alert("Loaded!");
    });
});

.view_button是表单的提交按钮，#holder是表单ID，#reportframe是加载页面的div。 geturl设置的原因是因为根据表单中选择的选项，它会更改“操作”。表单的属性以获取不同的页面。

我似乎无法解决两件事：

第一次通过ajax加载页面时，警告＆＃39;没有显示，大多数jquery元素不起作用。但是，第二个（以及随后的）时间是通过ajax加载页面的警告＆＃39;弹出完成，一些jquery元素工作！
让所有jquery在加载的页面中工作！具体来说，我们加载了一个名为“工具提示器”的工具。 - 显然没有加入，因为即使调用并加载了js文件，控制台也说'tooltipster不是函数'。

在加载页面的末尾调用所有js / jquery代码和文件。

还有一件事 - 我似乎无法抓住data显示它，即使它明显地在ajax中传输。有什么想法吗？

非常感谢任何见解!!

Answer 1

如果.view_button元素是提交按钮，则会提交form。这意味着JS代码将停止执行并且页面将被传输。这反过来意味着您的AJAX调用将不会发生，或者在完成之前将被中止。

要解决此问题，请将代码挂钩到表单的submit事件，并在提供的事件上调用preventDefault()以停止标准提交，如下所示：

$("#holder").submit(function(e) {
    e.preventDefault();

    $("#reportframe").html('Loading...');

    $.ajax({
        url: $(this).prop('action'),
        type: 'GET',
        dataType: 'html',
        data: $(this).serialize()
    }).done(function(html) {
        $('#reportframe').html(html);
    });
});

注意我删除了async: false，因为它被认为是非常糟糕的做法，浏览器会警告您不要在控制台中使用它。

此外，当您使用此AJAX请求将远程HTML加载到元素时，您可以将$.ajax调用替换为load()，而不是：

$("#holder").submit(function(e) {
    e.preventDefault();    
    $("#reportframe").html('Loading...').load($(this).prop('action'), $(this).serialize());
});

在ajax

1 个答案: