使用ajax post方法将变量从javascript传递到php
问题描述：
我正在尝试使用AJAX将JavaScript变量传递给PHP.它无法正常工作，我无法理解自己在做什么错.我总是遇到以下错误:
I'm trying to pass a JavaScript variable to PHP with AJAX. It's not working and I cannot understand what I am doing wrong. I am always getting the following errors:
1)注意:未定义变量:第174行上... \ movies.php中的ID
1) Notice: Undefined variable: id in ...\movies.php on line 174
2)警告:mysqli_fetch_array()期望参数1为mysqli_result，第176行的... \ movies.php中提供的布尔值.
2) Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in ...\movies.php on line 176.
我使用chrome开发工具，可以看到AJAX调用成功.
I use chrome dev tools and I can see that the AJAX call is successful.
<?php
session_start();
include_once 'dbconnect.php';
if(isset($_POST['id'])){
$id = $_POST["id"];
echo $id;
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" >
<!--Insert sidebar CSS-->
<link rel="stylesheet" href="css/sidebar.css" type="text/css" />
<!--Insert Custom CSS-->
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<!-- Start of navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"></a>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['usr_id'])) { ?>
<li><h4 class="navbar-text"></h4></li>
<li><a href="store.php">Store</a></li>
<li><a href="settings.php"><i class="fa fa-cog" aria-hidden="true"></i>
Account</a></li>
<li><a href="logout.php"><i class="fa fa-power-off"></i> Log Out</a></li>
<?php } else { ?>
<li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<?php } ?>
</ul>
</div>
</div>
</nav>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Welcome <?php echo $_SESSION['usr_name'];?>!
</a>
</li>
<li>
<a href="store.php" class="active">Edit Movies</a>
</li>
<li>
<a href="users.php" class="active">Edit Users</a>
</li>
<li>
<a href="movies.php">Movies Gallery</a>
</li>
<li>
<a href="#">My Rents</a>
</li>
<li>
<a href="#">All Rents</a>
</li>
<li>
<a href="#">Account</a>
</li>
<li>
<a href="#">Contact</a>
<li>
<a href="#">Log out</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid" id="movie-catalog">
<div class="row">
<?php
$result = mysqli_query($con, "SELECT * FROM movies");
while($row = mysqli_fetch_array($result)){
echo '
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive img-center cover" src='.$row['cover_path'].' style="width:150px;height:200px;" alt="">
</a>
<h3 class="text text-center">
<a href="#">'.$row['title'].'</a>
</h3>
<div class="centered">
<input class="btn btn-info text-center info-button" type="submit" data-id="'.$row['id'].'" data-toggle="modal" name="id" value="Info" />
<button type="button" class="btn btn-warning center">Rent</button>
</div><br>
</div>';
}
?>
</div>
<!-- /.row -->
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Movie Info</h4>
</div>
<div class="modal-body">
<div class="row">
<p class="modal-text"></p>
<?php
$movie = mysqli_query($con, "SELECT * FROM movies WHERE id=".$id);
$row = mysqli_fetch_array($movie);
echo '
<div class="col-md-4">
<div class="info-image">
<img class="img-responsive" src="'.$row['cover_path'].'" style="width:150px;height:200px;">
</div>
</div>
<div class="col-md-4">
<h4>Title: '.$row['title'].'</h4>
<h4>Director: '.$row['director'].'</h4>
<h4>Year: '.$row['d'].'</h4>
<h4>Description: '.$row['description'].'</h4>
<a href=""><img class="imdb-img" src="images/IMDb-Icon.png" style="width:80px;height:80px;"></a>
<a href=""><img class="imdb-img" src="images/youtube_logo.png" style="width:60px;height:40px;"></a>
</div>
'; ?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal end -->
</body>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$(document).on("click", ".info-button", function () {
var myBookId = $(this).data('id');
$(".modal-body .modal-text").text(myBookId);
var id = myBookId.toString();
//alert(variableToSend);
$.ajax({
url : "movies.php",
type: "POST",
data : {"id" : id},
success: function(data)
{
//data - response from server
alert(data);
$('#myModal').modal('show');
}
});
});
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Insert Font-Awesome -->
<script src="https://use.fontawesome.com/2ce34ad1b9.js"></script>
</html>
答
您必须创建另一个php文件才能使用ajax调用.
该文件只会产生#myModal div的内部内容.
此div在这里应该为空:<div class="modal fade" id="myModal" role="dialog"></div>
You have to create another php file to call with ajax.
This file will only produce your #myModal div's inner content.
This div should be empty here : <div class="modal fade" id="myModal" role="dialog"></div>
// This retreives the data-id
var myBookId = $(this).attr('data-id');
$.ajax({
url : "movies-modal.php", // The other php filename here
type: "POST",
data : {"id" : myBookId},
success: function(html)
{
$('#myModal').html(html);
$('#myModal').modal('show');
}
});