前端html，后端php,数据库mysql 之间的交互

时间：2024-03-03 12:42:38

前端向后端发送数据：ajax方法

　　 get/post方法:

<script>

document.onclick = function(){
ajax({
// type:"get", //发送方式，可选，默认get
url:"http://localhost/ajax/php/index.php", //要请求的地址，必选
success:function(res){ //请求成功之后的函数，必选
console.log(res)
},
data:{ //要发送的数据，可选，默认不发
user:"admin",
pass:13123121123
},
// error:function(res){ //请求失败之后的函数，可选，默认不处理
// console.log(res)
// },
// timeout:10 //请求超时的时间，可选，默认2000
})
}

function ajax(options){
// 1.处理默认参数
var {type,url,success,error,data,timeout} = options;
type = type || "get";
data = data || {};
timeout = timeout || 2000;

 

// 2.解析要发送的数据
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}



 // 3.根据方式，决定是否处理url
        if(type == "get"){
            var d = new Date();
            url = url + "?" + str + "__qft=" + d.getTime();
        }




 // 4.开启ajax
        var xhr = new XMLHttpRequest();
        // 注意：open中的方式
        xhr.open(type,url,true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                // 5.执行成功之前，先判断是否传入
                success && success(xhr.responseText);
                // 成功之后，不应有失败
                error = null;
            }else if(xhr.readyState == 4 && xhr.status != 200){
                // 6.执行失败之前，先判断是否传入
                error && error(xhr.status);
                // 失败之后，不应有成功
                success = null;
                // 且失败不应多次执行
                error = null;
            }
        }




 // 7.如果请求超时，执行失败
        setTimeout(() => {
            error && error("timeout");
            // 失败之后，不应有成功
            success = null;
        }, timeout);




 // 8.最后根据type的方式，决定send的发送内容和格式
        if(type == "post"){
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(str)
        }else{
            xhr.send()
        }
    }





后台接受数据并返回到前端：php方法




<?php

    $u = @$_REQUEST["user"];
    $p = @$_REQUEST["pass"];

    echo "这是前端的ajax发送的数据，现在再还给前端:".$u."-------".$p;

?>




在PHP中使用MySQL：


　　注意运行的环境，可以在本地服务器上运行




<?php
    // 1.登录mysql，选择数据库
    $link = @new mysqli("localhost:3306","root","root","test");
    if($link->connect_error){
        echo $link->connect_error;
    }

    // 2.$link->query()向mysql发送命令
    // 增
    // $q = "INSERT stu (name,sex,age) VALUES(\'admin\',\'1\',16)";
    // $res = $link->query($q);
    // if($res){
    //     echo "insert ok";
    // }else{
    //     echo "insert no ok";
    // }

    // 删
    // $q = "DELETE FROM stu WHERE id=6";
    // $res = $link->query($q);
    // if($res){
    //     echo "delete ok";
    // }else{
    //     echo "delete no ok";
    // }

    // 改
    // $q = "UPDATE stu SET name=\'root\' WHERE id=6";
    // $res = $link->query($q);
    // if($res){
    //     echo "update ok";
    // }else{
    //     echo "update no ok";
    // }

    // 查
    $q = "SELECT * FROM stu";
    $res = $link->query($q);
    if($res){
        echo "select ok";
    }else{
        echo "select no ok";
    }
?>




 





            

            
        

	    
	    
    


相关文章