0

我正在开发网站，我需要使用 ajax 更改页面。每个页面都有不同的 javascript 和 css。我在加载 ajax 内容时调用 javascript 做错了。此外，当加载 ajax 内容但无法加载原始脚本时，我成功调用了警报框。这是我的代码的一些片段，index.html 页面脚本

<script type="text/javascript">
function marmi(){

    jQuery(document).ready(function(){
        //resizeDiv();
    });
    window.onload = function(event) {
        resizeDiv();
    }
    function resizeDiv() {
        vph = jQuery(window).height();
        mamu = (jQuery(window).height() - 277);
        jQuery('#mam').css({'height': mamu + 'px'});

    }
}
</script>

这是用于 ajax 请注意我已经尝试过使用 jQuery("#about").on("click", function(){ .. } 这个但没有成功

<script>
    jQuery.ajaxSetup ({
        cache: false
    });

    jQuery("#about").click(function(){
        marmi();
    });
    jQuery('#about').trigger('click');
    jQuery("#architecture").click(function(){
        function myFunction(){
            jQuery.globalEval(alert("Hello\nContact"))
        }
        myFunction();
    });
</script>

这是加载 url 和 ajax 内容的主要 ajax 脚本

jQuery(document).ready(function() {
    var hash = window.location.hash.substr(1);
    var href = jQuery('.aj_me').each(function() {
        var href = jQuery(this).attr('href');
        if (hash == href.substr(0, href.length - 5)) {
            var toLoad = hash + '.html #ajax';
            jQuery('#ajax').load(toLoad)
        }
    });
    jQuery('a.aj_me').click(function() {
        var toLoad = jQuery(this).attr('href') + ' #ajax';
        jQuery('#ajax').hide('normal', loadContent);
        window.location.hash = jQuery(this).attr('href').substr(0, jQuery(this).attr('href').length - 5);

        function loadContent() {
            jQuery('#ajax').load(toLoad, '', showNewContent())
        }

        function showNewContent() {
            jQuery('#ajax').show('normal');
        }
        return false;
    });
});

我正在这个 div 中加载 ajax 内容

<div id="ajax">

</div>

所有单独的页面都可以在没有 ajax 的情况下正确加载。请有人帮助确定问题

感谢更新了修改后的 ajax 脚本

    jQuery(document).ready(function() {
    var hash = window.location.hash.substr(1);
    var href = jQuery('.aj_me').each(function() {
        var href = jQuery(this).attr('href');
        console.log("href is:",href);
        if (hash == href.substr(0, href.length - 5)) {
            var toLoad = hash + '.html #ajax';
            console.log("Going to load url:",toLoad);
            jQuery('#ajax').load(toLoad)
        }
    });

    jQuery('a.aj_me').click(function() {
        var toLoad = jQuery(this).attr('href') + ' #ajax';
        jQuery('#ajax').hide('normal', loadContent);
        window.location.hash = jQuery(this).attr('href').substr(0, jQuery(this).attr('href').length - 5);

        function loadContent() {
            jQuery('#ajax').load(toLoad, '', showNewContent)
        }

        function showNewContent() {
            jQuery('#ajax').show('normal');
            marmi();
        }
        return false;
    }); 
});

控制台输出

href is: index.html 
href is: about.html 
href is: contact.html 
href is: index.html 
href is: about.html 
href is: contact.html

修改 index.html 页面脚本

<script type="text/javascript">
function successCallback() {
  function marmi(){

    jQuery(document).ready(function(){
        resizeDiv();
    });
    window.onload = function(event) {
        resizeDiv();
    }
    function resizeDiv() {
        vph = jQuery(window).height();
        mamu = (jQuery(window).height() - 277);
        jQuery('#mam').css({'height': mamu + 'px'});

    }
}
}

function completeCallback() {
    jQuery(document).ready(function(){
        resizeDiv();
    });
    window.onload = function(event) {
        resizeDiv();
    }
    function resizeDiv() {
        vph = jQuery(window).height();
        mamu = (jQuery(window).height() - 277);
        jQuery('#mam').css({'height': mamu + 'px'});

    }
    alert('comleted');
}

function errorCallback() {
    alert('error');
}

jQuery.ajax({
    url:"index.html",
    success:successCallback,
    complete:completeCallback,
    error:errorCallback

});
</script>
4

3 回答 3

0

如果您查看 jQuery 的源代码 ( https://github.com/jquery/jquery/blob/master/src/ajax.js ) 并查看 load 函数，您会看到当您指定一个选择器从文档中提取它使用$.parseHTML()解析选择器的内容

 self.html( selector ?

    // If a selector was specified, locate the right elements in a dummy div
    // Exclude scripts to avoid IE 'Permission Denied' errors
    jQuery("<div>").append( jQuery.parseHTML( responseText ) ).find( selector ) :

$.parseHTML 默认情况下会阻止脚本，但是可以通过将“true”作为第二个参数传递给 parseHTML 函数来覆盖它。

长话短说......如果你想运行脚本，你可以滚动你自己的自定义 ajax 函数来代替使用 load。

var toLoad = '#ajax';

$.ajax({
    url: yourURL,
    dataType: 'html',
    success: function (response) {
       var content = $('<div>').append($.parseHTML(response), true).find(toLoad);
       $('#ajax').html(content[0]);
    }
});
于 2013-05-04T06:15:57.113 回答
0

我假设它在您的代码的以下部分，您可以添加建议的 console.logs 并检查控制台的 xhr 活动吗？您可以将 Firefox 与 firebug 插件或 Chrome 一起使用。按 F12 查看控制台

jQuery(document).ready(function() {
    var hash = window.location.hash.substr(1);
    var href = jQuery('.aj_me').each(function() {
        var href = jQuery(this).attr('href');
        console.log("href is:",href);
        if (hash == href.substr(0, href.length - 5)) {
            var toLoad = hash + '.html #ajax';
            console.log("Going to load url:",toLoad);
            jQuery('#ajax').load(toLoad)
        }
    });
于 2013-05-04T03:26:52.860 回答
-1

我认为您需要查看 JQuery AJAX 文档。

http://api.jquery.com/jQuery.ajax/

如果您希望在您的 AJAX 调用成功完成后运行 Javascript 代码，请将该代码放在下面的成功部分中。

$.ajax({
    type: "POST",
    url: '/login/process',
    data: formData,
    success: function (data) 
    {
        // Javascript to run
    }
});
于 2013-05-04T03:29:28.273 回答