Build a CRUD App with SQLAlchemy - Using AJAX to send data to flask (附代码)

A synchronous data request is very much like we did with an HTML form submission.

Using AJAX to send data asynchronously

• Data request are either synchronous or async (asynchronous)
• Async data requests are requests that get sent to the server and back to the client without a page refresh.
• Async requests (AJAX requests) use one of two methods:
  • XMLHttpRequest. That’s available natively on the window objects on the browser.
  • Fetch (modern way)

Using XMLHttpRequest

var xhttp = new XMLHttpRequest();


description = document.getElemenyById("description").value;





xhttp.open("GET", "/todos/create?description=" + description);


xhttp.send();

XMLHttpRequest on success
Traditionally with XMLHttpRequest, we would define a function that is set equal to the onreadystatechange property on your request object.

xhttp.onreadystatechange = function() {
	// this.readyState === 4, indicates that the operation on a server has already been completed.
	// this.status === 200, indicates that the response was a successful response as HTTP status code 200 means a successful response.
	if (this.readyState === 4 && this.status === 200) {
		// on successful response
		console.log(xhttp.responseText);
	}
}

Using fetch

• fetch is another window object that lets you send HTTP requests.
• fetch(,