向后端请求数据 以及像后端发送数据要求（删除数据和添加数据）
删除数据和添加数据只能后端操作
删除数据和添加数据都要用到的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>
function getdata() {
//获取后端学生信息数据
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><a href="edit.html?id='+data[i].id+'" class="btn btn-warning">修改</a></td>\
</tr>'
}
document.getElementsByTagName("tbody")[0].innerHTML=tpl;
}
};
}
getdata();
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==200){
console.log(xhr.responseText);
alert("删除成功");
//刷新页面
//location.reload()
getdata();
}
}
}
</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部分
<?php
header("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];
}
/*$name=$_REQUEST['name'];//无论哪一种方式都能接受
$age=$_REQUEST['age'];*/
//无论做什么操作都要重新连接数据库
/*设置数据库的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 "修改成功";
echo "<script> alert('修改成功');location.href='pdo.html'</script>";
}
二、删除后台数据；
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();
}
三 、修改数据
mtml部分
1.html(一)部分
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-1.10.2.min.js"></script>
</head>
<body>
<form class="form-horizontal" action="edit.php" name="form" method="post">
<input type="hidden" id="id" name="id">
<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>
<script>
// 获取地址栏参数
function GetQueryString(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
var id= GetQueryString('id');
// alert(id);
$.ajax({
url:'findById.php',
type:'post',
data:{'myid':id},
success:function (data) {
var data=JSON.parse(data) ;
console.log(data.data[0]);
// 把要修改的数据复制到input 框里
$("#name").val(data.data[0].name);
$("#age").val(data.data[0].age);
$("#id").val(data.data[0].id);
}
})
</script>
</html>
php部分
1.
<?php
header("Content-type:text/html; charset=utf-8");
$id=$_REQUEST['myid'];
//$id=$_REQUEST('myid');
/*设置数据库的DSN信息（数据库主机名:端口名，用户名，密码）*/
$dsn= 'mysql:host=localhost;dbname=my_second_db;charset=utf8';
/*开始连接*/
try{
$pdo= new PDO($dsn,'root','123456');
/* 执行SQL语句*/
$sql="select * from student where id=".$id;
/*获取执行查询数据后的结果，但是不能使用*/
$result=$pdo->query($sql);
//解析成关联数组
$reply=$result->fetchAll(PDO::FETCH_ASSOC);
$data['data']=$reply;
$data['status']=1;
// var_dump($data);
echo json_encode($data);
}catch (PDOException $e){
echo "链接失败:".$e->getMessage();
}
php部分2
<?php
header("Content-type:text/html; charset=utf-8");
/**
* Created by PhpStorm.
* User: 12248
* Date: 2017/5/31
* Time: 17:04
*/
$data=array();
$fileds=array('id','name','age');
foreach ($fileds as $v){
$data[$v]=$_REQUEST[$v];
}
/*$name=$_REQUEST['name'];//无论哪一种方式都能接受
$age=$_REQUEST['age'];*/
//无论做什么操作都要重新连接数据库
/*设置数据库的DSN信息（数据库主机名:端口名，用户名，密码）*/
$dsn= 'mysql:host=localhost;dbname=my_second_db;charset=utf8';
/*开始连接*/
$pdo= new PDO($dsn,'root','123456');
echo "数据库连接成功";
/* 执行SQL语句*/
$sql="update student set name=:name ,age=:age where id=:id ";
$stmt=$pdo->prepare($sql);
/*获取执行查询数据后的结果，但是不能使用*/
if($stmt->execute($data)){
// echo "添加成功";
echo "<script> alert('修改成功');location.href='pdo.html'</script>";
}
