<?php //Site root variable; ?>
<?php require_once("../includes/site_init.php"); ?>
<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Creativity Optimized.</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src = "_scripts/main.js"></script>
<!-- <script src = "_scripts/custom.js"></script> -->
<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="_css/custom.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,600,700&subset=latin-ext" rel="stylesheet">
<link rel='shortcut icon' href='_images/favicon.png'>
</head>
<body>
<?php //Header include; ?>
<?php require("../includes/header_include.php"); ?>
<section class = "hero">
<div class = "heroOverlay"></div>
<ul class = "heroText">
</ul>
<ul class = "heroNav">
</ul>
</section>
<section class="welcome-text-container">
<h1>Welcome to MP</h1>
<p class="welcome-text">
MP Creations® is a unique advertising agency and visual design studio.
We create visual content for almost any medium to tell compelling stories for our clients.
Our methods rely on creative and strategic thinking. We do it with passion, love and care. See you soon.
</p>
</section>
<div class="content-heading-container">
<h1 class="content-heading">why us?</h1>
</div>
<section id = "mainContent">
<a href="work.php" title="Forward thinking" class="item-buttons">
<img src="_assets/mp_forward_thinking.png" alt="forward thinking" />
</a>
<a href="work.php" title="Lets work together" class="item-buttons">
<img src="_assets/mp_work_together.png" alt="working together" />
</a>
<a href="work.php" title="Projects to play" class="item-buttons">
<img src="_assets/mp_play_projects.png" alt="play projects" />
</a>
<a href="work.php" title="Nesletter" class="item-buttons">
<img src="_assets/mp_newsletter.png" alt="working together" />
</a>
</section>
<section id = "workPreview">
<div class = "sectionGrids">
<h2><span>Recent Developments</span></h2>
<div class = "grid" >
<?php $all_portfolio_items = PortfolioItem::find_all();
foreach ($all_portfolio_items as $item) { ;?>
<div class="grid-item">
<a href=work.php data-jobID = '<?php echo $item->id; ?>'>
<img class="grid-img-hover" src='<?php echo '_portfolio-items'.DS.$item->filename; ?>'/>
<div class="title-wrap-hidden"><p class="job-name-hidden"><span><?php echo $item->job_id; ?></span></p></div>
<div class="title-wrap"><p class="job-name"></p></div>
</a>
</div>
<?php ; } ?>
</div>
<p><a href="work.php">See More Creations</a></p>
</div>
</section>
<?php //Footer include; ?>
<?php require("../includes/footer_include.php"); ?>
<?php
// chdir("_images");
// $file = "somefile.txt";
// $handle = fopen("$file","wt");
// fwrite($handle,"peaches and cream");
// fclose($handle);
?>
<script>
$(document).ready(function(){
$(document).on('mouseenter', '.grid-item', function(){
var container = $(this);
var jobId = container.children().find('.title-wrap-hidden').text();
// AJAX request
$.ajax({
url: 'db_lookup.php',
type: 'POST',
data: {jobId: jobId},
success: function(data) {
// success
container.find('.title-wrap').html('<p class="job-name">'+ data +'</p>');
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown){
// error
alert(errorThrown);
}
});
});
$(document).on('mouseleave', '.grid-item', function(){
var container = $(this);
container.find('.title-wrap').html('<p class="job-name"></p>');
});
});
</script>
</body>
</html>
我有这个 php，它可以将一些图像从数据库加载到前端。我现在想做的是，当我将鼠标悬停在(鼠标悬停)图像上时，我想使用 AJAX 将 $item->job_id 传递给另一个 php 脚本，以便我可以使用该 job_id 从另一个图像中查找该图像的名称数据库中的表。
其他 php 脚本可能看起来像这样
<?php require_once("../includes/site_init.php");
require_once("../includes/site_init.php");
if(isset($_POST['jobId']) && $_POST['jobId'] !==NULL && $_POST['jobId'] !==0){
$job_id = $_POST['jobId'];
$portfolio_item_name = Job::find_by_sql('SELECT name FROM '.'job'." WHERE id = '" . $job_id . "' LIMIT 1");
echo $portfolio_item_name[0]->name;
}else {
echo 'result failed';
}
?>
因此 job_id 将来自调用此 php 文件的 AJAX 请求，而 AJAX 本身将从上面的前一个 php 获取 job_id。对于这样的事情，AJAX 会是什么样子？ PHP 脚本需要进行哪些更改？
最佳答案
您可以使用 jQuery和 AJAX异步发送 $item->job_id到 PHP 页面。解决方案是，
将下面的 jQuery 代码放在结尾
</body>的正上方标签，像这样:<!--YOUR CODE--> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ $(document).on('mouseover', '.grid-img-hover', function(){ // job id var jobId = $(this).parent().find('.title-wrap').text(); // AJAX request $.ajax({ url: 'yourpage.php', type: 'POST', data: {jobId: jobId}, success: function(data) { // success alert(data); }, error: function(jqXHR, textStatus, errorThrown){ // error alert(errorThrown); } }); }); }); </script> </body> </html>注意:不要忘记更改
url中的 yourpage.php AJAX 请求的设置。在 yourpage.php 页面上，按以下方式处理您的 AJAX 请求，
require_once("../includes/site_init.php"); if(isset($_POST['jobId'])){ $job_id = $_POST['jobId']; $portfolio_item_name = Job::find_by_sql('SELECT name FROM '.static::$table_name." WHERE id = '" . $job_id . "' LIMIT 1"); echo $portfolio_item_name->name; }
关于javascript - 在 AJAX 和 PHP 之间发送值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39545648/