Question

我有一个欢迎页面，其中包含用于选择城市的下拉列表。默认情况下，列表的第一个城市用于显示城市的快速信息。

验证所选城市会带来一个专门针对这个城市的新页面。这很好。

我想做的是，选择一个未经验证的新城市，将修改欢迎页面上的城市信息。

这是我的PHP代码：

    $db = app::getdatabase();

    $checkinformations= new informations();

    $town="city1";

    if(isset($_POST['submit']) AND isset($_POST['cities']))
    {   
        app::redirect("/city/$town/");
    }

    require_once'inc/welcome_page.php';

welcome_page.php：

        <h1>Welcome</h1>

        <form role="form" action="#" method="POST">  

          <select name="cities" id="city" >
          <option value="city1">city1</option>
          <option value="city2">city2</option>
          <option value="city3">city3</option>
          </select>

          <button type="submit" class="btn" name="submit"></button> 

        </form>

        <div> 
        <?php echo  $checkinformations->informations($db,$town);?>
        </div>

Answer 1

如果要在同一页面上显示有关更改的所选城市信息，则必须使用AJAX。首先拿一个带id的空白div。并将ajax响应转储到其中。我编辑代码来执行“更改”事件，我把$（'＃city'）。触发器（'change'）;这一行在关闭“OnReady函数”之前和onchange函数方法之后，因为方法将在触发之前定义。

    <h1>Welcome</h1>
    <form role="form" action="#" method="POST">  

      <select name="cities" id="city" >
      <option value="city1">city1</option>
      <option value="city2">city2</option>
      <option value="city3">city3</option>
      </select>

      <button type="submit" class="btn" name="submit"></button> 

    </form>

    <div id="cityInfo">  </div>
    <script type="text/javascript">
        $(document).ready(function(){
        $("#city").on("change", function(){
        $.ajax({
                        type: 'post',
                        url: 'citydetails.php',
                        data: {cityname: $("#city").val()},
                        success: function (data) {
                                $('#cityInfo').html(data);
                        }
                });
             });
$('#city').trigger('change'); //From here you can trigger city change event.
            });
    </script>

Answer 2

使用jQuery AJAX。只是一个例子

  $(document).ready(function(){

     $("#city").on("change", function(){

       //Getting Data from Server using AJAX

       $.ajax({

          url: "getCityDetails.php",
          type: "post",
          data: {city: $("#city").val()},
          success: function(data){

              //Update City Details in Homepage

          }

       });


     })

  });

更新页面信息或提交到新页面

2 个答案: