我如何从视图页面中的javascript代码调用控制器功能(Codeigniter)

时间:2018-01-23 12:58:00

标签: javascript php codeigniter

这是用于核心PHP的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 () {
          }

2 个答案:

答案 0 :(得分:1)

要从GET请求中获取参数,请使用CI库input。文档HERE

这是一个简化版本,用于演示目的,从视图文件开始 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,因为它简化了网址。谁想要http://example.com/mapController?此外,mapController违反了CodeIgniter class naming conventions。 (更好地解释HERE

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()的参数是item的名称。如果我们有几个项目,我们可以一次获取一个项目,或者使用get()而不使用参数并捕获数组中的所有项目。 (如果没有意义,请参阅文档。)

在CodeIgniter中调用exitdie是一个坏习惯 - 不推荐。我们不在这里进行程序编程。使用它们会使框架的正常执行路径短路,在这种情况下,绕过几个&#34; hook&#34;可能定义的点。让函数返回并让CI遵循其正常的执行路径。

重要的是要知道对base_url()的调用才有效,因为JavaScript是内联的。如果从外部文件(例如<script src="assets/js/maps.js"></script>)加载js,则无法正确评估。

您必须找到另一种方法来创建完整的网址,或使用相对网址。

以下是如何使用外部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();
}

答案 1 :(得分:0)

尝试使用并将{controllerName}替换为您的控制器名称,并将{functionName}替换为控制器方法名称:

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