[好，我一直在互联网上寻找如何创建不同步的Web内容，例如Facebook，LinkedIn或YouTube上的内容。由于我是新手，所以大多数教程都不清楚。
我打算做的是使用php请求数据库内容而不刷新页面，但是在加载内容之前，我希望像图像中那样显示正方形，并自动使用数据库中的内容更新自身。谢谢。我打算测试如何开发phonegap-build应用程序，但是该应用程序将PHP解析为文本文件，因此我打算从在线服务器加载该文件。Asychronous App content sample request
示例代码为：
<?php
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Odelami Emmanuel - Personal Portfolio</title>
<meta content="Odelami Emmanuel, 3D " name="keywords">
<meta content="" name="description">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i|Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/magnific-popup/magnific-popup.css" rel="stylesheet">
<link href="lib/hover/hover.min.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="css/style.css" rel="stylesheet">
<!-- Responsive css -->
<link href="css/responsive.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.png">
</head>
<body onload="onLoad()">
<!-- start section navbar -->
<nav id="main-nav">
<div class="row">
<div class="container">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="responsive"><i data-icon="m" class="ion-navicon-round"></i></div>
<ul class="nav-menu list-unstyled">
<li><a href="#header" class="smoothScroll">Home</a></li>
<li><a href="#about" class="smoothScroll">About</a></li>
<li><a href="#portfolio" class="smoothScroll">Portfolio</a></li>
<li><a href="#journal" class="smoothScroll">Blog</a></li>
<li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- End section navbar -->
<!-- start section header -->
<div id="header" class="home">
<div class="container">
<div class="header-content">
<h1>I'm <span class="typed"></span></h1>
<p>Student, Designer, Developer, 3D Generalist, Tech Enthusiast & Community Service Volunteer</p>
<ul class="list-unstyled list-social">
<li><a href="https://facebook.com/webstar.id" ontouchend="window.open('https://facebook.com/webstar.id', '_blank', 'location=false');"><i class="ion-social-facebook"></i></a></li>
<li><a href="https://twitter.com/eiodelami" ontouchend="window.open('https://twitter.com/eiodelami', '_blank', 'location=false');"><i class="ion-social-twitter"></i></a></li>
<li><a href="https://instagram.com/eiodelami" ontouchend="window.open('https://instagram.com/eiodelami', '_blank', 'location=false');"><i class="ion-social-instagram"></i></a></li>
<li><a href="https://linkedin.com/in/eiodelami" ontouchend="window.open('https://linkedin.com/in/eiodelami', '_blank', 'location=false');"><i class="ion-social-linkedin"></i></a></li>
<li><a href="https://eiodelami.wordpress.com" ontouchend="window.open('https://eiodelami.wordpress.com', '_blank', 'location=false');"><i class="ion-social-wordpress"></i></a></li>
<li><a href="https://github.com/eiodelami" ontouchend="window.open('https://github.com/eiodelami', '_blank', 'location=false');"><i class="ion-social-github"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- End section header -->
<!-- start section about us -->
<div id="about" class="paddsection">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-4 ">
<div class="div-img-bg">
<div class="about-img">
<img src="images/me.jpg" class="img-responsive" alt="me">
</div>
</div>
</div>
<div class="col-lg-7">
<h1>Who is Odelami Emmanuel?</h1>
<div class="about-descr">
<h1 class="small">[A Little Note About Me!]</h1>
<p class="p-heading">Emmanuel is a Nigerian based 3D Generalist who loves Short films and animated stories and loves fooling around with his computer.
Emmanuel also loves creating website designs and is obessed with writing the next blockbuster movie😂.</p>
<p class="separator">Emmanuel is an Englishman, an alumni of the University of Ilorin who believes in egaliterianism and community service. He was a one time member of the 'Children Parliament' in the state of Osun.</p>
</div>
</div>
</div>
</div>
<!-- end section about us -->
</div>
<!-- start section services -->
<div id="services">
<div class="container">
<div class="services-carousel owl-theme">
<div class="services-block">
<i class="ion-ios-browsers-outline"></i>
<span>UI/UX DESIGN</span>
<p class="separator">UI/UX is the soul of web design, it gives you insight into the users interaction.</p>
</div>
<div class="services-block">
<i class="ion-ios-lightbulb-outline"></i>
<span>SCRIPT WRITING</span>
<p class="separator">Script writing gives the writer the ability to birth forth that child/idea that he conceived.</p>
</div>
<div class="services-block">
<i class="ion-ios-color-wand-outline"></i>
<span>WEB DESIGN</span>
<p class="separator">The very best way to promote your brand in this jet age is having an efficient and functional website..</p>
</div>
<div class="services-block">
<i class="ion-social-android-outline"></i>
<span>MOBILE APPS</span>
<p class="separator">Mobile Applications are fun to build.</p>
</div>
<div class="services-block">
<i class="ion-ios-analytics-outline"></i>
<span>DATA SCIENCE</span>
<p class="separator">Data Science helps to decipher patterns within data, it helps to understand the seemingly complex patterns in datasets</p>
</div>
<div class="services-block">
<i class="ion-ios-camera-outline"></i>
<span>3D ANIMATION</span>
<p class="separator">I believe realistic 3D renders helps us to see the world in a entirely unique way, with AR & VR Tech we get to experience what was onetime impossible!</p>
</div>
</div>
</div>
</div>
<!-- end section services -->
<!-- start section portfolio -->
<div id="portfolio" class="text-center paddsection">
<div class="container">
<div class="section-title text-center">
<h2>My Portfolio</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portfolio-list">
<ul class="nav list-unstyled" id="portfolio-flters">
<li class="filter filter-active" data-filter=".all">all</li>
<li class="filter" data-filter=".promotion">Promotion</li>
<li class="filter" data-filter=".mockups">Mobile Apps</li>
<li class="filter" data-filter=".uikits">UI/UX</li>
<li class="filter" data-filter=".webdesign">Web Development</li>
<li class="filter" data-filter=".photography">3D Renders</li>
<li class="filter" data-filter=".community-service">Community Service</li>
</ul>
</div>
<div class="portfolio-container">
<div class="col-lg-4 col-md-6 portfolio-thumbnail all promotion community-service">
<a class="popup-img" href="images/portfolio/01.jpg">
<img src="images/portfolio/01.jpg" alt="img">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-thumbnail all community-service">
<a class="popup-img" href="images/portfolio/02.jpg">
<img src="images/portfolio/02.jpg" alt="img">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-thumbnail all promotion community-service">
<a class="popup-img" href="images/portfolio/03.jpg">
<img src="images/portfolio/03.jpg" alt="img">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-thumbnail all community-service">
<a class="popup-img" href="images/portfolio/04.jpg">
<img src="images/portfolio/04.jpg" alt="img">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-thumbnail all promotion community-service">
<a class="popup-img" href="images/portfolio/05.jpg">
<img src="images/portfolio/05.jpg" alt="img">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-thumbnail all community-service">
<a class="popup-img" href="images/portfolio/06.jpg">
<img src="images/portfolio/06.jpg" alt="img">
</a>
</div>
<!--<div class="col-lg-4 col-md-6 portfolio-thumbnail all community-service" style="position: absolute; left: 0px; top: 1968px;">
<a href="images/portfolio/cs.mp4" class="popup-img">
<div class="embed-responsive">
<iframe class="embed-responsive-item" src="images/portfolio/cs.mp4" allowfullscreen>
<video autoplay loop controls><source src="images/portfolio/cs.mp4" type="video/mp4" /></video>
</iframe>
</div>
<div class="embed-responsive embed-responsive-16by9"><video autoplay loop controls><source src="images/portfolio/cs.mp4" type="video/mp4" /></video></div>
</a>
</div>-->
</div>
</div>
</div>
</div>
</div>
<!-- End section portfolio -->
<!-- start section journal -->
<div id="journal" class="text-left paddsection">
<div class="container">
<div class="section-title text-center">
<h2>journal</h2>
</div>
</div>
<div class="container">
<div class="journal-block">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="journal-info">
<a href="https://eiodelami.wordpress.com" ontouchend="window.open('https://eiodelami.wordpress.com', '_blank', 'location=false');"><img src="images/blog-post-1.jpg" class="img-responsive" alt="img"></a>
<div class="journal-txt">
<h4><a href="https://eiodelami.wordpress.com" ontouchend="window.open('https://eiodelami.wordpress.com', '_blank', 'location=false');">MY JOURNEY INTO 3D</a></h4>
<p class="separator">Since chiodhood, I have been obessed and passionate about 3D animations and renders.
The journey of being a self taught 3D generalist had been a tough one yet I would like to appreciate the
collective effort of great tutors like Mike Hermes,James Taylor, Andrew Price and CG Cookies.
You guys are amazing, thanks for the fun, advices and tutorials.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="journal-info">
<a href="https://eiodelami.wordpress.com" ontouchend="window.open('https://eiodelami.wordpress.com', '_blank', 'location=false');"><img src="images/blog-post-2.jpg" class="img-responsive" alt="img"></a>
<div class="journal-txt">
<h4><a href="https://eiodelami.wordpress.com" ontouchend="window.open('https://eiodelami.wordpress.com', '_blank', 'location=false');">THE INFINITE POSSIBILITES OF CROWDFUNDING</a></h4>
<p class="separator">In time past, to raise capital funds was a nightmare for startups and local businesses.
With the advent of awesome crowdfundingnplatforms like Alphabeta, rebublic.co, syndicateroom and lots more,
startups can now easily raise funds and spend more time on building the business...
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="journal-info">
<a href="https://eiodelami.wordpress.com" ontouchend="window.open('https://eiodelami.wordpress.com', '_blank', 'location=false');"><img src="images/blog-post-3.jpg" class="img-responsive" alt="img"></a>
<div class="journal-txt">
<h4><a href="https://eiodelami.wordpress.com" ontouchend="window.open('https://eiodelami.wordpress.com', '_blank', 'location=false');">SOMETHING GREAT IS COMING!</a></h4>
<p class="separator">For a couple of weeks now, I've been investing my time and skills, working on a
project for startups and it's almost over! This great project is targeted towards startups and local businesses...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End section journal -->
<!-- start sectoion contact -->
<div id="contact" class="paddsection">
<div class="container">
<div class="contact-block1">
<div class="row">
<div class="col-lg-6">
<div class="contact-contact">
<h2 class="mb-30">GET IN TOUCH</h2>
<ul class="contact-details">
<li><span>Genius Tech Hub, Tanke</span></li>
<li><span>Ilorin, Nigeria</span></li>
<li><span><a href="tel:+telephone">+234 telephone</a></span></li>
<li><span><a href="tel:+telephone">+234 telephone</a></span></li>
<li><span><a href="mailto:[email protected]">[email protected]</a></span></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<!----<form action="index.php" method="post" role="form" class="contactForm">
<div class="row">
<div id="sendmessage">Your message has been sent. I would get back to you shortly, thank you</div>
<div id="errormessage"></div>
<div class="col-lg-6">
<div class="form-group contact-block1">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<textarea class="form-control" name="message" rows="12" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
</div>
<div class="col-lg-12">
<input type="submit" class="btn btn-defeault btn-send" name="submit" value="Send message"/>
</div>
</div>
</form>--->
<form action='' method="post" class="container" role="form">
<div class="row">
<div id="sendmessage">Your message has been sent. I would get back to you shortly, thank you</div>
<div id="errormessage"></div>
<div class="form-group col-lg-6">
<input type="text" class="form-control" name="name" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group col-lg-6">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
</div>
<div class="form-group col-12">
<input type="info" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
</div>
<div class="form-group col-12">
<textarea type="body" class="form-control" name="message" placeholder="Message" rows="12" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
</div>
<input type="submit" class="btn btn-defeault btn-send msgForward" name="forward" value="Send Message"/>
</div>
</form>
<div id="msgFeedback"></div>
</div>
</div>
</div>
</div>
</div>
<!-- start sectoion contact -->
<!-- start section footer -->
<div id="footer" class="text-center">
<div class="container">
<div class="socials-media text-center">
<ul class="list-unstyled">
<li><a href="https://facebook.com/webstar.id" ontouchend="window.open('https://facebook.com/webstar.id', '_blank', 'location=false');"><i class="ion-social-facebook"></i></a></li>
<li><a href="https://twitter.com/eiodelami" ontouchend="window.open('https://twitter.com/eiodelami', '_blank', 'location=false');"><i class="ion-social-twitter"></i></a></li>
<li><a href="https://instagram.com/eiodelami" ontouchend="window.open('https://instagram.com/eiodelami', '_blank', 'location=false');"><i class="ion-social-instagram"></i></a></li>
<li><a href="https://linkedin.com/in/eiodelami" ontouchend="window.open('https://linkedin.com/in/eiodelami', '_blank', 'location=false');"><i class="ion-social-linkedin"></i></a></li>
<li><a href="https://eiodelami.wordpress.com" ontouchend="window.open('https://eiodelami.wordpress.com', '_blank', 'location=false');"><i class="ion-social-wordpress"></i></a></li>
<li><a href="https://github.com/eiodelami" ontouchend="window.open('https://github.com/eiodelami', '_blank', 'location=false');"><i class="ion-social-github"></i></a></li>
</ul>
</div>
<p>© Copyrights EiOdelami. All rights reserved.</p>
<div class="credits">
Designed by <a href"https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</div>
<!-- End section footer -->
<!-- JavaScript Libraries -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery/jquery-migrate.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="lib/typed/typed.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/magnific-popup/magnific-popup.min.js"></script>
<script src="lib/isotope/isotope.pkgd.min.js"></script>
<!-- Contact Form JavaScript File -->
<script src="contactform/contactform.js"></script>
<!-- Template Main Javascript File -->
<script src="js/main.js"></script>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script rel="javascript" type="text/js">
console.log("page loaded successfully");
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
window.open =cordova.InAppBrowser.open;
}
$document.ready(function(){
$(".msgForward").click(function(){
console.log("submit button activated");
$.ajax({
//create an ajax request to response.php
type: "GET",
url: "launchpad.eu5.org/response.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#msgFeedback").html(response);
console.log(response);
alert(response);
}
});
});
});
</script>
<script type="text/javascript" src="inappbrowser.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
The PHP code is:
<?php
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
$dbUser = "user";
$dbPass ="Password";
$dbHost = "hostname";
$database = "database_name";
$connect = new mysqli($dbHost, $dbUser, $dbPass, $database);
if($connect->connect_error){
die("Error occured while processing your request: " .$connect->connect_error);
} else {
echo "Request Successful!<br>";
}
if(isset($_POST['forward'])){
function test_input($data){
$data = trim($data);
$data = stripcslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$mailer = $mailing = $info = $body ="";
$mailer = test_input($_POST['name']);
$mailing = test_input($_POST['email']);
$info = test_input($_POST['subject']);
$body = test_input($_POST['message']);
echo $mailer ." sent you a message via ". $mailing."<br>Theme: ".$info."<br>Message body: ". $body ."<br>";
$sql ="INSERT INTO feedback (id, name, email, subject, message) VALUES(NULL, ' $mailer ', ' $mailing ', ' $info ', ' $body ')";
if($connect->query($sql) == True){
echo "New record created!";
} else {
echo "Error: ".$sql."<br>".$connect->error;
}
} else {
echo "query not active";
}
$sql = "select * FROM feedback";
$result = $connect->query($sql);
if($result == True){
if($result->num_rows>0){
while($row = $result->fetch_assoc()){
echo "Id: ". $row["id"]. " Mailer: ". $row["name"]. " Mailing: " . $row["email"] . " <br>Subject: " .$row["subject"] . "<br>" . " Message: " .$row["message"];
echo "<br>";
}
} else {
echo "0 results";
}
}
?>
您要查找的关键字是“ ajax”，“ XHR”和“ Web套接字”。对于大多数经典的Web案例，数据将采用JSON格式，但是XML或其他格式在特定情况下很有用。还要研究缓存，Web存储，DOM，回调和Promise。
注意，jQuery非常方便，有据可查，并且具有许多库，但是在2020年将不再需要jQuery，除非您希望支持非常老的浏览器。