Lấy dữ liệu từ bằng html bằng jquery

AJAX là một phần trong thư viện JQuery, viết tắt của câu Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ). 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. Trong bài viết này mình sẽ chia sẻ về JQuery Ajax và cách sử dụng JQuery Ajax để tải dữ liệu.



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

$(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';
}

0 của kỹ thuật ajax. ta có cú pháp sau:

Cú pháp: 

$(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';
}

1

• 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

$(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';
}

0 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: 

$(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';
}

3

• Các tham số tương tự như phương thức

  $(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';
  }

  4.

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,

$(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';
}

5 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.

Ví dụ sau mô tả cách lấy dữ liệu với phương thức text() và html(). Dữ liệu sẽ hiển thị theo kiểu văn bản hoặc là kiểu kèm theo mã HTML.

Đây là chữ in đậm trong câu --- dammio.com

Hiển thị văn bản
Hiển thị mã HTML

Ví dụ sau mô tả cách hiển thị văn bản nhập từ 1 text input.

Tên: 

Hiển thị giá trị

Lấy các thuộc tính – attr()
Phương thức attr() được dùng để lấy các giá trị thuộc tính. Ví dụ sau lấy giá trị của thuộc tính href của 1 liên kết.

http://www.dammio.com

Hiển thị đường dẫn http://www.dammio.com

Kết luận: Bài viết đã trình bày cách lấy nội dung và các thuộc tính bằng cách dùng các phương thức trong jQuery.