stackoom
  简体   繁体   中英

Ajax Send ID To Another HTML Page With AJAX To Create Where Clause

 原文  2017-05-16 06:50:22  2   1    javascript/ php/ ajax/ twitter-bootstrap-3/ twitter-bootstrap-4

Question

UPDATED: MAY 17, 2017 9:50 AM

I have two HTML page with both have AJAX way of fetching data via page load. But Now I want to send id to another HTML page to fetch data with where clause into my subcategory page that id are came from the category page. How do I need to it? Or what is the following codes I missed or I need to use?

How to create where clause between two html page with both ajax load?

I created a copy of this at https://github.com/Ailyn09/AJAX-Fetch

I use the following codes:

category.html 

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title></title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <!--Font-awesome 4.7.0-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Custom styles for this template -->
    <link href="css/carousel.css" rel="stylesheet">
</head>

    <div class="row" id="fetch_allcategory"></div>

    <!-- /.container -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#fetch_allcategory').load('php/category_fetch.php', function(response, status, xhr ){

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

category.php 

<?php 
$conn = new mysqli('localhost', 'root', '123', 'orderingsystem');
if ($conn->connect_error) {
    die("Connection error: " . $conn->connect_error);
}
$result = $conn->query("SELECT * FROM categories ORDER BY category_name");
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {?>
    <div class="col-lg-3 product-category">
        <div class="card">
             <img class="card-img-top" id="image" value="<?php echo $row['id']?>" src="images/category/<?php echo $row['categoryimage'] ?>" alt="Card image cap" onclick="window.location.href = 'subcategory.html'">
            <div class="card-block">
                <h4 class="card-title"><?php echo $row['category_name']?></h4>
                <p class="card-text"><?php echo $row['description'] ?></p>
            </div>
        </div>
    </div>
<?php }
} 
?>

 <script>
       $(document).ready(function(){
          $("#image").click(function(){
            var id =   $('#image').attr('value');
              $.post("subcategory.php",{catid: id },function(d){
                  console.log(d);
              });
          });
       });

</script>

subcategory.html 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title></title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <!--Font-awesome 4.7.0-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Custom styles for this template -->
    <link href="css/carousel.css" rel="stylesheet">
</head>

    <div class="row" id="fetch_subcategory"></div>

    <!-- /.container -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#fetch_subcategory').load('subcategory_fetch.php')           
        });
    </script>
</body>

</html>

subcategory.php 

<?php 
$conn = new mysqli('localhost', 'root', '123', 'orderingsystem');
if ($conn->connect_error) {
    die("Connection error: " . $conn->connect_error);
}
if (isset($_POST['catid'])) {
    $categoryid = $_POST['catid'];
    $result = $conn->query("SELECT * FROM subcategories WHERE categoryid = '{$_POST['catid']}' ORDER BY name");
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {?>
        <div class="col-lg-3 product-category">
            <div class="card">
                <img class="card-img-top" src="images/subcategory/<?php echo $row['subcategoryimages'] ?>" alt="Card image cap" onclick="window.location.href = 'products.html'">
                <div class="card-block">
                    <h4 class="card-title"><?php echo $row['name'] ?></h4>
                    <p class="card-text"><?php echo $row['description'] ?></p>
                </div>
            </div>
        </div>
<?php 
}

  }
} 
?>

1 answers

solution1
 0  2017-05-16 07:12:32

You can use it may it's work fine. 

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( "#fetch_allcategory" ).load( "category_fetch.php", function( response, status, xhr ) {

});
</script>

Go to category_fetch.php 

<?php 
$conn = new mysqli('localhost', 'root', '123', 'orderingsystem');
if ($conn->connect_error) {
    die("Connection error: " . $conn->connect_error);
}
$result = $conn->query("SELECT * FROM categories ORDER BY category_name");
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {?>
    <div class="col-lg-3 product-category">
        <div class="card">
           <!---------- please check value for category id -------------->
             <img class="card-img-top" id="image" value="<?php echo $row['id']?>" src="images/category/<?php echo $row['categoryimage'] ?>" alt="Card image cap" onclick="window.location.href = 'subcategory.html'">
            <div class="card-block">
                <h4 class="card-title"><?php echo $row['category_name']?></h4>
                <p class="card-text"><?php echo $row['description'] ?></p>
            </div>
        </div>
    </div>
<?php }
} 
?>

 <script>
       $(document).ready(function(){
          $("#image").click(function(){
            var id =   $('#image').attr('value');
              $.post("subcategory.php",{catid: id },function(d){
                  console.log(d);
              });
          });
       });

</script>

Then go to subcategory.php file 

<?php 
$conn = new mysqli('localhost', 'root', '123', 'orderingsystem');
if ($conn->connect_error) {
    die("Connection error: " . $conn->connect_error);
}
$categoryid = $_POST['catid'];
$result = $conn->query("SELECT * FROM subcategories where category_id = {$categoryid} ORDER BY name");
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {?>
    <div class="col-lg-3 product-category">
        <div class="card">
            <img class="card-img-top" src="images/subcategory/<?php echo $row['subcategoryimages'] ?>" alt="Card image cap" onclick="window.location.href = 'products.html'">
            <div class="card-block">
                <h4 class="card-title"><?php echo $row['name'] ?></h4>
                <p class="card-text"><?php echo $row['description'] ?></p>
            </div>
        </div>
    </div>
<?php   }
} 
?>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question send the img id to another file with ajax send variable value with link to html - ajax page Send php variable to javascript Ajax in HTML page Create Array from HTML to send via AJAX How to send different row id via jquery ajax to update table records in another php page by clicking checkboxes? Send id with ajax and jquery How to send ajax request on one page and receive response on another page send html + JS in ajax CakePHP: Send current model ID to another controller via AJAX AJAX/Django - where to put object id in HTML button?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM