An example sharing of front-end and back-end interaction

零下一度
Release: 2023-03-10 18:54:02
Original
3448 people have browsed it

This week, under the guidance of the master, Ben K completed a small example of a message board function that combines ajax and php file upload processing. Now let Ben K Let me show you how to implement this function.

1. Interface Overview

First, let’s take a look at the specific effect of this small demo.

This demo mainly includes three steps, which also correspond to three functions, namelyRegistration, login and message boardFunction. These three functions basically rely on several front-end and back-end interaction technologies. Below, I will show you the codes for implementing these three functions.

2. Function implementation

1. Registration function and login function

1.1 Code display

1.1.1 Registration function

(1) Front part

用户注册
用户注册
Copy after login

(2)Backend part

0){echo "true"; }else{echo "false"; }
Copy after login

(3) User data storage file

userName=123&pwd=123&rePwd=123[;]// 这其实是一个普通的txt文件,就是后台部分的user.txt
Copy after login

1.1.2 Login function

(1) Front-end part

用户登录
用户登录
Copy after login

(2)Backend part


         
Copy after login

1.2 Function details

Implementation of user registration and login functions There are three main dependencies, namely, ajax transmits data to the background and accepts the results, the php background processes the data sent by ajax and feeds back the results, and receives and stores user data (this can actually be turned into the background processing part).

1.2.1 Front-end details

The main task of the front-end part is to receive information from users and transmit it to the background. The implementation of this part of the task mainly relies on two lines of code.

First, let’s take a look at how the ajax request is implemented. The implementation of this part of the function mainly relies on two lines of code.

The first line of code isvar str = $("form").serialize();The function of this line is to sequence the data submitted in the form into a string, the specific implementation is as shown below

The submitted data in the form is serialized so that the background can better parse this part.

The other key line of code is the main part of theajax request. This part is mainly difficult to understand and is the accepteddata parameters. The data parameter is a piece of information that the background feeds back to the front desk after the corresponding background processing of the ajax request is completed, such as true returned after successful registration and false returned after failure.

1.2.2 Backend details

The key to the background processing of data transmitted from the front end lies in how to obtain and parse the data transmitted. In this part, PHP provides us with three lines of code to implement.

The first line of code:$str = $_POST["formData"];Get the front-end transmission through the super global array $_POST The serialized string solves the data acquisition part.

The second line of code:file_put_contents("user.txt", $str,FILE_APPEND);PHP provides us with file_putt_contents(), so that we can The data we obtain is stored in a file for long-term retention.

The third line of code:file_get_contents("user.txt");This is the data extraction method provided by PHP corresponding to file_putt_contents().

Relying on the above three lines of code, coupled with our processing of data analysis, we can easily implement the entire function in the background.

2. Message function

2.1 Code display

(1) Front-end part



留言内容


Copy after login

(2)Backend part

// 笔记的添加$userName,"time"=>$time,"noteVal"=>$noteVal]; $str = json_encode($arr); $num = file_put_contents("note.txt", $str."[;]",FILE_APPEND); if($num>0){echo "true"; }else{echo "false"; }
Copy after login
// 笔记的展示
         
Copy after login

(3)Message data storage file

// 这也是一个用于存储留言内容等各种信息的TXT文件{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:12","noteVal":"123123"}[;]{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:28","noteVal":"\u54c8\u54c8\u54c8\uff0c\u6211\u662f\u5c0fK\uff0c\u6211\u4e3a\u81ea\u5df1\u4ee3\u8a00\u3002"}[;]
Copy after login

2.2 Function details

2.1.1 Front-end part

The function of the front-end part is the same as the login and registration function, except that it adds the current date according to the requirements. , user name data, message board style acquisition.

2.1.2 Backend part

The backend part is actually the same routine as the backend implementation of login and registration, but it is one step more than the two.json_encode($arr);This is the method provided by PHP to convert arrays into JSON object format, which makes it easier for us to leave messages on the front end. Data feedback acquisition.

The above is the small function demo that this K brings to you for the first time this week. I hope it can help you. If there are any mistakes, please correct me. Thank you for your support!

The above is the detailed content of An example sharing of front-end and back-end interaction. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!