2

こことここで Tizag チュートリアルを使用しています。次のように、コードを少し変更しました。

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;
?>

これはうまく機能し、非常に簡単です。ただし、この例では、クエリは基本的に、MVC パターンの View 要素と見なされる Javascript によって要求されていることに注意してください。それは実際の MVC サイトでも良い方法でしょうか? ビューは、クエリ自体を実行するか、それを DAO に渡して応答を受け取るファイルにいくつかのパラメーターを送信しますか?

そうでない場合、上記が MVC サイトの一部である場合、Ajax 部分をどのように再編成する必要があるでしょうか?

4

6 に答える 6

1

MVCでは、通常、表示するビューに渡されるモデルを構築するコントローラーに投稿します。

AJAX呼び出しを使用して、ビュー全体をリロードせずにビューの一部を動的に更新しています。JavaScriptコード内にクエリを作成することはまったく問題ありません。モデルとビューコードの分離が心配な場合は、クライアント側（JavaScript）のMVVMパターン実装用のKnockoutJSを確認することをお勧めします。

于 2012-12-11T04:17:45.110 に答える
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 のコントロールと密接に関連しているため、不要であることがよくあります。少なくともあなたのデータが他のすべてのものから分離されていることを確認しながら、私はあなたにとって最も意味のあることをします.

幸運を。

于 2012-12-10T18:27:58.800 に答える
1

なぜそれを行っているのか、そしてその結果がどうなるかを知っている限り、すべて問題ありません;)。しかし、それは確かにベストプラクティスではありません。

MVC アプリケーションでは、通常、「舞台裏」で多くの作業が行われます。すべてのリクエストにはライフサイクルがあり、このライフサイクルの外観は、それが構築されているコード ベースによって異なります。

このチェーンを利用しないことを選択した場合、それに伴うメリットも失われます。システム全体を機能させるために、(あなたまたは他の誰かによって) 登録されたさまざまなフックとプラグインが必要になる場合があります。また、一元化された ACL ロジックなどのシステム セキュリティの提供が含まれる場合もあります。

モデルからデータを要求するコントローラーを使用することをお勧めします。このデータは、コントローラからクライアントに (JSON または XML として) 直接送信するか、クライアントによって処理される前にデータをフォーマットするビューに送信できます。しかし、私は JSON を使用することを好みます。

また、JavaScript はマークアップ (HTML) から分離し、.js ファイルに入れる必要があります。

幸運を祈ります

于 2012-12-11T01:58:23.113 に答える
0

その種のajax呼び出しを必要とするビューに含めることができる別のjavascriptファイルにajaxコード（必要に応じて汎用的で再利用可能にする）を入れても大丈夫だと思います。

ajaxコントローラーを実装する必要があります。これは、ajaxリクエストを処理し、応答を送信するだけですか？データの場合は、jsonを使用してデータを返すだけです。これが私がZendフレームワークでそれを行っている方法です。

このAJAX、MVCを使用したOOPPHPの実装をざっと見てみましょう。

于 2012-12-11T16:24:20.753 に答える
0

MVC を使用している場合は、アプリ全体で使用することをお勧めします。

したがって、ajax リクエストを実行するときは、フレームワークのニーズに合わせてquery stringまたはを構築し、通常のビュー ( ) を使用するようにすべてを実装し、ビューをフォーマットして AJAX のもの (部分的な HTML、JSON、XML など) を返すだけです。pretty urlView <- Controller <- Model

通常、これはビューでテンプレートを使用しないことで実行できます。

于 2012-12-11T15:41:53.790 に答える
0

私は決して、ajax リクエストを使用して直接データベースを呼び出すことはありません。

于 2012-12-11T13:12:28.313 に答える