在 MVC 中，是否可以让 Ajax 代码（在视图中）请求查询而不是控制器答案

【问题标题】：In an MVC, is it OK to have Ajax code (in View) request a query rather than Controller在 MVC 中，是否可以让 Ajax 代码（在视图中）请求查询而不是控制器
【发布时间】：2012-11-19 19:48:30
【问题描述】：

我正在使用 Tizag 教程 here 和 here。我稍微修改了一下代码，如下：

order.html:

<html>
<body>
<script type="text/javascript">
<!-- 
function createRequest() {
    try {
      request = new XMLHttpRequest();
      //alert("Request is XMLHttp");
    } catch (tryMS) {
      try {
        request = new ActiveXObject("Msxml2.XMLHTTP");
        //alert("Request is ActiveX1");
      } catch (otherMS) {
        try {
          request = new ActiveXObject("Microsoft.XMLHTTP");
          //alert("Request is ActiveX2");
        } catch (failed) {
          request = null;
        }
      }
    }
    return request;
  }
function ajax1(){
    ajaxRequest = createRequest();
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            //alert("Request.readyState is 4");
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var age = document.getElementById('age').value;
    var wpm = document.getElementById('wpm').value;
    var sex = document.getElementById('sex').value;
    var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
    ajaxRequest.open("GET", "ajaxEx1.php" + queryString, true);
    ajaxRequest.send(null); 
}
//-->
</script>

<form name='myForm'>
Max Age: <input type='text' id='age' /> <br />
Max WPM: <input type='text' id='wpm' />
<br />
Sex: <select id='sex'>
<option>m</option>
<option>f</option>
</select>
<input type='button' onclick='ajax1()' value='Query MySQL' />
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>

还有被调用的页面，ajaxEx1.php：

<?php
$dbhost = "localhost";
$dbuser = "admin";
$dbpass = "abcd";
$dbname = "test01";
mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname) or die(mysql_error());
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
$query = "SELECT * FROM ajax_example WHERE ae_sex = '$sex'";
if(is_numeric($age))
    $query .= " AND ae_age <= $age";
if(is_numeric($wpm))
    $query .= " AND ae_wpm <= $wpm";
    //Execute query
$qry_result = mysql_query($query) or die(mysql_error());
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";
while($row = mysql_fetch_array($qry_result)){
    $display_string .= "<tr>";
    $display_string .= "<td>$row[ae_name]</td>";
    $display_string .= "<td>$row[ae_age]</td>";
    $display_string .= "<td>$row[ae_sex]</td>";
    $display_string .= "<td>$row[ae_wpm]</td>";
    $display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;
?>

这很好用，而且非常简单。然而，我注意到在这个例子中，查询本质上是由 Javascript 请求的，在 MVC 模式中被认为是 View 元素。在实际的 MVC 站点中这仍然是一个好习惯吗？ View 是否会将一些参数发送到一个文件，该文件将运行查询本身或将其传递给 DAO 并接收响应？

如果不是，如果上面是 MVC 网站的一部分，那么 Ajax 部分需要如何重组？

【问题讨论】：

最近使用并修改了基于MVC的Opencart，在View templates中发现了一些ajax脚本。
您可能还想看看这篇文章 - css.dzone.com/articles/ajax-and-mvc

标签： ajax

【解决方案1】：

如果是我，并且我在一个足够大的站点上工作，它需要通过 MVC 模式进行模块化，我肯定会将 ajax 内容提取到模型对象而不是视图中。像 Backbone.js 这样的框架在这方面工作得非常好，因为模型具有内置的 ajax 处理功能，并且会为您来回填充数据。

如果你想自己做，你可以创建一个模型对象，它只将数据（而不是 DOM 元素）作为参数并为你返回数据。

function AjaxModel() {

    this.get = function(age, wpm, sex, callback) {

        ajaxRequest = createRequest();
        ajaxRequest.onreadystatechange = callback;

        var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
        ajaxRequest.open("GET", "ajaxEx1.php" + queryString, true);
        ajaxRequest.send(null);
    } 
}

那么你可以这样称呼它：

var ajaxM = new AjaxModel();
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
ajaxM.get(age, wpm, sex, onComplete);

function onComplete(r) {
    /// your ajax complete method
}

如果您的网站足够大，那么在我看来，包含像 Backbone.js 这样的框架是非常值得的。

顺便说一句，MVC 模式是如何分离逻辑的模型，但它并不完美。我经常发现自己创建了许多视图和模型，但很少有控制器。视图逻辑与 javascript 中的控制非常相关，所以我经常发现它们并不需要。我会做对您最有意义的事情，同时确保至少您的数据与其他所有数据分开。

祝你好运。

【讨论】：

【解决方案2】：

我认为可以将 ajax 代码（根据您的需要使其通用和可重用）放在一个单独的 javascript 文件中，您可以将其包含在需要这种 ajax 调用的视图中。

您应该实现一个 ajax 控制器，它将处理您的 ajax 请求并发送响应？如果是数据，您只需使用 json 返回数据。这就是我使用 Zend 框架的方式。

快速浏览一下这个Implementing OOP PHP with AJAX, MVC?

【讨论】：

【解决方案3】：

如果您使用的是 MVC，最好的方法是在整个应用程序中使用它。

因此，在执行 ajax 请求时，根据您的框架需求构建 query string 或 pretty url，像使用普通视图 (View <- Controller <- Model) 一样实现所有内容，然后格式化视图以返回 AJAX 内容（部分 HTML、JSON、XML 或其他）。

通常这可以通过不使用视图模板来完成。

【讨论】：

【解决方案4】：

我永远不会使用 ajax 请求直接调用数据库。

【讨论】：

这毫无意义。 ajax 是否应该返回静态 html？不，它显然必须触及数据库，他在示例中所做的一切都不是特别不安全或使数据库易受攻击。
他应该在某个地方有一个控制器。即使他的例子不是不安全的，那也只是不好的做法。

【解决方案5】：

在 MVC 中，您通常发布到一个控制器，该控制器构造传递给视图以显示的模型。

您正在使用 AJAX 调用来动态更新部分视图，而无需重新加载整个视图。在 JavaScript 代码中构建查询是完全可以的。如果您担心分离模型和视图代码，您可能需要查看 KnockoutJS 以了解客户端 (JavaScript) MVVM 模式实现。

【讨论】：

【解决方案6】：

只要您知道为什么这样做以及这样做的结果会是什么，一切都会好起来的 ;)。但是，这肯定不是最佳做法。

在 MVC 应用程序中，通常有很多“后台”进行。每个请求都有它的生命周期，而这个生命周期的外观取决于它所构建的代码库。

如果您选择不使用此链，您也将失去它带来的好处。它可能涉及（由您或其他人）注册的各种钩子和插件，以使系统作为一个整体工作。它还可能涉及提供系统安全性，例如集中式 ACL 逻辑。

我建议您使用控制器，它反过来从模型请求数据。然后，这些数据可以从控制器直接发送到客户端（作为 JSON 或 XML），或者发送到在客户端处理数据之前格式化数据的视图。但我更喜欢使用 JSON。

并且，JavaScript 应该与标记 (HTML) 分离，并放入一个 .js 文件中。

祝你好运

【讨论】：