PHP interface and front-end data interaction implementation sample code-PHP Tutorial-php.cn

This article mainly introduces the sample code for php interface and front-end data interaction. It mainly uses php bootstrap-table js, which has certain reference value. If you are interested, you can learn about what

is doing recently. The attempt to interact with front-end and back-end data also jumped a lot of pitfalls. I used php bootstrap-table js and recorded some gains here for easy query.

This small project has only 3 files, namely:

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

Data interaction implementation 1: Query

1.mysql database table creation
2.php query interface
3.Front-end data display

mysql database table creation

Database name: crud
First table name: t_users
Primary key: user_id, auto-increment order

php:

fetch_assoc()){ $data[] = $row; } $json = json_encode(array( "resultCode"=>200, "message"=>"查询成功！", "data"=>$data ),JSON_UNESCAPED_UNICODE); //转换成字符串JSON echo($json); } /**查询服务器中的数据 * 1、连接数据库,参数分别为 服务器地址 / 用户名 / 密码 / 数据库名称 * 2、返回一个包含参数列表的数组 * 3、遍历$sqls这个数组，并把返回的值赋值给 $s * 4、执行一条mysql的查询语句 * 5、关闭数据库 * 6、返回执行后的数据 */ 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; } ?>

Copy after login

Front-end implementation:

增删改查

Copy after login

Implementation effect:

Data interaction implementation 2: Delete

I encountered a lot of pitfalls when deleting. The reason is that I am not familiar with SQL statements and not familiar with PHP. However, I have summarized the following points for reference:

1.delete The returned parameters can only be obtained using $_GET;

2.delete The returned parameters must be placed in the URL, not in the body; the parameters in the body are used Query;

3. SQL statements must be proficient, one wrong step will lead to wrong step;

4. To execute SQL statements in the database to check whether the statements are executed correctly, use Rest Client to test Whether the URL request is correct;

php:

Copy after login

Front-end implementation JS part:

var $table = $('#table'), $remove = $('#remove'); $(function() { delData(); }); function delData() { $remove.on('click', function() { if(confirm("是否继续删除")) { var rows = $.map($table.bootstrapTable('getSelections'), function(row) { //返回选中的行的索引号 return row.user_id; }); } $.map($table.bootstrapTable('getSelections'),function(row){ var del_url = "./php/data.php"; //根据userId删除数据,因为这个id就是 传给服务器的参数 var rowId = 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('remove',{ field: 'user_id', values: rows }); $remove.prop('disabled', true); }, error:function(data){ alert('删除失败！'); } }); }); }) }

Copy after login

Debugging method:

##Data interaction implementation 3: Newly added

In terms of the method of writing PHP, I think there is a problem with my method, because all parameters, that is, all data that needs to be added, are passed through the interface? The method followed by parameters is added successfully. The function can be implemented, but if the newly added data is large, this method is not feasible, but a suitable method has not been found yet. Please give me some advice.

php:

query($s); } $mysqli->close(); return $query; } ?>

Copy after login

Front-end implementation JS part:

html uses bootstrap modal as a pop-up when adding Box

Copy after login

var $table = $('#table'), $remove = $('#remove'); $(function() { searchData(); delData(); $('#save').click(function(){ addData(); }); }); function addData(){ var userName = $('#userName').val(); var userAge = $("#userAge").val(); var userSex = $('#user-sex').val() == '0' ? '男' : '女'; 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"); //添加成功后隐蒧modal框 setTimeout(function(){ $('#exampleModal').modal('hide'); },500); 　　　　　　　　　　　　　　//隐藏modal框后重新加载当前页 setTimeout(function(){ searchData(); },700); } }); }

Copy after login

So far, the following problems have not been solved:

1. Form verification;

2. After adding multiple pieces of data, how does php receive parameters;

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

Related recommendations:

How PHP interacts with js data

The above is the detailed content of PHP interface and front-end data interaction implementation sample code. For more information, please follow other related articles on the PHP Chinese website!