Question

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<div id="carousel">
</div>

<div id="successfulModal">
</div>
<script>
$(function(){
  $("#nav-placeholder").load("newnavbar.html");
  $("#carousel").load("carousel.php");
});
</script>
<!--end of Navigation bar-->
<?php
if($_REQUEST['signupValue']==1)
{
  echo "<script>";
  echo "alert('Thank you for signup');";
  echo "</script>";
}


require "database.php";
/* echo " after requre database.php"; */
$result = home_page_image();
if(!$result)
{
    /* echo 'Could not run query'.mysql_error(); */
    exit;
}
/* $row = $result->fetchAll(PDO::FETCH_ASSOC); */
/* $row = $result->fetch(PDO::FETCH_ASSOC); */
/* echo 'inside php'; */
$count = $result->rowCount();
echo '<div class="container">';
while($count>0)
{


    echo '<div class="row">';
    $i=0;
    while($i<3)
    {
      $row = $result->fetch(PDO::FETCH_ASSOC);
        echo '<div class="col-sm-4">';
        echo '<div class="card">';
        echo '<div class="card-body"><a href="productDetails.php?id=';
        echo $row['code'];
        echo '"><img src="../';
        echo $row['imageurl'];
        echo '" class="img-responsive" style="width:250px;height:250px" alt="Image">';
        echo '</a></div><div class="card-footer">';
        echo mb_strimwidth($row['name'],0,28,"...");
        echo '<button type="button" class="btn btn-outline-dark pull-right" onclick="like('.$row['code'].')"><i class="fa fa-thumbs-o-up"></i></button><button type="button" class="btn btn-outline-dark pull-right" onclick="cart('.$row['code'].')"><i class="fa fa-cart-arrow-down"></i></button></div></div></div>';
        $i++;
        $count--;
    }
    echo '</div>';
}
?>

</div><br><br>

<div id="footer">

</div>

<script>

function like($code)
{
    alert("like button clicked");
    $.ajax({
        url: 'insertLike.php',
        type: 'POST',
        data: {
            code: $code
        }
        /*success: function(msg) {
            alert('Email Sent');
        }     */          
    });
};


$(function(){
  $("#footer").load("footer.html");
});
</script>


</body>
</html>

当我使用<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>代替<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>时，输出已损坏

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>有效。

但是输出的原始视图是

newnavbar.html使用其他脚本，其中有不同版本的jquery。我不确定这是否会产生错误。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

我用相同的错误查看答案答案，但没有解决我的问题。为此，我必须发布一个具有相同错误的新问题。这是jquery版本的问题吗？或者，语法错误问题？

Answer 1

首先你应该把任何脚本放在正文的末尾为此，你应该将jquery脚本放在正文的末尾例如

<body>
 <h1> hello world </h1>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

 </body>

Answer 2

将https://code.jquery.com/jquery-3.3.1.slim.min.js替换为有效的完整jQuery版本https://code.jquery.com/jquery-3.3.1.min.js。

TypeError：$ .ajax不是jquery 3.2.1

2 个答案: