个人中心
gpt4 book ai didi

javascript - 使用ajax post方法将变量从javascript传递到php

转载 作者：行者123 更新时间：2023-11-27 22:50:54 25 4
gpt4 key购买 nike

我正在尝试使用 AJAX 将 JavaScript 变量传递给 PHP。它不起作用，我无法理解我做错了什么。我总是收到以下错误:

1) Notice: Undefined variable: id in ...\movies.php on line 174

2) Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in ...\movies.php on line 176.

我使用chrome开发工具，可以看到AJAX调用成功。

 <?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="#">&laquo;</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="#">&raquo;</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">&times;</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> 

// 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');
    }
});

关于javascript - 使用ajax post方法将变量从javascript传递到php，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38062450/

25 4 0
文章推荐： javascript - 通过JS点击所有按钮
文章推荐： html - 将右侧的图像 div 与 3 个垂直文本 div 对齐
文章推荐： javascript - 从 ‘demo’ key 更改为我的 key 后，无法填充 EON 图表
文章推荐： css - 仅适用于 Iphone 6 的媒体查询
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com