Khởi Nghiệp Thành Công với Internet: ajax

( Khởi nghiệp với Internet)

BUTTON

<button type="button">Click me!</button>

<button type="button" disabled="disabled">Disabled</button>

<button type="reset">Reset</button>

<button type="submit">Submit</button>

<button type="button" value="Gửi">Value</button>

LABEL

Label - input dạng text

<label for="email">Email</label>: <input type="text" id="email" name="email" size="30" />

Hãy click vào nhãn Email để hiểu rõ hơn.

Email:

Label - input dạng checkbox

Hãy click vào nhãn 01 và 02 để hiểu rõ hơn.

Nhãn 01:
Nhãn 02:

Label - input dạng radio

Hãy click vào nhãn Nam và Nữ để hiểu rõ hơn (chú ý: giá trị của "name" trong 2 <input /> phải như nhau).

Nam:
Nữ:

TEXTAREA

rows - cols

<textarea rows="5" cols="20">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng...</textarea>

disabled

<textarea rows="5" cols="20" disabled="disabled">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng...</textarea>

Dạng này sẽ không hiển thì ra trình duyệt.
Được sử dụng khi không muốn dữ liệu bị thay đổi.

readonly

<textarea rows="5" cols="20" readonly="readonly">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng...</textarea>

Sử dụng khi giá trị textarea chỉ dùng để đọc, không được thay đổi.

SELECT - OPTION

select - option

select - sử dụng name

select - sử dụng disabled

Xác định danh sách thả xuống không hiển thị.

select - sử dụng multiple

Hiển thị nhiều tùy chọn.

select - sử dụng size

Xác định số tùy chọn có thể thấy trong danh sách lựa chọn.

option - sử dụng disabled

Xác định danh sách thả xuống không hiển thị.

option - sử dụng label

Xác định nhãn cho tùy chon.

option - sử dụng selected

Xác định một tùy chọn được chọn mặc định.

option - sử dụng value

Xác định giá trị của tùy chọn (sẽ được gửi tới server khi submit).

OPTGROUP

optgroup - sử dụng label

optgroup - sử dụng disabled

FIELDSET - LEGEND

<form action="#">
<fieldset>
<legend>Thông tin cá nhân:</legend>
Họ tên: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Ngày sinh: <input type="text" size="10" />
</fieldset>
</form>

Thuộc tính disabled="disabled"

Khi sử dụng thuộc tính này, chúng ta không thể nào thao tác các chức năng trong form được, ví dụ như không thể click checkbox, radio, không thể điền trường text cho input hay khu vực textarea.

<!DOCTYPE HTML>
<html>
<head></head>

<body>
<form action="#">
<fieldset disabled="disabled">
<legend>Thông tin cá nhân:</legend>
Họ tên: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Ngày sinh: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>

Blog tổng hợp những kinh nghiệm được học, áp dụng và chia sẻ

Đọc Tiếp

( Khởi nghiệp với Internet)

AJAX viết tắt của câu Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ) là một phần trong thư viện JQuery. Nó là phương thức cho phép tải một phần dữ liệu mới vào tài liệu HTML mà không cần phải tải lại toàn bộ tài liệu, giúp giảm thiểu thời gian tải trang cũng như băng thông của website.

Các phương thức trong Jquery

Phương thức load()

Load() là một phương thức đơn giản nhất trong kỹ thuật ajax. Chức năng của nó là tải và hiển thị nội dung đã tải vào một phần tử HTML nào đó.

Cú pháp: load(url, params, callback)

url: URL Tiếp nhận, xử lý và gửi lại dữ liệu.
Params: lưu giữ các biến cần gửi đi.
Callback: hàm mà nó sẽ gọi đến sau khi quá trình Ajax hoàn tất .

Ví dụ:

$(document).ready(function( ){
   $("div#result").load("result.php", {user: admin}, callback);
});
function callback(){
   alert("Kết thúc quá trình.");
}
//Nội dung trong result.php
if(isset($_POST['user']))
{
 echo 'Bạn đã gửi dữ liệu của người dùng = '.$_POST['user'].' thành công';
}else{
 echo 'Không nhận được dữ liệu của người dùng nào';
}

Phương thức get()

Để gửi dữ liệu theo phương thức get() của kỹ thuật ajax. ta có cú pháp sau:

Cú pháp: get(url, params, callback)

Các tham số tương tự như phương thức load().

Ví dụ:

$(document).ready(function( ){
   $.get("result.php", {user: admin}, function(data){$("div#result").html(data);});
});
//Nội dung trong result.php
if(isset($_GET['user']))
{
 echo 'Bạn đã gửi dữ liệu của người dùng = '.$_POST['user'].' thành công';
}else{
 echo 'Không nhận được dữ liệu của người dùng nào';
}

Phương thức post()

Tương tự như phương thức get() của kỹ thuật ajax, phương thức post giúp bảo mật dữ liệu gửi đi tốt hơn. ta có cú pháp sau:

Cú pháp: post(url, params, callback)

Các tham số tương tự như phương thức load().

Ví dụ:

$(document).ready(function( ){
   $.post("result.php", {user: admin}, function(data){$("div#result").html(data);});
});
//Nội dung trong result.php
if(isset($_POST['user']))
{
 echo 'Bạn đã gửi dữ liệu của người dùng = '.$_POST['user'].' thành công';
}else{
 echo 'Không nhận được dữ liệu của người dùng nào';
}

