PHP – Ajax trong ứng dụng Zend Framework MVC: Client và jQuery

Logo Zend FrameworkBạn có thể gửi trực tiếp một ajax request đến một action của controller tương tự như một request thông thường. Địa chỉ của action chính là tên của tập tin view (ví dụ index.phtml).  Ngoài ra, bằng cách kết hợp với jQuery, bạn có thể đơn giản hóa việc sử dụng ajax để gửi dữ liệu từ các <form> đến server.

Ví dụ sau minh họa cách gọi ajax đến action insert của FooController:

Client / Javascript:

$("#myButton").click(function(){
   $.ajax({
           url: 'foo/insert', // localhost/Demo/public/foo/insert
           type: 'POST',
           dataType: 'json',
           data: { id: 123, name: "Yin Yang"},
           success: function(data) {
               console.log(data);
           }
   });

});

Server / FooController.php:

<?php
class FooController extends Zend_Controller_Action
{

    public function init()
    {
        // action body
    }

    public function indexAction()
    {
        // action body
    }

    public function insertAction()
    {

        echo Zend_Json::encode(array('id' => $_POST['id'], 'name' => $_POST['name']));
    }
}

Xác định một Ajax Request

Một request trong ứng dụng Zend Framework sẽ được “bao đóng” trong một đối tượng Zend_Controller_Request_Http. Thông qua đối tượng này, bạn có thể lấy được các giá trị của request thông qua các phương thức getPost(), getQuery(), getParam(), hay $_POST, $_GET,…

Lớp Zend_Controller_Request_Http còn cung cấp một phương thức hữu ích giúp xác định một request có phải là một ajax request hay không, đó là phương thức isXmlHttpRequest(). Phương thức này trả về true nếu như phát hiện trong header của request có chứa giá trị X-Requested-With là “XMLHttpRequest”:

Một ví dụ về Request header:

Ajax Request Header

Dựa vào isXmlHttpRequest(), bạn có thể xử lý kết quả trả về cho mỗi loại request:

public function abcAction()
{
    if ($this->_request->isXmlHttpRequest()) {
        // do something
    }
    else

{
    echo "<h1>Not Found</h1>";
    // or
    // $this->_redirect("homepage");
    }
}

Not Found page

Tuy nhiên trong trường hợp các action của controller đều được dùng để nhận các ajax request thì tốt nhất là bạn nên để việc xử lý này trong hàm init() của controller:

public function init()
{
    if (!$this->_request->isXmlHttpRequest())
        $this->_redirect("homepage");
}

Form và Ajax Request

Thay vì tạo một đối tượng dữ liệu json thủ công để gửi đến server, bạn có thể sử dụng hàm .serialize() của jQuery để tạo một chuỗi địa chỉ (query string) bao gồm các tham số của các thành phần trong form để gửi đến server. Vì đây chỉ là một ví dụ mẫu nên để đơn giản, tôi sẽ bỏ qua các vấn đề về bảo mật.

Trước tiên, tôi tạo một FooController và thêm vào một action là login. Hãy xóa hết nội dung trang views/scripts/foo/login.phtml để dữ liệu server trả về sẽ không chứa các nội dung của tập tin này.

Tại client, tôi tạo một tập tin html với một form (html 5) như sau:

<form id="form1" action="" enctype="multipart/form-data">
    <fieldset>
        <legend>Login</legend>
        <ul>
            <li><label for="email" >Email</label> <input
                type="email" id="email" name="email" placeholder="abc@email.com"
                required data-email-msg="Email format is not valid" /></li>
            <li><label for="password">Password</label> <input
                type="password" id="password" name="password"
                placeholder="Enter your password" required
                validationMessage="Please enter your password" /></li>
            <li>
                <hr />
                <button id="submitButton">Login</button></li>
        </ul>
    </fieldset>
</form>

CSS 3:

<style>
   form#form1 {
        /* Mozilla: */
       background: -moz-linear-gradient(top, #F0F8FF, #7FFFD4);
       /* Chrome, Safari:*/
       background: -webkit-gradient(linear,left top, left bottom, from(#F0F8FF), to(#7FFFD4));
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding: 20px;
        width: 400px;
   }
   form#form1 label{
       display: inline-block;
       width: 70px;
       text-align: right;
   }
   form#form1 ul li {
        list-style: none;
        padding: 5px 10px;
        margin-bottom: 2px;
   }
   form#form1 button {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
}
</style>

jQuery:

$("#form1").submit(function() {

   var $form = $(this);
   $.ajax({
               type: "POST",
               url: "foo/login",
               data: $form.serialize(),
               success: function(data){
                           alert(data);
                       }
   });
   return false;
}); 

Và tập tin FooController.php tại server:

<?php
class FooController extends Zend_Controller_Action
{

   public function init()
   {
       if (!$this->_request->isXmlHttpRequest())
        $this->_redirect("homepage");

   }

   public function indexAction()
   {
        // action body
   }

   public function loginAction()
   {

        if($_POST['email']=="yinyang@abc.com" &&
             $_POST['password']=="1234")
             echo "Login successful!";
        else
             echo "Invalid e-mail or password.";
   }

}

Minh họa:

PHP jQuery Ajax Login

Kết luận

Bạn đã thấy sử dụng ajax từ client để giao tiếp với server được xây dựng trên Zend Framework rất đơn giản. Tuy nhiên, điều này chưa cho thấy hết khả năng của Zend Framework trong việc hỗ trợ ajax. Cụ thể, ta không cần phải phân biệt để xử lý thủ công các kiểu request thông thưởng và ajax. Việc hiển thị nội dung của view cũng được chia ra cho từng loại request. Tôi sẽ giới thiệu phần này trong phần sau: PHP – Ajax trong ứng dụng Zend Framework MVC: Server và AjaxContext.

YinYang’s Programming Blog

Advertisements

4 thoughts on “PHP – Ajax trong ứng dụng Zend Framework MVC: Client và jQuery

  1. Ở ví dụ đầu tiên dòng $.ajax{ url: ‘foo/insert’, // localhost/Demo/public/foo/insert…}
    -Chạy trong IE 8 hình như nó hiểu là: localhost/Demo/public/foo/insert
    -Còn trong FF 9 thì nó hiểu là localhost/foo/insert
    (Lúc trước mình cũng bị 1 lỗi tương tự như vậy khi sử dụng ajax nhúng trong IFrame)

    Phản hồi

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s