选项选择获取值而不重新加载页面

Option select get value without reloading page

本文关键字：加载 新加载 获取 选择 选项      更新时间：2023-09-26

我想排序我的页面内容与选择选项，但我怎么能防止重新加载页面?

我知道它不能在PHP中完成，所以我需要帮助，如何在javascript或ajax中做到这一点。

这是我的代码

<select name="quantity">
   <option value="1"></option>
   <option value="2"></option>
</select>



 <?php
    $redirect_url = "example.com/process.php?&quantity=" . $_POST['quantity'];
    header("Location: " . $redirect_url);
?>



这是我要排序的代码:

$sql = '';
                            if(isset($_POST['search'])){
                                $search = sanitize($_POST['search']);
                                $cat = sanitize($_POST['category']);
                                if(!empty($search)){
                                    $search_query = mysql_query("SELECT * FROM products WHERE `product_name` LIKE '%$search%' OR `category` LIKE '%$cat%'".$sql);
                                    while ($results_row = mysql_fetch_assoc($search_query)){
                                            echo '<div class="product"><a href="product.php?id='.$results_row['id'].'"><img style="border:1px solid black;" src="'.$results_row['img_path'].'/'.$results_row['img_name'].'" width="230px" height="230px"/></a><br><div class="br"></div><strong>'.$results_row['product_name'].'</strong><br>Cijena: '.$results_row['price'].'kn</div>';
                                        }
                                }
                            }else{
                            }

我这样排序:

$sql = '';
            if(isset($_GET['sort'])){
                if ($_GET['sort'] == 'year')
                {
                    $sql = " ORDER BY year";
                }
                elseif ($_GET['sort'] == 'IMDBrating')
                {
                    $sql = " ORDER BY IMDBrating";
                }
                elseif ($_GET['sort'] == 'userrating')
                {
                    $sql = " ORDER BY userrating";
                } 
            }
        ?>
            <th><a href="http://localhost/New folder (3)/index.php?sort=year">Year</a></th>
            <th><a href="http://localhost/New folder (3)/index.php?sort=IMDBrating">IMDB rating</a></th>
            <th><a href="http://localhost/New folder (3)/index.php?sort=userrating">user rating</a></th>

但是我想用<select><option> not with '

排序

没有通过sort my page content with select option清除您想要的内容，但对于重新加载功能，请使用jQuery ajax。

<select name="quantity" id="quantity">
 <option value="1"></option>
 <option value="2"></option>
</select>

JS 

<script>
$(function(){
  $('#quantity').change(function(){
    var value = $(this).val();
    $.ajax({
     type: "POST",
     url: "example.com/process.php", // url to request
     data: { 
      quantity: value  // send data
     },
     success : function(data){
       // populate data here
     }
    });
  });
});
</script>

process.php 

$quantity = $_POST['quantity'];
echo $quantity // this value will available in success callback function

您可以在事件发生时对其进行排序，例如:

 document.getElementsByName('quantity').onclick=function(){
//then put here what you want to be executed
}

则整个页面不会被重新加载。只有这段代码会运行。

相关文章：