我如何从视图页面中的以下JavaScript代码调用控制器功能（Codeigniter）

Question

这是在核心PHP中用于保存在Google Map中输入的数据的javascript代码。 我想将变量“ url”中的值传递给Codeigniter中的控制器函数。 我该怎么办？

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 url = 'phpsqlinfo_addrow.php?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 () {
          }

Answer 1

要从GET请求中获取参数，请使用CI库input 。 文档在这里。

这是一个简化的版本，出于演示目的，从视图文件viewMap.php开始

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button value="test" id='mapsave'>Click Me</button>
        <div id="response"></div>

        <script>
            var el = document.getElementById("mapsave");
            el.addEventListener("click", saveData, false);

            function saveData() {
                var res = document.getElementById("response");
                var request = new XMLHttpRequest();
                var name, url;
                name = "Stevin";
                url = "<?= base_url('maps/insert_church_details?name='); ?>" + name;    

                request.onreadystatechange = function () {
                    if (request.readyState == 4) {
                        res.innerHTML = request.responseText;
                    }
                };
                request.open('GET', url, true);
                request.send();
                }
        </script>       
    </body>
</html>

这是控制器。 我将其重命名为Maps而不是mapController因为它简化了URL。 谁想去http://example.com/mapController ？ 而且， mapController违反了CodeIgniter 类的命名约定。 （在这里更好地解释）

class Maps extends CI_Controller
{

    public function index()
    {
        $this->load->view('viewMap');
    }

    public function insert_church_details()
    {
        echo $this->input->get('name');
        //exit; <- Bad idea for CodeIgniter
    }
}

在这个例子中，查询字符串中只有一个项目，我们使用input->get('name')来获取它。 传递给get()的参数是项的名称。 如果我们有几个项目，我们可以一次获取一个项目，或者使用不带参数的get()并捕获数组中的所有项目。 （如果这没有任何意义，请参阅文档。）

在CodeIgniter中调用exit或die是一个坏习惯-不推荐。 我们不在这里进行过程编程。 使用它们会缩短框架的正常执行路径，并且在这种情况下，绕过可能定义的几个“挂钩”点。 让函数返回并使CI遵循其正常执行路径。

重要的是要知道对base_url()的调用仅能起作用，因为JavaScript是内联的。 如果从外部文件（例如<script src="assets/js/maps.js"></script> ） <script src="assets/js/maps.js"></script> ，它将无法正确评估。

您将必须找到另一种创建完整URL或使用相对URL的方法。

这是使用外部js文件，发送和获取几个参数，使用相对URL以及使用json进行响应的方法。

风景

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button value="test" id='mapsave'>Click Me</button>
        <div id="response"></div>

        <script src="assets/js/maps.js"></script>       
    </body>
</html>

控制器

class Maps extends CI_Controller
{

    public function index()
    {
        $this->load->view('viewMap');
    }

    public function insert_church_details()
    {
        $name = $this->input->get('name');
        $addr = $this->input->get('address');
        echo json_encode(['name' => $name, 'addr' => $addr]);
    }
}

JavaScript

var el = document.getElementById("mapsave");
el.addEventListener("click", saveData, false);

function saveData() {
    var res = document.getElementById("response");
    var request = new XMLHttpRequest();
    var name, url, address;
    name = "Stevin";
    address = 'Home';
    url = '/maps/insert_church_details?name=' + name + '&address=' + address;

    request.onreadystatechange = function () {
        var out;
        if (request.readyState == 4) {
            out = JSON.parse(request.responseText);
            res.innerHTML = out.name + ", " + out.addr;
        }
    };

    request.open('GET', url, true);
    request.send();
}

Answer 2

只需尝试使用{controllerName}并将其替换为控制器名称，然后将{functionName}替换为控制器方法名称：

var url = '<?php echo base_url(); ?>{controllerName}/{functionName}?name=' + name + '&address=' + address +
                  '&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();

我如何从视图页面中的以下JavaScript代码调用控制器功能（Codeigniter）

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-01-23 21:17:00

解决方案2
0 2018-01-23 13:26:17

我如何从视图页面中的以下JavaScript代码调用控制器功能（Codeigniter）

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-01-23 21:17:00

解决方案2 0 2018-01-23 13:26:17

解决方案1
1 已采纳 2018-01-23 21:17:00

解决方案2
0 2018-01-23 13:26:17