欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  后端开发

html 与php+MySQL完成前后端交互

程序员文章站 2022-03-25 20:45:10
...
1.php连接数据库与基本操作配置
(1)php创建数据库【连接】（相关mysql视频教程推荐：《mysql教程》）
语法：Object mysqli_connect("域名","DB账号","DB密码","DB库名")
例子：$con = mysqli_connect('localhost','root','','frankdb');

(2)向DB中插入数据时包含中文出现乱码的解决方案
语法：

mysqli_query($con,"set names utf8");

说明：设置成功会返回1，根据实际情况并不一定必须保存返回结果。
(3)设置client端和server端保持字符编码一致
语法：

mysqli_query($con,"set character_set_client=utf8");
    mysqli_query($con,"set character_set_results=utf8");

(4)执行sql语句

语法：$结果 = $DB连接->query(sql语句);
例子：var_dump($result = $con->query($sql));

2.使用sql语句基本【模板】
a.建立连接
b.判断是否连接
c.设置编码
d.创建sql语句
e执行结果条数
g.拼凑结果
h.json化返回

<?php
//a.sql 查询语句
无条件查询，即直接写1即可
//$sql='select * from 哪张表 where 条件'；
有条件查询，在where后面写出查询条件，如果多个条件需要用and 或or 来连接。
//$sql="select stuName from stud  where stuScore='100' and stuGender='female'";
//$sql="select stuName from stud  where stuScore='100' or stuGender='female'";
        $con=mysqli_connect('localhost','root','','studb')
        
         if($con){
               echo'<pre>';
               echo'数据库连接成功，等待指令...';
               mysqli_query($con,'set  names utf8');
               mysqli_query($con,'set  character_set_client=utf8');
               mysqli_query($con,'set  character_set_results=utf8');
               $sql="select * from stud where 1";
               $result=$con->query($sql);
               if($result>num_rows>0){
                         $info=[];
                   for($i=0;$row=$result->fet_assoc();$i++){
                                   $info[$i]=$row;
                     }
                     echo json_encode($info);
                  }
               }else{
                    echo'<pre>';
                    echo'数据连接失败，请重新连接‘；
              }

b.插入语句（添加语句）
两种写法：

(1)$sql="insert into 表名（字段1，字段2，...)  values(值1，值2，...)";
(2)$sql='insert into 表名（'值1’,'值2',...)";
 $con=mysqli_connect('localhost','root','','studb');
                 if($icon){
                        echo'<pre>';
                        echo'数据库连接成功，等待指令...';
                        mysqli_query($con, 'set names utf8');
                        mysqli_query($con, 'set character_set_client=utf8');
                        mysqli_query($con, 'set character_set_result=utf8');
                        
                        $sql="insert into  stud  stuName,stuGender,stuAge,stuNum,stuScore)values('lucy','female','14','123456789','90')";
                        $sql="insert into  stud  values('lucy','female','14','123456789','90')";
                        $result=$con->query($sql);
                            if($result){
                               echo'添加成功';
                           }else｛
                               echo'添加失败';
                         }

c.修改语句（更新语句）update

$sql="update  表名 set 字段1=‘新值1’，字段2=‘新值2’，... where  条件“；
$con=mysqli_connect('localhost','root','','studb');
   if($con){
                      
echo "<pre>";
                echo "数据库连接成功，等待指令...";
                        mysqli_query($con, 'set names utf8');
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');
$sql="update  stud  set  stuScore='100' where stuName='lily'";
$result=$con->query($sql);
var_dump($result);
  }else{
        echo "数据库连接失败！！！";
}

d. 删除语句delete

$sql="delete from 表名 where 条件“；
             $con=mysqli_connect('localhost','toot','';'studb' );
                        if($con){
echo "<pre>";
echo "数据库连接成功，等待指令...";
//
mysqli_query($con, 'set names utf8');
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');
//
$sql = "delete from stud where stuName='lucy'";
$result = $con->query($sql);
var_dump($result);
}else{
echo "数据库连接失败！！！";
}
 
   ?>                      
                         
                         
                ajax & php
                         
         <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>姓名：</span><input type="text" class="stuName"><br/>
