Question

这是我到目前为止使用Ajax尝试过的。问题是我回复警报（“出错了！”）。我找不到解决方案。

的index.php

<?php
  require_once 'core/init.php';
  include 'includes/head.php';
  include 'includes/navigation.php' ;
  include 'includes/headerfull.php';
  include 'includes/leftbar.php';

  $sql ="SELECT * FROM products WHERE featured = 1 ";
  $featured = $db->query($sql);

?>



<!---Main content--->
<div class="col-md-8">
<div class="row">
<h2 class="text-center">Izdvojeni Proizvodi</h2>
<?php while($product = mysqli_fetch_assoc($featured)) : ?>

<div class="col-md-3">
  <h4><?= $product['title']; ?> </h4>
  <img src="<?= $product['image']; ?>" alt="<?= $product['title']; ?> " 
class="img-thumb" />
  <p class ="list-price text-danger"> List Price <s>$<?= $product 
['list_price'];?></s></p>
  <p class="price">Naša Cijena: $<?= $product ['price'];?></p>
  <button type="button" class="btn btn-sm btn-success" onclick 
="detailsmodal(<?= $product ['id']; ?>)">Details </button>
</div>
<?php endwhile; ?>

 </div>
 </Div>

<?php
 include 'includes/rightbar.php';
 include 'includes/footer.php';
?>

Footer.php

</div>
<footer class ="text-center" id="footer">&copy; Copyright 2017-2018 Lodi  
</footer>

<script>

function detailsmodal(id) {
var data = {"id" : id} ;
jQuery.ajax({
url : 'includes/detailsmodal.php',
method : "post" ,
data : data,
success : function(data){
jQuery ('body').append(data);
jQuery ('#details-modal').modal('toggle');
},
 error: function (){
alert ("Something went wrong!");
 }
 });

}
</script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as 
needed -->
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>


  </body>
  </html>


    </body>
    </html>

详情modal.php

 <!--Details Modal --->
 <? ob_start(); ?>
 <div class="modal fade details-1" id="details-modal" tabindex="-1" 
 role="dialog" aria-labelledby="details-1" aria-hidden="true">
 <div class ="modal-dialog modal-lg">
 <div class="modal-content">
 <div class="modal-header">
 <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 <h4 class="modal-title text-center">Levis Jeans</h4>
 </div>
 <div class="modal-body">
 <div class="container-fluid">
 <div class="row">
 <div class="col-sm-6">
 <div class="center-block">
 <img src="images/headerlogo/levis.jpg" alt="Levis Jeans" class="details img-responsive">
 </div>
 </div>
 <div class="col-sm-6">
 <h4>Details </h4>
 <p>These jeans are amazing! They are straight leg,fit great and look sexy.
 </p>
<hr>
<p>Price: $34.99</p>
<p>Brand: Levis</p>
<form action="add_cart.php" method="post">
    <div class="form-group">
     <div class="col-xs-3">
         <label for="quantity"> Quantity: </label>
         <input type="text" class="form-control" id="quantity" name="quantity">


     </div>
     <p>Availabe: 3</p>
   </div><br><br>
    <div class="form-group">
        <label for ="size">Size:</label>
        <select name="size" id="size" class="form-control">
         <option value=""></option>
         <option value="28">28</option>
         <option value="32">32</option>
         <option value="36">36</option>
        </select>
    </div>
 </form>

 </div>
 </div>
 </div>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal">Close</button>
 <button class="btn btn-warning" type="submit"><span class="glyphicon 
 glyphicon-shopping-cart"></span>Add To Cart</button>
 </div>
 </div>
 </div>
 </div>
 <?php echo ob_get_clean(); ?>

的init.php

 <?php

 $db= mysqli_connect('sql***.byethost11.com','****','****','ecom24database');
if (mysqli_connect_errno()) {
 echo'Database connection failed with following errors: ' . mysqli_connect_error();
 die();

}

define ('BASEURL','/ECOMDva');

我已经为导航栏和模态产品设置了一个数据库。你可以在这里看到网站上的错误： http://incloudme.byethost11.com/?i=2

Answer 1

您好我访问了您在Bytehost（freehosting）中运行的网站，您在详细信息modal.php 上有403 403拒绝访问错误，这可能是因为某些免费托管拒绝ajax请求的权限文件请将文件夹权限更改为 755 并且下次写这样的ajax错误函数会提醒你发生错误

function detailsmodal(id) {
var data = {"id" : id} ;
jQuery.ajax({
url : 'includes/detailsmodal.php',
method : "post" ,
data : data,
success : function(data){
jQuery ('body').append(data);
jQuery ('#details-modal').modal('toggle');
},
 error: function(xhr, textStatus, errorThrown){                    
                   alert("fail"+errorThrown);
 }
 });

Answer 2

在bootstrap.min.js.Like之前加载jquery.min.js文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ajax模态错误

2 个答案: