Javascript, получающий объект NULL из PHP

Question

Я пытаюсь отправить объект JSON из PHP в мой код Javascript. Я новичок в PHP, поэтому я сталкиваюсь с некоторыми проблемами при достижении этого. Как примечание, весь мой код HTML, PHP и javascript содержится в одном файле PHP. Я искал решения, которые не используют AJAX или Jquery, поэтому я пробовал метод json_encode. К сожалению, хотя мой код компилируется, мой javascript-объект кажется NULL после того, как я его проанализирую.

Я пробовал json_encode из переменной в javascript и, хотя ошибок нет, он по-прежнему возвращает объект NULL. Я также попытался отправить его в скрытое поле формы и получить его оттуда с помощью DOM, но без особого успеха. Я подозреваю, что, возможно, мой PHP-код просто не запускается после отправки формы, но я не знаю, является ли это корнем моей проблемы или мой синтаксис неверен при попытке передать объект php в мой код javascript.

<?php
    $street = $city = $state = $location = $url = $lat = $lon = "";
    $geolocation = $coords = $temp = $details = null;
    $temparray = array();

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
            if(isset($_POST['location']) && $_POST['location'] == 'Yes'){
                $geolocation = json_decode($_POST["geolocation"]);
                $lat = $geolocation->lat;
                $lon = $geolocation->lng;
                $details = find_forecast($lat, $lon);
            }else{
                $street = $_POST["street"];
                $city = $_POST["city"];
                $state = $_POST["state"];
                $temparray = find_coords($street, $city, $state);
                $lat = $temparray[0];
                $lon = $temparray[1];   
                $details = find_forecast($lat, $lon);
            }
    }
?>

Я не включил функции в свой код php выше, потому что я знаю, что сам код php работает (я тестировал в отдельной среде с жестко закодированными значениями).

<script type="text/javascript">
     document.getElementById('theform').addEventListener('submit', 
     function(evt){
            evt.preventDefault();
            var stuff = "<?php echo json_encode($details); ?>"; //tried 2 ways 
            to achieve
            var arr = JSON.parse("<?php echo json_encode($details); ?>"); //2nd 
            way to test if it would work
            console.log(arr);
            document.getElementById("timezone").innerHTML = "<p 
            id='timezone'>" + arr.timezone + "</p>";
        })

Это мойкод javscript, где я пытаюсь получить объект JSON, закодировать его и проанализировать. К сожалению, мой «arr.timezone» приводит к значению «undefined», а мой console.log (arr) - «null».

<form id="theform" onSubmit="return checkInput()" method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" target="testiframe">
            <h2><i>Weather Search</i></h2>
            <label for="street"><b>Street</b></label>
            <input id="street" name="street" type="text" value="">
            <div class="sub-entry">
            <input type="checkbox" id="location" name="location" value="Yes"> 
            Current Location
            </div>
            <br><br>
            <label for="city"><b>City</b></label>
            <input id="city" name="city" type="text" value="">
            <br><br>
            <label for="state"><b>State</b></label>
            <select name="state" id="state">
            <option value="state">State</option>
            <option value="line">----------------</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            </select>
            <br><br><br><br>
            <div class="button">
                <input id="search" name="Search" onclick="checkInput()" 
                type="submit" value="Search">
                <input id="clear" name ="clear" onclick="clearform()" 
                type="button" value="Clear">
            </div>
</form>
<div id= "blue" class="blue">
<p id="timezone"></p>
</div>

Если это помогает, это часть моей формы. Мой файл называется hello.php на данный момент. Кроме того, у меня есть target = testiframe (также тег iframe внизу моего html), потому что я исследовал, что это способ для вашей страницы не обновляться после отправки формы, так как я хотел, чтобы пользовательские значения ввода оставались после вас. Отправить. Я попытался удалить эту функцию, но мой JavaScript все еще не работал должным образом.

Я не получил синтаксических ошибок. Я должен получить объект JSON от моего find_forecast (), и мой data.timezone не должен быть неопределенным. Любая помощь будет принята, поскольку я застрял в этой проблеме на некоторое время.

Answer 1

json_encode() форматирует результат, чтобы он был действительным литералом JavaScript. Не используйте кавычки в JavaScript, когда вы используете <?php echo json_encode(...) ?>. Вам также не нужно вызывать JSON.parse() (но если вы это сделаете, вы должны поместить его в одинарные кавычки, потому что двойные кавычки используются в самом JSON).

<script type="text/javascript">
document.getElementById('theform').addEventListener('submit', function(evt){
    evt.preventDefault();
    var stuff = <?php echo json_encode($details); ?>;
    console.log(stuff);
    document.getElementById("timezone").innerHTML = "<p id='timezone'>" + stuff.timezone + "</p>";
})