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

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

javascript php jquery ajax

Javascript Ajax加载脚本上的Jquery变量范围,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我正在从加载了ajax的html执行脚本，但在访问父html上声明的变量时出现了“变量未定义”错误这是我的密码： index.php <div id="ajaxLoad"></div> <button id="buttonLoad">Load</button> <script> $(function () { var varFromMain = 1; // this is the variable

我正在从加载了ajax的html执行脚本，但在访问父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>

this is loaded from Ajax

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

<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>

<?php
  echo $_GET['d']; //access as php variable (this is what ajax purpose)
?>


负载
$（函数（）{
var varFromMain=1；//这是变量
$（“#按钮加载”）。单击（函数（）{
$.ajax({
url:“http://localhost/test/loaded.php",
键入：“获取”，
数据：“，
async:true，
成功：功能（数据）{
$（“#ajaxLoad”）.html（数据）；
},
错误：函数（xhr、mesage、错误）{
}
});
});
});

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 : "",
                async : true,
                success : function( data ) {
                    $("#ajaxLoad").html(data);
                },
                error: function(xhr, mesage, error) {
                }
            });

        });
    });
</script>

this is loaded from Ajax

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

<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>

<?php
  echo $_GET['d']; //access as php variable (this is what ajax purpose)
?>

这是从Ajax加载的
$（函数（）{
警报（varFromMain）；
});

以下是我在控制台上看到的内容：

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

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

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


var varFromMain=1；//这是全局声明的变量
$（函数（）{
$（“#按钮加载”）。单击（函数（）{
$.ajax({

有人能解释一下吗

更新：

出于这个原因，我将接受chen在下面的回答：我试图在同一个文件上声明另一个匿名函数，但我已经得到了相同的错误

因此，该变量只能从声明它的匿名函数中访问，但不会被销毁

<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>


负载
检查变量
从Jquery函数检查
$（函数（）{
varFromMain=1；
$（“#按钮加载”）。单击（函数（）{
var self=$（“#ajaxLoad”）；
$.ajax({
url:“http://localhost/test/loaded.php",
键入：“获取”，
数据：“，
async:true，
成功：功能（数据）{
html（数据）；
},
错误：函数（xhr、mesage、错误）{
}
});
});
$.fn.TestVarFromMain=函数（）{
警报（varFromMain）；
}
});
$（函数（）{
$（“#checkVarMain”）。单击（函数（）{
警报（varFromMain）；//get的引用错误
});
$（“#checkFromFunc”）。单击（函数（）{
$.fn.TestVarFromMain（）；//仍然显示变量
});
});

它是这样的：

调用匿名函数时，在函数作用域中声明varFromMain

已发送AJAX请求

AJAX请求成功

运行成功回调（打印新JS）

（回调完成后）匿名函数完成，作用域被销毁，varFromMain不再存在

新的JS运行

如果全局声明varFromMain，它将始终位于文档作用域。

如果在$（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变量检索它：

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


$（函数（）{
警报（“”）；
});

ajax

用于javascript和php之间的交换数据，因此您不能在ajax加载的文件中调用javascript值作为javascript变量，但可以通过php

GET

或

POST

访问。因为决不能与php和js代码混合使用！！！你可以这样做

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>

this is loaded from Ajax

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

<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>

<?php
  echo $_GET['d']; //access as php variable (this is what ajax purpose)
?>


负载
$（函数（）{
var varFromMain=1；//这是变量
$（“#按钮加载”）。单击（函数（）{
$.ajax({
url:“http://localhost/test/loaded.php",
键入：“获取”，
数据：{d:varFromMain}，//发送para[exchage js var到php]
async:true，
成功：功能（数据）{
警报（数据）；
$（“#ajaxLoad”）.html（数据）；
},
错误：函数（xhr、mesage、错误）{
}
});
});
});

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 : "",
                async : true,
                success : function( data ) {
                    $("#ajaxLoad").html(data);
                },
                error: function(xhr, mesage, error) {
                }
            });

        });
    });
</script>

this is loaded from Ajax

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

<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>

<?php
  echo $_GET['d']; //access as php variable (this is what ajax purpose)
?>

为什么要在ajax上加载javascript？请查看上下文，而不仅仅是上面的示例。原因很多。我知道这一点，我只是想更好地理解变量范围。我不是问如何从函数内部全局声明变量。我是想了解变量decla的范围/可见性我们来自匿名函数。