如何修改谷歌地图存数据的JS以在CodeIgniter中调用控制器函数？

嘿，我来帮你把这段原生PHP的谷歌地图数据保存代码改成适配CodeIgniter的版本，核心就是把原来指向独立PHP文件的请求，改成指向CodeIgniter的控制器方法，下面分步骤给你拆解：

第一步：调整JS里的请求URL #

首先要修改saveData函数里的url变量，替换掉原来的phpsqlinfo_addrow.php。CodeIgniter的URL规则是[站点根URL]/控制器名/方法名，假设你要创建一个叫Map的控制器，里面写save_location方法处理数据保存，那在视图里可以用CodeIgniter内置的base_url()函数生成正确路径（记得先在config.php里配置好base_url）。

修改后的saveData函数：

function saveData() {
    var name = escape(document.getElementById('name').value);
    var address = escape(document.getElementById('address').value);
    var type = document.getElementById('type').value;
    var latlng = marker.getPosition();
    // 替换为CodeIgniter控制器的请求路径
    var baseUrl = "<?php echo base_url('map/save_location'); ?>";
    var url = baseUrl + '?name=' + name + '&address=' + address + '&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();
    
    downloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
            infowindow.close();
            messagewindow.open(map, marker);
        }
    });
}

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; 
    request.onreadystatechange = function() { 
        if (request.readyState == 4) { 
            request.onreadystatechange = doNothing; 
            callback(request.responseText, request.status); 
        } 
    }; 
    request.open('GET', url, true); 
    request.send(null); 
}

function doNothing () { }

第二步：编写CodeIgniter控制器方法 #

在application/controllers/目录下新建Map.php控制器，实现save_location方法来接收参数并完成数据库保存：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Map extends CI_Controller {

    public function save_location() {
        // 通过CodeIgniter的input类获取GET参数
        $name = $this->input->get('name');
        $address = $this->input->get('address');
        $type = $this->input->get('type');
        $lat = $this->input->get('lat');
        $lng = $this->input->get('lng');

        // 解码前端escape转义的内容，准备存入数据库
        $save_data = array(
            'name' => urldecode($name),
            'address' => urldecode($address),
            'type' => $type,
            'lat' => $lat,
            'lng' => $lng
        );

        // 用CodeIgniter的Active Record写入数据库（记得先加载数据库类）
        $this->db->insert('你的地图数据表名', $save_data);

        // 返回空字符串对应前端的判断逻辑
        echo '';
    }
}

更安全的POST请求优化方案 #

上面用的是GET请求，参数会暴露在URL里，推荐改成POST请求，需要同时修改JS和控制器：

修改后的JS代码 #

function saveData() {
    var name = escape(document.getElementById('name').value);
    var address = escape(document.getElementById('address').value);
    var type = document.getElementById('type').value;
    var latlng = marker.getPosition();
    var baseUrl = "<?php echo base_url('map/save_location'); ?>";
    // 拼接POST参数
    var postParams = 'name=' + name + '&address=' + address + '&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();
    
    // 直接发起POST请求（可以复用原来的downloadUrl逻辑，这里简化展示）
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            if (request.status == 200 && request.responseText.length <= 1) {
                infowindow.close();
                messagewindow.open(map, marker);
            }
        }
    };
    request.open('POST', baseUrl, true);
    // 设置POST请求的Content-Type头
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(postParams);
}

function doNothing () { }

修改后的控制器方法 #

只需把参数获取方式改成POST即可：

public function save_location() {
    $name = $this->input->post('name');
    $address = $this->input->post('address');
    $type = $this->input->post('type');
    $lat = $this->input->post('lat');
    $lng = $this->input->post('lng');

    // 后续保存逻辑和GET版本一致
    $save_data = array(
        'name' => urldecode($name),
        'address' => urldecode($address),
        'type' => $type,
        'lat' => $lat,
        'lng' => $lng
    );
    $this->db->insert('你的地图数据表名', $save_data);

    echo '';
}

额外注意事项 #

• 确保在config/autoload.php里加载了数据库类：$autoload['libraries'] = array('database');
• 建议对用户输入做验证过滤，比如用CodeIgniter的表单验证类，避免SQL注入或XSS攻击
• 如果把JS放在外部文件，需要先把base_url作为全局变量传递给JS，不能直接在外部JS里写PHP代码

内容的提问来源于stack exchange，提问作者Stevin George