Hướng dẫn dùng Jquery Ajax submit form và gọi REST API

I. Khái niệm

• AJAX đại diện cho Asynchronous JavaScript And XML bằng cách sử dụng đối tượng XMLHttpRequest để tương tác với máy chủ (server).
• AJAX có thể nhận và gửi thông tin với nhiều định dạng khác nhau, như: JSON, XML, HTML, text & file.
• Từ “asynchronous” có thể hiểu là khi tương tác với server: thêm – sửa – xoá – lấy dữ liệu trên một trang mà không cần phải tải lại trang (refresh F5).
• Tính năng chính của AJAX:
  • Tạo yêu cầu đến máy chủ mà ko cần tải lại(reload) trang.
  • Nhận và thao tác với dữ liệu sau khi nhận được.

II. Thư viện

• Mình sẽ dùng thư viện viết trên Javascript, Jquery.
• Link tải: https://jquery.com/
• Phiên bản mới nhất v3.7.0 tính đến 5/2023.
• CDN: https://releases.jquery.com/ , nên chọn bản minified.
• Hướng dẫn dụng: http://api.jquery.com/
• Dùng hàm .ajax() để tạo http request.
• Ngoài ra jquery còn hỗ trợ thao tác thuộc tính element, css, data,…

III. Mock REST api online

• Là một trang web có api có sẵn GET, POST, PUT, DELETE
• Link: https://reqres.in/

IV. Triển khai

• Kiến thức cần chuẩn bị:
  • Url, HTML element, content type, http request
  • Browser dev tool
  • JavaScript cơ bản: thao táo với element
  • Postman: mô phỏng cách gửi request HTML
  • Cấu trúc json
  • Tiếng anh đọc hiểu tài liệu cơ bản
• Dùng AJAX, import Jquery cdn

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"> </script> <script> $(document).ready(function () { // code sự kiện element & ajax }); </script>

Form 1: HTML form submit

1. HTML

Form method chỉ áp dụng được post/get, không phân biệt chữ hoa, chữ thường

Giao diện	Code
	<form action="/register" method="post" id="myForm"> <label>Full Name</label> <input type="text" name="fullName" /> <br> <label>Email</label> <input type="email" name="email" /> <br> <label>Mobile Phone</label> <input type="url" name="mobilePhone" /> <br> <input type="submit" name="submit" value="Submit Form" /> </form> <div id="results"> <!-- For server results --> </div>

2. Code JS

Gửi AJAX request: bắt sự kiện submit form.ajax()

