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']);?>'
}
});
}
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
You have two basic problems.
submit
event fires on the form
and not the button
so you never call your start
functionstart
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:
.js
files by default<script>
element then it will run before the page is sent to the browserIt is also rather odd to make an Ajax request and then completely ignore the data in response
.