个人中心
gpt4 book ai didi

javascript - 结果在没有页面加载的情况下发生变化

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

我正在开发 site 。如果您选择城市“卡拉奇”，它会显示结果。我想过滤结果。我已经添加了过滤器选项。我正在寻找与数据库交互的方法，以便当我选择过滤器时结果会发生变化。请指导。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <title>Tuition Teacher</title>

        <!-- Custom styles for this template -->
        <link href="sticky-footer-navbar.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>
            .navbar-nav{
                float:right;
            }
            #slider-range, #slider-range2 {
                width:300px;
                margin-top:10px;
            }
            #slider-range2.ui-slider-horizontal {
                border: 0 none;
            }
            #slider-range2.ui-slider-horizontal .ui-slider-range, #slider-range2.ui-slider-horizontal .ui-slider-handle {
                background: url("http://unbug.ru/examples/jquery/slider/slide.png") repeat scroll 0 0 transparent;
            }
            #slider-range2.ui-slider-horizontal .ui-slider-range {
                background-position: 0 -42px;
                background-repeat: repeat-x;
                height: 21px;
            }
            #slider-range2.ui-slider-horizontal .ui-slider-handle {
                background-position: 0 0;
                background-repeat: no-repeat;
                border: 0 none;
                height: 21px;
                top: 0;
                width: 21px;
            }
            #slider-range2.ui-slider-horizontal .ui-slider-handle:focus {
                outline: 0 none;
            }
            #slider-range2.ui-slider-horizontal .ui-slider-handle + .ui-slider-handle {
                background-position: -21px 0;
            }
        </style>

        <script>
            $(function() {
                var availableTags = [
                "Lahore",
                "Karachi",
                "Islamabad",
                "Rawalpindi",
                "Faisalabad",
                "Multan",
                "Gujranwala",
                "Quetta",
                "Peshawar",
                "Hyderabad",
                "Sialkot"
                ];
                $( "#city" ).autocomplete({
                    source: availableTags
                });
            });
        </script>
        <script>
            $(document).ready(function() {
                $(function() {
                $( "#slider-range, #slider-range2" ).slider({
                        range: true,
                        min: 15,
                        max: 100,
                        values: [15, 100 ],
                        slide: function( event, ui ) {
                            $( "#amount" ).val(ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                        }
                    });
                    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
                    " -" + $( "#slider-range" ).slider( "values", 1 ) );
                });
            });
        </script>
    </head>

    <body>

        <!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <!--
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>^
                </div>
                -->
                <div id="navbar" class="collapse navbar-collapse text-right">
                    <ul class="nav navbar-nav ">
                        <li ><a href="login.html">Teachers Log In </a></li>
                        <li><a href="signup.html">Teachers Sign Up</a></li>
                        <li><a href="#">Tour</a></li>
                        <!--Sign Up
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            -->
                            </ul>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>

        <!-- Begin page content -->
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <h2>Filter</h2>
                    City:<br>
                    <input id="city" placeholder="<?php echo $_POST['city'] ?>">
                    <br>  
                    Gender:<br>
                    <input type="radio" name="gender" value="male">Male<br>
                    <input type="radio" name="gender" value="female">Female<br>
                    <p>
                        <label for="amount">Age range:</label>
                        <input type="text" id="amount"/>
                    </p>
                    <div id="slider-range"></div>
                        Education:<br>
                        <input type="radio" name="education" value="high school">High School<br>
                        <input type="radio" name="education" value="intermediate">Intermediate<br>
                        <input type="radio" name="education" value="professional degree">Professional Degree<br>
                </div>
                <div class="col-md-9">
                    <h2>Search Results</h2>
                    <?php
                        $servername = "hidden";
                        $username = "hidden";
                        $password = "hidden";
                        $dbname = "hidden";

                        // Create connection
                        $conn = new mysqli($servername, $username, $password, $dbname);
                        // Check connection
                        if ($conn->connect_error) {
                            die("Connection failed: " . $conn->connect_error);
                        } 
                        $city = $_POST["city"];
                        $sql = "SELECT id,full_name, email, password,full_address,city,age,contact_number,gender,education FROM users WHERE city='$city'";
                        $result = $conn->query($sql);
                        if ($result->num_rows > 0) {
                            // output data of each row
                            while($row = $result->fetch_assoc()) {
                                echo "Name:" . $row["full_name"]."<br> Email:". $row["email"]. "<br>City: " . $row["city"]. "<br>Age: " . $row["age"]. "<br>Contact Number:". $row["contact_number"]. "<br> Gender: " . $row["gender"]. "<br>Education:" . $row["education"];
                                echo "<br><hr>";
                            }
                        } else {
                            echo "0 results";
                        }
                        $conn->close();
                    ?>
                </div>
            </div>
        </div> <!-- Container ends -->

        <footer class="footer">
            <div class="container">
                <div class="row">
                    <p class="text-muted text-left col-md-6">Copyright 2015. All Rights Reserved.</p>
                    <p class="text-muted text-right col-md-6">Facebook - Twitter - LinkedIn.</p>
                </div>
            </div>
        </footer>

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="dropdown.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="ie10-viewport-bug-workaround.js"></script>
    </body>
</html>

最佳答案

使用ajax。技术可以让您:

更新网页而不重新加载页面。

从服务器请求数据 - 页面加载后

从服务器接收数据 - 页面加载后。

将数据发送到服务器 - 在后台

一个简单的ajax语法是:

jQuery.ajax({
    type: 'POST',
    url: "index.php?task=testfunction",
    data: '',

    dataType: 'html',
    beforeSend: function() {
    //do function show when loading
  },
    success : function(result) {
    //do function show when success
    jQuery('#result').html(result);
}
});

在 php 中你必须这样写

<?php 
function testfunction(){
    echo 'This is result';
    die;
}
?>

关于javascript - 结果在没有页面加载的情况下发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33304655/

25 4 0
文章推荐： php - MySql Select 查询中的正则表达式替换
文章推荐： javascript - 在特定列上禁用 kendogrid 过滤器
文章推荐： android - Google map 不适用于 Google Play 中的应用
文章推荐： javascript - Highchart x 轴标签显示双日期
行者123
个人简介

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

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