How can I include the content of PHP files in output generated by JavaScript?
Question
I have a JS script that scrapes a bit of data and outputs the result to the screen. That works fine. What I now need to do is wrap that output in some pre and post content php files for formatting purposes, and I can't seem to get it to work.
Here's where the script stands now:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<img id="loading-gif">
<script>
$('#loading-gif').hide();
$(document).ready(function () {
$('#loading-gif').show();
$.ajax({
url: "https://aajumpseat.com/dev/include/pre.content.php'); ?>",
type: 'GET',
dataType:"json",
success: function(data) {
pre = JSON.parse(data);
document.write(pre);
}
});
$.ajax({url: "https://aajumpseat.com/dev/scrape/getSegments.php"}).done(function (data) {
$('#loading-gif').hide();
output = JSON.parse(data);
document.write(output);
});
$.ajax({
url: "https://aajumpseat.com/dev/include/post.content.php'); ?>",
type: 'GET',
dataType:"json",
success: function(data) {
post = JSON.parse(data);
document.write(post);
}
});
});
</script>
</body>
</html>
The second ajax call works perfectly and outputs the result to the screen, which is what I want. What I would like to do is place the contents of pre.content.php before the result and the contents of post.content.php after the result so that the result is properly formatted.
There is some php being executed in 'pre.content.php is addition to the formatting html, while 'post.content.php contains only the closing body and html tags.
If need be, I can hardcode the required html into the above script, but if someone has an elegant, or not so elegant, solution on how to include these two files I'd appreciate it.
Thanks.
3 answers
solution1
1 2019-01-24 13:51:48
There's a function specifically for this called $.load() . It's always better to have a <div> with id and then use .innerHTML instead of using document.write() .
$(function () {
$("#stuff").load("/path/to/api/call");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stuff"></div>
If you have got multiple calls, that's fine too. Just have multiple containers.
$(function () {
$("#stuff").load("/path/to/api/call");
$("#pre").load("/path/to/api/code");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stuff"></div>
<pre id="code"></pre>
One thing to note is that, $.load() fires an AJAX GET request.
solution2
0 ACCPTED 2019-01-24 13:53:07
place the contents of pre.content.php before the result and the contents of post.content.php
Don't use document.write . It gives you no control over where in the document you write anything. Instead, define the elements where you want to write your output:
<div id="pre-output"></div>
<div id="main-output"></div>
<div id="post-output"></div>
Then write your output to those specific locations:
pre = JSON.parse(data);
$('#pre-output').html(pre);
(Or maybe .text(pre) ? It's strange to me that you're outputting raw JSON...)
solution3
0 2019-01-24 15:32:41
******* SOLUTION *******
My main php has multiple tasks, so for this particular task the PHP is:
$output = " <div id='loading-gif'><img src='images/loading3.gif';></div>
<div id='main-output'></div>
<script>
$('#loading-gif').hide();
$(document).ready(function () {
$('#loading-gif').show();
$.ajax({url: 'https://aajumpseat.com/dev/scrape/getSegments.php'}).done(function (data) {
$('#loading-gif').hide();
output = JSON.parse(data);
//document.write(output);
$('#main-output').html(output);
});
});
</script>
<div class='bottom-border'></div>
";
and further down the page I have:
include('include/pre.content.php');
echo $output;
include('include/post.content.php');
And it is perfect.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.