2015-07-26 3 views
0

Когда я получить доступ к call.php страницы:переменной Javascript не виден

Имя переменной JSON не доступен для param.js, как показано ниже:

Это код:

init.js

$("document").ready(function(){ 
    var data = { 
     "action": "init" 
    }; 
    data = $(this).serialize() + "&" + $.param(data); 
    var json; 
    $.ajax({ 
      type: "POST", 
      dataType: "json", 
      url: "response.php", //Relative or absolute path to response.php file 
      data: data, 
      success: function(data){ 
       json = JSON.parse(data["json"]); 
      } 
    }); 
}); 

response.php

<?php 
    if (is_ajax()) { 
     if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists 
      $action = $_POST["action"]; 
      switch($action) { //Switch case for value of action 
       case "init": test_function(); break; 
      } 
     } 
    } 
    function is_ajax() { 
     return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'; 
    } 
    function test_function(){ 
     $return = $_POST; 
     $return["favorite_beverage"] = "Coke"; 
     $return["favorite_restaurant"] = "McDonald's"; 
     $return["json"] = json_encode($return); 
     echo json_encode($return); 
    } 
?> 

param.js

alert(json.favorite_beverage); 

call.php

<html> 
<head> 
<title></title> 
</head> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="init.js"></script> 
<script type="text/javascript" src="param.js"></script> 
<body> 
</body> 
</html> 

ли я что-то пропустил? Ваша помощь приветствуется.

+1

Узнайте, что 'асинхронное 'слово в' AJAX' означает. –

+0

@u_mulder - я сопротивлялся маркировке этого дуплера, потому что дуп не объясняет обе проблемы, которые присутствуют в этом вопросе, и я решил, что главная цель здесь - обеспечить точный и полный ответ. Первый вопрос - проблема обзора. Вторая проблема - проблема асинхронности. Дуп решает только проблему с асинхронным доступом. – jfriend00

ответ

2

У вас есть несколько вопросов здесь.

  1. переменная json объявлена ​​внутри функции (внутри document.ready() обратного вызова), так что он доступен только в пределах этой функции. Вы не можете получить к нему доступ извне этой функции. Вот как работает переменная область действия в Javascript.

  2. Обработчик успеха ajax называется через некоторое время (его асинхронный), поэтому вы не можете надежно установить данные из этого и использовать его в других частях вашего кода. Любой код, который хочет использовать результат вызова ajax, должен быть помещен в обработчик success напрямую или в функцию, которую вы вызываете из обработчика успеха, а затем передаете данные этой функции.

Вот пример исправления, описанного во втором пункте:

$("document").ready(function(){ 
    var data = { 
     "action": "init" 
    }; 
    data = $(this).serialize() + "&" + $.param(data); 
    var json; 
    $.ajax({ 
      type: "POST", 
      dataType: "json", 
      url: "response.php", //Relative or absolute path to response.php file 
      data: data, 
      success: function(data){ 
       json = JSON.parse(data["json"]); 
       // call a function and pass it the ajax data 
       myFunction(json); 
      } 
    }); 
}); 

// function located elsewhere 
function myFunction(data) { 
    // process the data here 
} 

FYI, вы можете узнать гораздо больше о работе с возвращенными из AJAX звонки здесь: How do I return the response from an asynchronous call?