首页 > 代码库 > 向后端请求数据 以及像后端发送数据要求（删除数据和添加数据）
向后端请求数据 以及像后端发送数据要求（删除数据和添加数据）
删除数据和添加数据只能后端操作
删除数据和添加数据都要用到的html（一）部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/bootstrap.min.css">
</head>
<body>
<div class="btn-group pull-right">
<a href="http://www.mamicode.com/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=http://www.mamicode.com/JSON.parse(xhr.responseText) ;
// var data=http://www.mamicode.com/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="http://www.mamicode.com/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=http://www.mamicode.com/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=http://www.mamicode.com/$result->fetchAll(PDO::FETCH_ASSOC);
var_dump($data);
}catch (PDOException $e){
echo "链接失败:".$e->getMessage();
}
向后端请求数据 以及像后端发送数据要求（删除数据和添加数据）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。