Request infromation to php

Question

I'm trying to request information on a php file and insert a html code on the <div id="1"... but it doesn't show errors and don't insert nothing to the div. Its something wrong at AJAX code, or the problem is in the html?

PD: The php extract correctly the information from json file.

PHP

<?php
$jsonContents = file_get_contents('../data/data.json');
$data         = json_decode($jsonContents, true);

foreach ($data as $key => $value) {
    echo($value['url']);
};

html

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>SSL Checker</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
    <h5 class="my-0 mr-md-auto font-weight-normal">SSL Checker</h5>
</div>

<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    <h1 class="display-4">SSL Checker</h1>
    <p class="lead">SSL Checker</p>
</div>

<div class="container">
    <div class="row">
</div>
    <footer class="pt-4 my-md-5 pt-md-5 border-top">
        <div class="row">
            <div id="1" class="col-12 col-md">
                <form method="GET" onsubmit="start()">
                    <button type="submit" class="btn btn-lg btn-block btn-primary">Contact us</button>
                </form>
            </div>
        </div>
    </footer>
</body>
</html>

JS

function start() {
    $.ajax({
        type: 'GET',
        url: '/api/domain/showall.php',
        success: function (response) {
            document.getElementById("1").innerHTML = '<input type="text" value="<?php  foreach ($data as $key => $value) {echo($value['url']);?>'
        }
    });
}

Are you trying to use PHP in the JS callback? Let PHP do the work in `showall.php` and use the `response` in your callback to get the result. — M. Eriksson, May 29 '18 at 13:17
You cant write this code. It won't work `document.getElementById("1").innerHTML = ' — hanish singla, May 29 '18 at 13:19
PHP is a server side language. It will be executed on the server, before the content even reaches the client. Your JS is client side, it will be executed in the client. Read more here: [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — M. Eriksson, May 29 '18 at 13:21
@MagnusEriksson — The PHP could run on the server and output perfectly good JS. — Quentin, May 29 '18 at 13:21
@Quentin - Sure, but if you look at the code, it's more likely that the OP is confusing server side/client side. The OP is doing the same loop in the input's value attribute as in the PHP-file that gets called. — M. Eriksson, May 29 '18 at 13:23
@MagnusEriksson how can I do it for request the information and print it on HTML page? — Joanmi, May 29 '18 at 13:45

Quentin · Answer 1 · 2018-05-29T13:20:49.517

You have two basic problems.

The submit event fires on the form and not the button so you never call your start function
If you were calling your start function, then you are doing nothing to stop the form submitting … so the Ajax request will be canceled as the browser loads a new page.

Bind your event handler with JavaScript, bind it to the right element, and prevent the default action.

$("form").on("submit", start);

function start(event) {
    event.preventDefault();
    $.ajax(etc etc etc);
}

You may (it is somewhat unclear) have additional problems with the attempt to embed PHP source code into the string you assign to innerHTML. Keep in mind that:

PHP won't run in .js files by default
if you have it in a <script> element then it will run before the page is sent to the browser
You might generate invalid JS by concatenating strings in PHP

It is also rather odd to make an Ajax request and then completely ignore the data in response.

@Quentin so how can I print information extracted by php on the html page? — Joanmi, May 29 '18 at 13:52
@Joanmi — I refer you back to the last sentence of this answer. — Quentin, May 29 '18 at 13:53

score 1 · Accepted Answer · answered May 29 '18 at 15:00

You should take into consideration what @Quentin explained to you. Now if you want to access your php data on your ajax success function you can do the following:

First on your php you must return the data you want to access via js. so:

<?php
    $jsonContents = file_get_contents('../data/data.json');
    $data         = json_decode($jsonContents, true);

    return $data;

Now since data is JSON, you need to specify that your ajax response is in JSON format adding 'dataType: 'json' to your ajax:

$.ajax({
    type: 'GET',
    url: '/api/domain/showall.php',
    dataType: 'json',
    success: function (data) {
        // data contains all the info you need from PHP
        // Now you will need to loop through data and append it to your html
    }
});

You can check this question on how to loop through json data using jquery

Request infromation to php

2 Answers2