Php interface and front-end data interaction implementation sample code, front-end sample code

Php interface and front-end data interaction implementation sample code, front-end sample code

Recent attempts to interact with frontend and backend data have also encountered many pitfalls. php + bootstrap-table + js is used to record some gains and facilitate query.

This small project has only three files:

1.crud.html
2. data. php
3. crud. SQL

Data Interaction Implementation 1: Query

1. Create a table in the mysql database
2. php query interface
3. Front-end data presentation

Create a table in a mysql database

• Database Name: crud
• First table name: t_users
• Primary Key: user_id, auto-incrementing

Php:

<? Php // test whether php can obtain data in the database/* echo "44444 "; * // make a route. action is the $ action =$ _ GET ['action'] parameter in the url. switch ($ action) {case 'init _ data_list ': init_data_list (); break; case 'add _ row': add_row (); break; case 'del _ row': del_row (); break; case 'edit _ row': edit_row (); break;} // query method function init_data_list () {// test whether the following string can be obtained when running crud.html/* echo "46545465465456465 "; * // query the table $ SQL = "SELECT * FROM 't_ users '"; $ Query = query_ SQL ($ SQL); while ($ row = $ query-> fetch_assoc () {$ data [] = $ row ;} $ json = json_encode (array ("resultCode" => 200, "message" => "query successful! "," Data "=> $ data), JSON_UNESCAPED_UNICODE); // converts the string to JSON echo ($ json);}/** query server data * 1. Connect to the database, the parameters are server address/user name/password/database name * 2. An array containing the parameter list * 3. traverse the $ sqls array, assign the returned value to $ s * 4. Execute a mysql query statement * 5. Close the database * 6. Return the executed data */function query_ SQL () {$ mysqli = new mysqli ("127.0.0.1", "root", "root", "crud"); $ sqls = func_get_args (); foreach ($ sqls as $ s) {$ query = $ mysqli-> query ($ s) ;}$ mysqli-> close (); return $ Query ;}?>

Front-end implementation:

<! DOCTYPE html> 
Effect:

Data Interaction implementation 2: Delete
There were a lot of pitfalls encountered during deletion because I was unfamiliar with SQL statements and php. However, I summarized the following points for your reference:
1. The parameters returned by delete can only be obtained using $ _ GET;
2. The parameters returned by the delete operation must be placed in the URL and not in the body. The parameters in the body are used for query;
3. Be familiar with SQL statements;
4. Run the SQL statement in the database to check whether the statement is correctly executed. Use the Rest Client to test whether the URL request is correct;
Php:
<? Php // test whether php can obtain data in the database/* echo "44444 "; * // make a route. action is the $ action =$ _ GET ['action'] parameter in the url. switch ($ action) {case 'init _ data_list ': init_data_list (); break; case 'add _ row': add_row (); break; case 'del _ row': del_row (); break; case 'edit _ row': edit_row (); break;} // deletion method function del_row () {// test/* echo "OK! "; * // The $ rowId = $ _ GET ['rowid']; $ SQL =" delete from t_users where user_id = '$ rowid '"; if (query_ SQL ($ SQL) {echo "OK! ";} Else {echo" deletion failed! ";}}?>
JS implementation at the front end:
Var $ table = $ ('# table'), $ remove = $ (' # delete'); $ (function () {delData () ;}); function delData () {$ remove. on ('click', function () {if (confirm ("continue to delete") {var rows = $. map ($ table. bootstrapTable ('getselection'), function (row) {// return the index number of the selected row return row. user_id;}) ;}$. map ($ table. bootstrapTable ('getselection'), function (row) {var del_url = ". /php/data. php "; // delete data based on userId, because this id is the parameter var row passed to the server Id = row. user_id; $. ajax ({type: "delete", url: del_url + "? Action = del_row & rowId = "+ rowId, dataType:" html ", contentType: 'application/json; charset = UTF-8 ', success: function (data) {$ table. bootstrapTable ('delete', {field: 'user _ id', values: rows}); $ remove. prop ('Disabled ', true) ;}, error: function (data) {alert ('deletion failed! ');}});});})}
Debugging method:



Data Interaction Implementation 3: New
In terms of writing php methods, I think there is a problem with my method, because all the parameters, that is, all the data that needs to be added, are passed through the interface? Followed by parameters. The function can be implemented, but if the newly added data is large, this method is not feasible, but no proper method has been found. Please kindly advise.
Php:
<? Php // test whether php can obtain data in the database/* echo "44444 "; * // make a route. action is the $ action =$ _ GET ['action'] parameter in the url. switch ($ action) {case 'init _ data_list ': init_data_list (); break; case 'add _ row': add_row (); break; case 'del _ row': del_row (); break; case 'edit _ row': edit_row (); break;} // new method function add_row () {/* GET data transmitted from the client */$ userName = $ _ GET ['user _ name']; $ userAge = $ _ GET ['user _ age']; $ userSex = $ _ GET ['user _ sex']; // Insert into Table Name (column name 1, column name 2 ,...) VALUES ('corresponding data 1', 'corresponding data 2 ',...) // The value of VALUES is a string because the table attribute is set to string $ SQL = "INSERT INTO t_users (user_name, user_age, user_sex) VALUES ('$ username',' $ userage ', '$ userSex') "; if (query_ SQL ($ SQL) {echo" OK! ";} Else {echo" added successfully! ";}} Function query_ SQL () {$ mysqli = new mysqli (" 127.0.0.1 "," root "," root "," crud "); $ sqls = func_get_args (); foreach ($ sqls as $ s) {$ query = $ mysqli-> query ($ s) ;}$ mysqli-> close (); return $ query ;}?>
JS implementation at the front end:
Html uses the bootstrap modal as the pop-up box when adding
<! -- New bullet box --> <div class = "modal fade" id = "exampleModal" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLabel"> <div class = "modal-dialog" role = "document"> <div class = "modal-content"> <div class = "modal-header"> <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close"> <span aria-hidden = "true"> × </span> </button> 

Var $ table = $ ('# table'), $ remove = $ (' # delete'); $ (function () {searchData (); delData (); $ ('# save '). click (function () {addData () ;}); function addData () {var userName =$ ('# username '). val (); var userAge = $ ("# userAge "). val (); var userSex = $ ('# user-sex '). val () = '0 '? 'Male': 'female '; var addUrl = "./php/data. php? Action = add_row & user_name = "+ userName +" & user_age = "+ userAge +" & user_sex = "+ userSex; $. ajax ({type: "post", url: addUrl, dataType: 'json', contentType: 'application/json; charset = UTF-8 ', success: function (data) {console. log ("success") ;}, error: function (data) {console. log ("data"); // after successful addition, the modal box setTimeout (function () {$ ('# examplemodal') is hidden '). modal ('hide ') ;}, 500); // hide the modal box and reload the current page setTimeout (function () {searchData ();}, 700 );}});}
At this point, the following issues have not been solved:

1. form verification;

2. How does php receive parameters after adding multiple data entries;

3. After successful addition, in the $. ajax method, why should other operations after successful addition be implemented in the error object? Instead of implementing it in sucess?

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.