Question

我正在从加载了ajax的html执行脚本但是我没有定义＆＃34;变量＆＃34; 错误访问在父html上声明的变量。

这是我的代码：

的index.php

<div id="ajaxLoad"></div>
<button id="buttonLoad">Load</button>

<script>
    $(function () {
        var varFromMain = 1; // this is the variable

        $("#buttonLoad").click(function () {            
            $.ajax({
                url : "http://localhost/test/loaded.php",
                type : "get",
                data : "",
                async : true,
                success : function( data ) {
                    $("#ajaxLoad").html(data);
                },
                error: function(xhr, mesage, error) {
                }
            });

        });
    });
</script>

loaded.php

this is loaded from Ajax

<script>
    $(function () {
        alert(varFromMain);
    });
</script>

这是我在控制台上获得的内容：

当然，如果我全局声明变量，我可以从加载的脚本中成功访问 varFromMain 。

<script>
    var varFromMain = 1; // this is the variable, declared globally
    $(function () {

        $("#buttonLoad").click(function () {            
            $.ajax({

有人可以解释一下吗？

更新：

我接受陈的回答是因为这个原因：我尝试在同一个文件上声明另一个匿名函数，我已经收到同样的错误。

因此，只能从声明它的匿名函数访问该变量。它虽然没有被摧毁。

<body>
    <button id="buttonLoad">Load</button>
    <div id="ajaxLoad">
    </div>
    <button id="checkVarMain">Check Variable</button>
    <button id="checkFromFunc">Check From Jquery Function</button>
</body>
<script>
    $(function () {
        var varFromMain = 1;
        $("#buttonLoad").click(function () {
            var self = $("#ajaxLoad");
            $.ajax({
                url : "http://localhost/test/loaded.php",
                type : "get",
                data : "",
                async : true,
                success : function( data ) {
                    self.html(data);
                },
                error: function(xhr, mesage, error) {
                }
            });

        });

        $.fn.TestVarFromMain = function() {
            alert(varFromMain);
        }

    });

    $(function () {
        $("#checkVarMain").click(function () {
            alert(varFromMain); // get's reference error
        });

        $("#checkFromFunc").click(function () {
            $.fn.TestVarFromMain(); // Still displays the variable
        });
    });
</script>

Answer 1

就像：

调用匿名函数，在函数作用域中声明varFromMain
发送了AJAX请求
AJAX请求成功
运行成功回调（新JS打印）。
（回调完成后）匿名函数完成，范围破坏，varFromMain不再存在。
新的JS run。

如果您全局声明varFromMain，它始终保留在文档范围内。

Answer 2

如果在$（function（）{}）中定义变量，则不是全局范围。您也可以这种方式声明变量：

window.var varFromMain = 1; //it will be gloabl also if declared inside the function

否则您可以从ajax传递变量：

$.ajax({
url : "http://localhost/test/loaded.php",
type : "get",
data : {varFromMain : varFromMain}, //pass variable
async : true,
success : function( data ) {
     $("#ajaxLoad").html(data);
},
error: function(xhr, mesage, error) {
 }
});

然后在loaded.php中，使用php get variable检索它：

<script>
    $(function () {
        alert("<?php echo $_GET['varFromMain'];?>");
    });
</script>

Answer 3

ajax用于javascript和php之间的交换数据，所以你不能在ajax加载的文件中将你的javascript值称为javascript变量，但可以通过php GET或{{1}访问从未与php和js代码混合!!! 你可以这样做......

<强>的index.php

POST

<强> loaded.php

<div id="ajaxLoad"></div>
<button id="buttonLoad">Load</button>

<script>
    $(function () {
        var varFromMain = 1; // this is the variable

        $("#buttonLoad").click(function () {            
            $.ajax({
                url : "http://localhost/test/loaded.php",
                type : "get",
                data : {d : varFromMain }, //send para [exchage js var to php ]
                async : true,
                success : function( data ) {
                    alert(data);
                    $("#ajaxLoad").html(data);
                },
                error: function(xhr, mesage, error) {
                }
            });

        });
    });
</script>

Ajax加载脚本上的Jquery变量范围

3 个答案: