Question

我正在尝试创建一个概念验证网页，该网页使用MVC模式（或至少据我所知）更改文本以响应按钮按下，以及Ajax以避免重新加载页面。（我想在我正在研究的更大的MVC程序中实现Ajax，但我想我会尝试让它首先在小规模上工作）。从这里和这里的例子开始：

https://www.sitepoint.com/the-mvc-pattern-and-php-1/ http://www.w3schools.com/php/php_ajax_php.asp

我让程序单独使用每个组件（如果我不介意重新加载页面来更新文本，它可以使用MVC模式，或者如果我不介意，它可以在不重新加载页面的情况下工作基本上废除MVC模式）。但是，我试图让两者同时工作。我结合了这两个示例，以便视图使用Ajax来调用适当的控制器函数，该函数成功地修改了模型（我确定这部分可以通过调试程序来实现）。但是，当我尝试使用视图的输出功能刷新页面内容时，没有重新加载页面就没有任何反应。

到目前为止，这是我的代码：

<html>
<head>
    <meta charset="UTF-8">
    <!--ajax attempt-->
    <script>
        function callTextChange () 
        {
            var xmlhttp = new XMLHttpRequest();
            //if uncommented, this changes the text, but it doesn't fit with my MVC pattern
            /*xmlhttp.onreadystatechange = function() 
            {
                if (this.readyState == 4 && this.status == 200) 
                {
                    document.getElementById("text").innerHTML = "changed with purely Ajax, without using MVC";
                }
            };*/
            xmlhttp.open("GET", "index.php?action=changeText", true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <?php
        class Model 
        {
            public $text; 

            public function __construct() 
            { 
                $this->text = 'default'; 
            }     
            function changeText ()
            {
                $this->text = 'changed'; 
            }
        } 

        class View 
        { 
            private $model; 

            public function __construct(Model $model) 
            { 
                $this->model = $model; 
            } 

            public function output() 
            {
                //regular MVC method using button as a link
                //return $this->model->text.'<a href="?action=changeText"><button>change text</button></a>';
                //attempted ajax method using button on click attribute to make an Ajax call
                return '<p id="text">'.$this->model->text.'</p>'.'<button onclick="callTextChange()">change text</button>';
            } 

        } 

        class Controller 
        { 
            private $model; 

            public function __construct(Model $model) 
            { 
                $this->model = $model; 
            }

            function changeText()
            {
                $this->model->changeText();
            }
        } 

        $model = new Model(); 
        $controller = new Controller($model); 
        $view = new View($model); 
        if (isset($_GET['action']))
        {
            $controller->{$_GET['action']}();
        }
        echo $view->output(); 
    ?>
</body>

知道如何做我想做的事吗？这甚至可能吗？

非常感谢帮助

编辑：根据下面评论中的建议，我转而试图通过Jquery而不是纯粹的JavaScript来调用Ajax。我从按钮中删除了onclick事件，并使用以下内容替换了头部中的脚本标记：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function()
        {
            $("button").click(function()
            {                   
                //if uncommented, this changes the text, but it doesn't fit with my MVC pattern
                //$("#text").replaceWith("text changed without MVC framework");
                //not sure how to call controller method from here
            });
        });
    </script>

看起来jquery似乎更容易使用，但不幸的是我仍然不知道如何解决我的潜在问题。事实上，我也不确定如何复制

xmlhttp.open("GET", "index.php?action=changeText", true);
xmlhttp.send();

来自原始javascript的行使用jquery。

Answer 1

实际上，我在评论中建议使用jQuery。我添加了一个div标签，其ID为＆＃34;内容＆＃34;围绕所有内容，并将脚本标签替换为：

    <script>
        $(document).ready(function()
        {
            $("button").click(function()
            {       
                $("#content").load("index.php?action=changeText");
            });
        });
    </script>

像魅力一样！感谢您的建议。

概念证明Ajax MVC？

1 个答案: