bootstrap + ajax +php 实现前后端的交互之查询表数据和插入数据

最新推荐文章于 2024-05-16 06:47:40 发布

OrdnAry

最新推荐文章于 2024-05-16 06:47:40 发布

阅读量701

点赞数

分类专栏：学习文章标签： ajax mysql php html javascript

本文链接：https://blog.csdn.net/OrdnAry/article/details/108421913

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

ajax.js 的函数

function $ajax({method = "get",url,data,success,error}){
    //1、创建ajax对象
    var xhr = null;
        try{
            xhr = new XMLHttpRequest();
        }catch(error){
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    //判断如果数据存在
    if(data){
        data = querystring(data);
    }
    if(method == "get" && data){
        url += "?" + data;
    }
    xhr.open(method,url,true);
            
    if(method == "get"){
    xhr.send();
    }else{
    //必须在send方法之前，去设置请求的格式
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    xhr.send(data);
    }
    //4、等待数据响应
           
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
        //判断本次下载的状态码都是多少
            if(xhr.status == 200){
                /*
                如何去处理数据不确定
                回调函数，
                */
                if(success){
                    success(xhr.responseText);
                }
            }else{
                if(error){
                    error("Error:" + xhr.status);
                }
              }
        }
    }
}
//转成字符串函数
function querystring(obj){
    var str ="";
    for (var attr in obj) {
       str += attr + "=" + obj[attr] +"&";
    }
   return  str.substring(0,str.length - 1)
}

查询数据的php页面

<?php
    header('content-type:text/html;charset="utf-8"');
    /*
        连接数据库  天龙八部
    */
    /*
    //1.连接数据库
            第一个参数：连接数据库IP
            第二个参数：用户名
            第三个参数：密码*/
   $link = mysql_connect("localhost","root","root");

   //2.判断是否连接成功
   if(!$link){
       echo "连接失败";
       exit;//终止
   }

   //3.设置字符集
   mysql_set_charset("utf8");

   //4.选择数据库
   mysql_select_db("yyy");   

   //5.准备sql语句
   $sql = "select * from students";

   //6.发送sql语句
   $res = mysql_query($sql);
//    var_dump($res);
   $arr = array();
   //7.处理结果集
   while($row = mysql_fetch_assoc($res)){
    // var_dump($row);
        array_push($arr,$row);
   }
   echo json_encode($arr);
   //8.关闭数据库
   mysql_close($link);
?>

查询数据的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="ajax.js"></script>
    <script>
        window.onload = function(){
            var btn = document.getElementById("btn1");
            var t1 = document.getElementById("t1");
            
            btn.onclick = function(){
                $ajax({
                    method: "get",
                    url: "showStudents_json.php",
                    success: function(result){
                        var arr = JSON.parse(result);
                        var str = ``;
                        for(var i = 0 ; i<arr.length;i++){
                            str += `<tr>
                            <td>${arr[i].id}</td>
                            <td>${arr[i].name}</td>
                            <td>${arr[i].english}</td>
                            <td>${arr[i].math}</td>
                            <td>${arr[i].chinese}</td>
                        </tr>`
                        }
                        t1.innerHTML = str;
                    },
                    error: function(msg){
                        alert(msg);
                    }
                })
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h2>获取学员的成绩</h2>
            </div>
            <div class="panel-body">
                <button  id="btn1" class="btn btn-primary">获取所有学员信息</button> 
                <br>
                <br>
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <td>学员学号</td>
                            <td>学员姓名</td>
                            <td>英语成绩</td>
                            <td>数学成绩</td>
                            <td>语文成绩</td>
                        </tr>
                    </thead>
                    <tbody id ="t1"></tbody>
                </table>
            </div>
            <div class="panel-footer">
                <a href="insertStudents.html">插入学员成绩</a>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

插入数据的php页面

<?php
    header('content-type:text/html;charset="utf-8"');
    $responseData = array("code" => 0, "message" => "");
    // var_dump($_POST);
    //把数据取出来
    $name = $_POST["name"];
    $english = $_POST["english"];
    $math = $_POST["math"];
    $chinese = $_POST["chinese"];
    //1.连接数据库
    $link = mysql_connect("localhost","root","root");
   //2.判断是否连接成功
   if(!$link){
    $responseData["code"] = 1;
    $responseData["message"] = "数据库连接失败";
    //返回到前台页面
    echo json_encode($responseData);   
    exit;//终止
   }

   //3.设置字符集
   mysql_set_charset("utf8");

   //4.选择数据库
   mysql_select_db("yyy");   

   //5.准备sql语句
   $sql = "insert into students(name,english,math,chinese) values('{$name}',{$english},{$math},{$chinese})";
   //6.发送sql语句
   $res = mysql_query($sql);
   if(!$res){
    $responseData["code"] = 2;
    $responseData["message"] = "数据插入失败";
    echo json_encode($responseData); 
    exit;  
   }else{
    $responseData["message"] = "添加学员成绩成功";
    echo json_encode($responseData); 
   }
   //8.关闭数据库
   mysql_close($link);
?>

插入数据的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="ajax.js"></script>
    <script>
        /*
            from表单提交数据后，需要跳转页面
            ajax 异步进行数据传输
        */
       window.onload = function(){
           var submit = document.getElementById("submit");
           var inputs = document.getElementsByTagName("input");
           submit.onclick = function(){
                $ajax({
                    method: "post",
                    url: "insertStudents.php",
                    data: {
                        name: inputs[0].value,
                        english:inputs[1].value,
                        math:inputs[2].value,
                        chinese:inputs[3].value,
                    },
                    success:function(result){
                        var arr = JSON.parse(result);
                        alert(arr.message);
                    },
                    error:function(msg){
                        alert(msg);
                    }
                });        
           }
       }
    </script>
</head>
<body>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h2>登入学员成绩</h2>
            </div>
            <div class="panel-body">
                    <div class="form-group">
                      <label for="name">学员姓名</label>
                      <input type="text" class="form-control" name="name">
                    </div>
                    <div class="form-group">
                        <label for="english">英语成绩</label>
                        <input type="text" class="form-control" name="english">
                      </div>
                    <div class="form-group">
                        <label for="math">数学成绩</label>
                        <input type="text" class="form-control" name="math">
                      </div>
                    <div class="form-group">
                        <label for="chinese">语文成绩</label>
                        <input type="text" class="form-control"
                        name="chinese">
                      </div>
                    <div class="form-group">
                        <button id="submit" class="btn btn-primary form-control">提交学员成绩</button>
                    </div>
            </div>
            <div class="panel-footer">
                <a href="showStudents.html">查看学员成绩</a>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

OrdnAry

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap + ajax +php 实现前后端的交互之查询表数据和插入数据

查询数据的php页面<?php header('content-type:text/html;charset="utf-8"'); /* 连接数据库天龙八部 */ /* //1.连接数据库第一个参数：连接数据库IP 第二个参数：用户名第三个参数：密码*/ $link = mysql_connect("localhost","root","root");
复制链接

扫一扫