删除数据和添加数据只能后端操作
删除数据和添加数据都要用到的html（一）部分
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/bootstrap.min.css"></head><body> <div class="btn-group pull-right"> <a href="form.html" target="_top"><button class="btn btn-info">添加</button></a> </div> <table class="table table-bordered"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead>
<tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody>
</table>
<script> //获取后端学生信息数据 var xhr=new XMLHttpRequest(); xhr.open("get","getDate.php",true); xhr.send(null); xhr.onreadystatechange=function () { if(xhr.readyState==4&&xhr.status==200){ // console.log(xhr.responseText); var data=JSON.parse(xhr.responseText) ; // var data=eval(xhr.responseText); console.log(data); var tpl=‘‘; for(var i=0;i<data.length;i++){ tpl+=‘ <tr>\ <td>‘+data[i].id+‘</td>\ <td>‘+data[i].name+‘</td>\ <td>‘+data[i].age+‘</td>\ <td><button class="btn btn-danger" onclick="del(‘+data[i].id+‘)">删除</button></td>\ </tr>‘ } document.getElementsByTagName("tbody")[0].innerHTML=tpl;
} }; //删除 后台数据要用到的 function del(id) { //发送数据 // post方式 var xhr=new XMLHttpRequest(); xhr.open("post","delete.php",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("id="+id); xhr.onreadystatechange=function () { if(xhr.readyState==4&&xhr.status==2){ console.log(xhr.responseText); alert("删除") } }
} </script></body></html>
一添加后台数据
html部分
上面html(一)部分
和下面一个用来添加数据的表单 （注意表单中action="操作的php路径" ，method, name 一定要写 button为submit形式）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/bootstrap.min.css"></head><body><form class="form-horizontal" action="../向后端请求数据%20以及像后端发送数据要求（删除数据库和添加数据）/add.php" name="form" method="post"> <div class="form-group" > <label for="name" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" placeholder="请输入姓名" name="name"> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">年龄</label> <div class="col-sm-10"> <input type="text" class="form-control" id="age" placeholder="请输入年龄" name="age"> </div> </div> <button type="submit">提交</button></form> </body></html>
添加后台数据php部分
<?phpheader("Content-type:text/html; charset=utf-8");/** * Created by PhpStorm. * User: 12248 * Date: 2017/5/31 * Time: 17:04 */$data=array();$fileds=array(‘name‘,‘age‘);foreach ($fileds as $v){ $data[$v]=$_REQUEST[$v];}
//无论做什么操作都要重新连接数据库/*设置数据库的DSN信息（数据库主机名:端口名，用户名，密码）*/$dsn= ‘mysql:host=localhost;dbname=my_second_db;charset=utf8‘;/*开始连接*/
$pdo= new PDO($dsn,‘root‘,‘123456‘); echo "数据库连接成功"; /* 执行SQL语句*/ $sql="insert into student (name,age) values(:name,:age)"; $stmt=$pdo->prepare($sql); /*获取执行查询数据后的结果，但是不能使用*/ if($stmt->execute($data)){ echo "添加成功"; }
二、删除后台数据；
html部分（上面html(一)）
删除后台数据php部分；
<?php
//删除的后端代码//$id=$_GET[‘id‘]; //接受get方式发送的数据//$id=$_POST[‘id‘];//接受post方式发送的数据$id=$_REQUEST[‘id‘];//无论哪一种方式都能接受var_dump($id); //无论做什么操作都要重新连接数据库/*设置数据库的DSN信息（数据库主机名:端口名，用户名，密码）*/$dsn= ‘mysql:host=localhost;dbname=my_second_db;charset=utf8‘;/*开始连接*/try{ $pdo= new PDO($dsn,‘root‘,‘123456‘); echo "数据库连接成功"; /* 执行SQL语句*/ $sql="delete from student where id=".$id; /*获取执行查询数据后的结果，但是不能使用*/ $result=$pdo->query($sql);//解析成关联数组 $data=$result->fetchAll(PDO::FETCH_ASSOC); var_dump($data);
}catch (PDOException $e){ echo "链接失败:".$e->getMessage();}
时间： 2024-12-15 01:52:40