向後端請求數據 以及像後端發送數據要求（刪除數據和添加數據）
阿新 • • 發佈：2017-05-31
doc content request 使用 style except 刪除數據庫 cal data
刪除數據和添加數據只能後端操作
刪除數據和添加數據都要用到的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部分
<?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];
}
//無論做什麽操作都要重新連接數據庫
/*設置數據庫的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();
}
向後端請求數據 以及像後端發送數據要求（刪除數據和添加數據）