Phương thức ajax()

Ngoài các phương thức trên, ajax() là một phương thức tổng quát phổ biến nhất để sử dụng tải dữ liệu bất động bộ. Phương thức này cho phép cấu hình và tùy chỉnh các thông số, không bị bó buột như các phương thức trên.

Cú pháp:

$.ajax({
  type: 'Loại gửi dữ liệu (POST hoặc GET)',
  url: 'URL Tiếp nhận, xử lý và gửi lại dữ liệu',
  data: { Các biến dữ liệu được gửi lên server.(ten_bien1:dữliệu,ten_bien2:dữliệu,...). Có thể sử dụng  var data = $('form#ID_form').serialize(); để lấy toàn bộ dữ liệu từ 1 form có id là ID_form},
  dataType: Kiểu dữ liệu trả về ('html','text','json','xml'),
  success: function(data) {
    Nội dung sẽ được thực thi sau khi nhận được dữ liệu từ server
  },
  error: function() {
    Nội dung sẽ được thực thi khi có lỗi phát sinh
  }
});

Mình sẻ có vụ dụ cụ thể trong phần dưới đây.

Cách sử dụng JQuery Ajax để tải dữ liệu

Đây là ví dụ về việc sử dụng JQuery với phương thức Ajax để tải dữ liệu về từ server.

Đầu tiên bạn mở tệp HTML và tạo một form đơn giản như sau.

<form class="form-horizontal" id="form_input">
   <input type="text" name="user">
   <button type="submit">Gửi</button>
 </form>

Trong thẻ <head> của tài liệu HTML bạn thêm thư viện Jquery mới nhất vào.

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

Tiếp theo là bạn bỏ đoạn JQuery Ajax này vào dưới trang.

<script type="text/javascript">
   $(document).ready(function()
   { 
      //khai báo biến submit form lấy đối tượng nút submit
      var submit = $("button[type='submit']");

      //khi nút submit được click
      submit.click(function()
      {
        //khai báo các biến dữ liệu gửi lên server
        var user = $("input[name='user']").val(); //lấy giá trị trong input user
 
        //Kiểm tra xem trường đã được nhập hay chưa
        if(user == ''){
          alert('Vui lòng nhập Tên người dùng');
          return false;
        }
 
        //Lấy toàn bộ dữ liệu trong Form
        var data = $('form#form_input').serialize();
      
        //Sử dụng phương thức Ajax.
        $.ajax({
              type : 'GET', //Sử dụng kiểu gửi dữ liệu POST
              url : 'data.php', //gửi dữ liệu sang trang data.php
              data : data, //dữ liệu sẽ được gửi
              success : function(data)  // Hàm thực thi khi nhận dữ liệu được từ server
                        { 
                           if(data == 'false') 
                           {
                             alert('Không có người dùng');
                           }else{
                             $('#content').html(data); dữ liệu HTML trả về sẽ được chèn vào trong thẻ có id content
                           }
                        }
              });
              return false;
        });
    });
</script>

Cuối cùng là nội dung xử lý trong file data.php

<?php 
  $user= trim($_POST['user']);
?>
 <p>Xin chào <?php echo $user; ?></p>

Blog tổng hợp những kinh nghiệm được học, áp dụng và chia sẻ

Đọc Tiếp

Input dạng color (mới)

Input dạng date (mới)

Input dạng datetime (mới)

Input dạng datetime-local (mới)

Input dạng email (mới)

Input dạng month (mới)

Input dạng number (mới)

Input dạng range (mới)

Input dạng search (mới)

Input dạng tell (mới)

Input dạng time (mới)

Input dạng url (mới)

Input dạng week (mới)

Input với thuộc tính max (mới)

Input với thuộc tính min (mới)

Input kết hợp 2 thuộc tính min và max (mới)

Input với thuộc tính placeholder (mới)

Input với thuộc tính required (mới)

Input với thuộc tính step (mới)

Input kết hợp với tag <datalist> (mới)

Input dạng text

Input dạng text - sử dụng maxlength

Input dạng text - sử dụng readonly

Input dạng password

Input dạng hidden

Input dạng checkbox

Input dạng checkbox - sử dụng checked

Input dạng checkbox - sử dụng disabled

Input dạng radio

Input dạng radio - sử dụng checked

Input dạng radio - sử dụng disabled

Input dạng button

Input dạng button reset

Input dạng button submit

Input dạng button image

Input dạng file upload

Label - input dạng text

Label - input dạng checkbox

Label - input dạng radio

rows - cols

disabled

readonly

SELECT - OPTION

select - option

select - sử dụng name

select - sử dụng disabled

select - sử dụng multiple

select - sử dụng size

option - sử dụng disabled

option - sử dụng label

option - sử dụng selected

option - sử dụng value

optgroup - sử dụng label

optgroup - sử dụng disabled

FIELDSET - LEGEND

Thuộc tính disabled="disabled"

Các phương thức trong Jquery

Phương thức load()

Phương thức get()

Phương thức post()

Phương thức ajax()

Cách sử dụng JQuery Ajax để tải dữ liệu

Bài Đăng Phổ Biến

Bài đăng nổi bật

Nhập Email

Labels

Tổng số lượt xem trang