时间戳

首页 > 解决方案 > 将两个 AJAX 源变量传递给 php 文件

javascript - 将两个 AJAX 源变量传递给 php 文件

问题描述

我已经查看了这个并在谷歌上搜索了 2 天，但没有运气。

我正在尝试将两个变量 ( lat/ lng) 传递给 Mapbox 脚本，该脚本遵循一个返回的依赖下拉列表cityid。下面的第一个脚本获取 cityid 并将其传递给 GeoSelect.js，后者依次查找所选 cityid 的 lat 和 lng。然后结果应该传递给 index.php maxbox 脚本。

控制台显示 jQuery 找不到变量（lat / lng），因此在获取 cityid 和处理它之间显然有些问题。

代码如下。

（注意请不要评论转义或 SQL 注入风险。我知道这一点，并将在最终确定之前进行整理）

初始 PHP

<?php 
    // Include the database config file 
    include_once 'ladb.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>City Database</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="citySelect.js></script>
  <script src="GeoSelect.js"></script>
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />


</head>
    <body style="background: #D5DDE0">
        <div class="container">
          <h2 style="text-align: left;">XXX</h2><br><br>
            <form action="" method="post">
                <div class="form-group col-md-6">
                    <!-- Country dropdown -->

                    <label for="country">Country</label>
                    <select class="form-control" id="country">
                        <option value="">Select Country</option>
                        <?php 
                            $query = "SELECT * FROM countries ORDER BY country ASC";
                            $result = $ladb->query($query);
                            if ($result->num_rows > 0) {
                                while ($row = $result->fetch_assoc()) {
                                    echo "<option value='{$row["countryid"]}'>{$row['country']}</option>";
                                }
                            }else{
                                echo "<option value=''>Country not available</option>"; 
                            }
                        ?>
                    </select><br>

                    <!-- State dropdown -->
                    <label for="country">Administrative Area</label>
                    <select class="form-control" id="admin">
                        <option value="">Select Administrative Area</option>
                    </select><br>

                     <!-- City dropdown -->
                    <label for="country">City</label>
                    <select class="form-control" id="city">
                        <option id="cityid" value="">Select City</option>
                    </select>                               
                </div>
            </form>
        </div>
        <div class='col-md-6' id='map' style='width: 100%; height: 300px;'></div>
            <script>
                $(document).ready(function(){
                    $.ajax({
                        url: 'cityGeoSelect.php',
                        type: 'get',
                        dataType: 'JSON',
                        success: function(coord){
                            var lat = coord[lat];
                            var lng = coord[lng];
                        }
                    })
                
                mapboxgl.accessToken = '--<API Key>---';
                var map = new mapboxgl.Map({
                    container: 'map',
                    style: '---<Style>---',
                    center: [lng,lat], //<--- Here is the variable I am chasing
                    zoom: 10
                })
                });
            </script>
    </body>
</html>

GeoSelect.js 在这里

// JavaScript Document
    $(document).ready(function(){
        // Country dependent ajax
        
        
        $("#city").on("focus",function(){
            var city = $(this).val();
            if (city) {
                $.ajax({
                    type:"POST",
                    url:"cityGeoSelect.php",
                    cache:false,
                    data:{city:city},
                    success:function(data){
                        $("#coord").html(data);
                    }
                });
            }
        });
    });

cityGeoSelect.php 在这里

<?php
// Include the database config file 
    include_once 'ladb.php';

    // Get country id through state name

    $city = $_POST['city'];

    if (!empty($city)) {
        // Fetch state name base on country id
        $query = "SELECT lng,lat FROM CityList WHERE cityid = {$city}";

        $result = $ladb->query($query);
        
        if ($result->num_rows = 0) {
            while ($row = $result->fetch_assoc()) {
                $lat=$row['lat'];
                $lng=$row['lng'];
                
                echo $coord[] = array('lat'=>$lat,'lng'=>$lng);
                
            }
        }
        
    echo json_encode($coord);
    }
?>

标签： javascriptphpjqueryajaxmapbox-gl-js

解决方案

推荐阅读