As a qualified software tester, it is one of the necessary skills to be able to skillfully locate the bug location whether it belongs to the front end or the back end. So you need to understand how the data on the front and back ends interact.
First, website data processing is mainly divided into three layers
The first layer, the presentation layer, can be implemented with HTML code, CSS/Javascript code, etc. Through the front-end code can achieve the layout and design of the web page. This layer can also be called the display layer. That’s when you open a web page in your browser.
The second layer, the business layer, is responsible for processing the data. Common code languages are PHP,JSP, Java and so on. The algorithms of these background processing languages are used to process the data returned from the foreground. Perform operations on the database as necessary and return the results to the front-end web page.
The third layer, is the data layer, this is the database, used to store data. The operation of adding, deleting and modifying databases can be realized through the operation of the business layer. ① What you are exposed to is that the web page belongs to the presentation layer, and the web page is generally implemented by COMBINING HTML tags with CSS/JAVASCRIPT. You have to fill in the data first. ② Then you click commit to trigger the background processing mechanism, at which point the data is passed to the background code for processing. This part of the code depending on the site can make PHP,JSP, JAVA, etc. The code will process the received data according to the programmer’s preset algorithm and then operate the database and store the data accordingly. ③ After successfully operating the database, the code of the business layer will send an instruction back to the presentation layer, that is, the display side to inform you that the form has been filled in successfully.
2. Data interaction methods at the front and back ends
1. HTML assignment
2. JS assignment
3. Script fills JSON
4. AJAX fetch JSON
The first three data interaction methods are rarely used after AJAX json acquisition methods are widely used. Today we will take a look at AJAX json acquisition methods:
$.ajax({
Type: “POST”,//type is the ajax method
<%=path%>/ menus”,// what do I want to upload parameters to
Data: {parentid: parentid, parentpath: parentpath}, / / transfer data
Success: function(data){//sucess: function(data)
)}
Data interaction with Ajax is similar to the concept we use with interface testing tools, requesting get/ POST, URL addresses, and parameters that need to be passed, and then processing the returned response values.
Once you understand the principles of Ajax and know how to interact with the data on the front and back ends, you can quickly determine whether the data is being transferred from the front to the back.