$("#myForm").submit(function(event){ event.preventDefault(); //loại bỏ sự kiện của form đó var postUrl = $(this).attr("action"); //lấy thuộc tính action form var method = $(this).attr("method"); // GET/POST method var formData = $(this).serialize(); //Encode form elements để gửi lên máy chủ $.ajax({ url : postUrl, type: method,   data : formData }).done(function(response){ // $("#results").html(response); }); });

.post()

$("#myForm").submit(function(event){ event.preventDefault(); var postUrl = $(this).attr("action"); var formData = $(this).serialize(); $.post( postUrl, formData, function( response ) { $("#results").html( response ); }); });

.get()

$("#myForm").submit(function(event){ event.preventDefault(); var postUrl = $(this).attr("action"); var formData = $(this).serialize(); $.get( postUrl, formData, function( response ) { $("#results").html( response ); }); });

.getJSON()

$("#myForm").submit(function(event){ event.preventDefault(); var postUrl = $(this).attr("action"); var formData = $(this).serialize(); $.getJSON( postUrl , formData,function( response ) { //iterate json response $.each( response, function(key, val) { $("#results").append( val + "<br />"); //append results to element }); }); });

serialize(): chuyển đổi thành phần form input thành query string đề gửi lên server

Form 2: Multipart/form-data form submit

1. HTML

Giao diện

Code

<form action="/register" method="post" id="myForm"> <label>Full Name</label> <input type="text" name="fullName" /> <br> <label>Email</label> <input type="email" name="email" /> <br> <label>Mobile Phone</label> <input type="url" name="mobilePhone" /> <br> <label>Photo</label> <input type="file" name="my_file" /> <br> <input type="submit" name="submit" value="Submit Form" /> </form> <div id="server-results"> <!-- For server results --> </div>

2. Code JS

$("#myForm").submit(function(event){ event.preventDefault(); let postUrl = $(this).attr("action"); let formData = new FormData(this); //Creates new FormData object $.ajax({     url : postUrl,     type: 'POST',     data : formData,     contentType: false,     cache: false,     processData:false }).done(function(response){ //     $("#results").html(response); }); });

contentType: false -> loại form multipart/form-data

processData: false -> không cho jquery serialize FormData

Form 3: Serialize form and convert input to json

1. HTML

Giao diện

Code

<form action="/register" method="post" id="myForm"> <label>Full Name</label> <input type="text" name="fullName"/> <br> <label>Email</label> <input type="email" name="email"/> <br> <label>Mobile Phone</label> <input type="url" name="mobilePhone"/> <br> <label>Address</label> <input type="text" name="address"/> <br> <label>Tel</label> <input type="tel" name="tel"/> <br> <label>Birth Day</label> <input type="date" name="birthDay"/> <br> <button type="button" id=”regist” >Register</button> </form> <div id="server-results"> <!-- For server results --> </div>

2. Code JS

• Lần này các elements mình sẽ dùng id cho nút Register
• JQuery bắt sự kiện ấn nút Register
• Các bước chuyển:
  • Serialize from -> query string
  • Chuyển về dạng url search params
  • Chuyển về dạng object
  • Chuyển object về Json

$("#register").click(function (e) { let formData = $("#myForm"); let jsonObject = Object.fromEntries(new URLSearchParams($(formData).serialize())); $.ajax({     url: formData.attr("action"),     type: 'POST',     data: JSON.stringify(jsonObject),     contentType: "application/json; charset=utf-8",     processData: false,     success: function (response) {         $("#result").html(response);     },     error: function (XMLHttpRequest, textStatus, errorThrown) {         console.log(errorThrown);     } }) });

Đẩy request dạng postContent type: application/jsondữ liệu nằm trong body của request

Form 4: Gọi GET request REST api  reqres.in dùng AJAX

• Api: https://reqres.in/api/users?page=2
• Gửi AJAX GET request và in kết quả ra console log
• Bắt sự kiện ấn nút GET USERS

1. HTML

Giao diện	Code
	<div id="server-results">    <button id="getUser"> GET USERS</button> </div>

2. Code  JS

$("#getUser").click(function (e) {    $.ajax({        url: 'https://reqres.in/api/users?page=2',        type: 'GET',        contentType: "application/json; charset=utf-8",        processData: false,        success: function (response) {            console.log(response);        },        error: function (XMLHttpRequest, textStatus, errorThrown) {            console.log(errorThrown);        }    }) });

Kết quả

Form 5: Gọi POST request REST api  reqres.in dùng ajax

• Api link: https://reqres.in/api/users
• Gửi AJAX POST request và in kết quả ra console log
• Bắt sự kiện ấn nút CREATE USER

Body	Response
{     "name": "morpheus",     "job": "leader" }	{     "name": "morpheus",     "job": "leader",     "id": "953",     "createdAt": "2023-05-16T09:23:05.481Z" }

1. HTML

Giao diện	Code
	<div id="server-results">    <button id="createUser"> CREATE USER</button> </div>

2. Code JS

$("#createUser").click(function (e) {    let user = {        name: "morpheus",        job: "doctor"    }       $.ajax({        url: 'https://reqres.in/api/users',        type: 'POST',        contentType: "application/json; charset=utf-8",        data: JSON.stringify(user),        processData: false,        success: function (response) {            console.log(response);        },        error: function (XMLHttpRequest, textStatus, errorThrown) {            console.log(errorThrown);        }    }) });

Browser network

Kết quả

V. Tổng hợp

• Thực hiện các ví dụ trên ta thấy rằng ajax gửi 1 yêu cầu đến server mà không cần tải lại trang.
• Đối với một trang lớn, việc tải lại trang khi lấy dữ liệu hiển thị sẽ tốn thời gian tải trang và giảm trải nghiệm người dùng.
• Code Jquery giống với code Javascript(JS) vì nó là thư viện dành cho JS. Thao tác dễ dàng và dễ thuộc.
• Thư viện Jquery còn có các module hỗ trợ về UI.
• Jquery AJAX chỉ là cách gửi các yêu cần từ client tới server, ngoài ra JS còn một số cách nữa.
• Phần tới sẽ có một server để hứng các yêu cầu của ajax, dùng Spring Frameworks.

Trần Mạnh Chung