<span>性别：</span><input type="text" class="stuGender"><br/>
<span>年龄：</span><input type="text" class="stuAge"><br/>
<span>手机：</span><input type="text" class="stuNumber"><br/>
<span>分数：</span><input type="text" class="stuScore"><br/>
<button>增：将上述信息添加至数据库</button><br/>
<button>删：根据姓名删除指定的内容</button><br/>
<button>改：根据姓名修改指定的内容</button><br/>
<button>查：查询数据库中所有的内容</button>
<!-- 1.引入jquery框架 -->
<script src="jquery-1.12.3.min.js"></script>
<script>
$('button:eq(0)').click(function(){
//2.在想要和后台交互的时候，调用$.ajax()方法
//参数是JSON格式
$.ajax({
//3.ajax结构需要一系列参数支持
type:'post',//get|post
url:'http://127.0.0.1/day3/code/lesson6_ajax&php/lesson6_ajax&php.php',
dataType:'json',
data:{
//data是post请求独有的，因为post请求才需要携带数据给后台
stuName:$('.stuName').val(),
stuGender:$('.stuGender').val(),
stuAge:$('.stuAge').val(),
stuNumber:$('.stuNumber').val(),
stuScore:$('.stuScore').val(),
},
//请求完成后，若收到后台返回的数据(收到响应response)，这个函数会被自动执行。
success:function(data){
console.log(data);
}
});
});
$('button:eq(1)').click(function(){
});
$('button:eq(2)').click(function(){
});
$('button:eq(3)').click(function(){
});
</script>
</body>
</html>
   <?php             
  
/*
1.内置对象
在php中内置了两个对象用来接收，前端发来的信息。
$_GET 和 $_POST
$_GET用于获取在前端通过get请求发来的信息
$_POST用于获取在前端通过post请求发来的信息
*/
echo json_encode($_POST);
?>                       
                         
        ajax select&php 
        
                   
                    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>姓名：</span><input type="text" class="stuName"><br/>
<span>性别：</span><input type="text" class="stuGender"><br/>
<span>年龄：</span><input type="text" class="stuAge"><br/>
<span>手机：</span><input type="text" class="stuNumber"><br/>
<span>分数：</span><input type="text" class="stuScore"><br/>
<button>增：将上述信息添加至数据库</button><br/>
<button>删：根据姓名删除指定的内容</button><br/>
<button>改：根据姓名修改指定的内容</button><br/>
<button>查：查询数据库中所有的内容</button>
<script src="jquery-1.12.3.min.js"></script>
<script>
$('button:eq(0)').click(function(){
//判空操作
var stuNameValue = $('.stuName').val();
var stuGenderValue = $('.stuGender').val();
var stuAgeValue = $('.stuAge').val();
var stuNumberValue = $('.stuNumber').val();
var stuScoreValue = $('.stuScore').val();
if(
stuNameValue.length==0||
stuGenderValue.length==0||
stuAgeValue.length==0||
stuNumberValue.length==0||
stuScoreValue.length==0){
alert('任意某一个输入信息都不能为空！');
return;
}
$.ajax({
type:'post',
url:'http://127.0.0.1/day3/code/lesson7_html&php&mysql/lesson7_html&php&mysql.php',
dataType:'json',
data:{
stuName:$('.stuName').val(),
stuGender:$('.stuGender').val(),
stuAge:$('.stuAge').val(),
stuNumber:$('.stuNumber').val(),
stuScore:$('.stuScore').val(),
},
success:function(data){
console.log(data);
if(data.msg=='add success'){
alert('添加成功');
}else{
alert('添加失败');
}
}
});
});
$('button:eq(1)').click(function(){
});
$('button:eq(2)').click(function(){
});
$('button:eq(3)').click(function(){
$.ajax({
type:'get',
url:'http://127.0.0.1/day3/code/lesson7_html&php&mysql/lesson7_select.php',
dataType:'json',
success:function (data){
console.log(data);
},
error: function (err){
console.log(err);
}
});
});
</script>
</body>
</html>
     
                         
   <?php
//查询功能的后台php文件
$success = array('status' => 'success');
$error = array('status' => 'error');
$con = mysqli_connect('localhost','root','','studb');
if($con){
mysqli_query($con, 'set names utf8');
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');
$sql = "select * from gradeonesheet where 1";
$result = $con->query($sql);
if($result->num_rows>0){
$info = [];
for($i=0; $row=$result->fetch_assoc(); $i++){
$info[$i] = $row;
}
//
echo json_encode($info);
}
}
?>             
<?php
//添加数据的
$success = array('status' => 'OK');
$error = array('status' => 'error');
$con = mysqli_connect('localhost','root','','studb');
if($con){
mysqli_query($con, 'set names utf8');
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');
//
$stuName = $_POST['stuName'];
$stuGender = $_POST['stuGender'];
$stuAge = $_POST['stuAge'];
$stuNumber = $_POST['stuNumber'];
$stuScore = $_POST['stuScore'];
$sql = "insert into gradeonesheet values('$stuName','$stuGender','$stuAge','$stuNumber','$stuScore')";
$result = $con->query($sql);
if($result){
$success['msg'] = 'add success';
echo json_encode($success);
}else{
$error['msg'] = 'add failed';
echo json_encode($error);
}
}else{
$error['msg'] = 'database connect failed';
echo json_encode($error);
}
?>

相关推荐：

php+mysql开发一个最简单的在线题库，在线做题系统

以上就是html 与php+MySQL完成前后端交互的详细内容，更多请关注其它相关文章！

相关标签： php+MySQL html php

上一篇： CSS3中动画技术的实现步骤

下一篇： H5实现拖拽排序的代码

推荐阅读