前后端交互的笔记

北冥神功。

于 2021-03-23 19:19:29 发布

阅读量376

点赞数

分类专栏：我的笔记文章标签： mysql php javascript html css

本文链接：https://blog.csdn.net/weixin_49281361/article/details/115122684

版权

我的笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

！数据库的增删改查

My SQL 新建一个表

//create table  表名（字段1，字段2......字段n）
create table  student（
	stu_id int,
	stu_name varchar(10),
	stu_age int 
）

1.增加一条语句

方法1

//insert into 表名(字段1，字段2....字段n）
//values(值1，值2，.....值n)
insert into student(stu_id,stu_name,stu_int)
values(1,"小明",18)

方法2

//insert into 表名
//values(值1，值2，.....值n)
insert into student
values(2,"小亮",18)

2.删除一条语句

//delete from 表名 
//表示把里面的所有东西都删了
//drop table 表名
//直接删除表格
//AND 与
//OR  或
//where 条件句句
//delete from 表名
//where  字段 1= 值
delete from student
where stu_id = 1

3. 修改语句

//update 表名 set 字段1=值1 ，字段2=值2，字段n=值n
//把字段n的所有字段都修改了
//update表名  set 字段1= 值1
//where 条件语句别的字段= 值
update student set stu_age = 20;
whare stu_id =1;

4.查找语句

select 字段=值 from 表名//表示查找某一字段
select  * from 表名//表示查找所有

!! php 连接 my SQL

增：“insert into 表名 values(值1,值2,值n)”,$conn

删：“delete from 表名 where 字段=值” , $conn

改：“update 表名 set 字段=修改的值 where 字段=值”

查：返回结果集

$result myaql_query("select*from student",$conn)//查找表中所有的元素
echo masql_num_rows($result);//返回结果集的记录数

方法1

<?php 
	header("Content-type:text/html;charset=utf-8")；
	//第一步:登录
	//mysql_connect("数据库服务器地址"，"用户名"，"用户密码"）：返回连接对象
	$conn = mysql_connect("iocalhost","root","root");
	if($conn){
		echo "连接成功"；
		// 第二步:选择库
		mysql_select_db("2013");//查找数据库里面的表
	}
	//第三步：增删查改
	//增加语句
	mysql_query ("insert  into student values(5,"小红",25)",$conn)
	//删除语句
	mysql_query("delete from student where stu_id=5",$conn);
	//查找语句
	$result = myaql_query("select*from student",$conn)//查找表中所有的元素
	echo masql_num_rows($result);//返回结果集的记录数
	//第四步：关闭数据库
	masql_close($conn)
?>

方法2

<?php
	header("Content-type:text/html;charset=utf-8");
	$conn = mysql_connect("localhost","root","root","de2013");
	if($conn){
		echo "连接成功";
		
	}
	else{
		echo "连接失败";
	}
?>

前后端数据交互

<form action="getresult.php" method="get">
	<input type="text" placeholder="请输入账号" name="username"/><br>
	<input type="password" placeholder="请输入密码" name="userpass"/><br>
	<input type="submit"  value="注册" />
</form>

后端连接数据库前端更改数据（注册表）

<?php
	header("Content-type:text/html;charset=utf-8");
	//接受前端传来的数据
	$username = $_GET['username'];
	$userpass = $_GET['userpass'];
	
	//连接数据库
	$conn = mysqli_connect("localhost","root","root","de2013");
	if(!$conn){
		echo "连接失败";
		
	}
	else{
		$sql = "insert into vips(username,userpass) values('$username','$userpass')";
		$result = mysqli_query($conn,$sql);
		mysqli_close($conn);
		
		if($result){
			echo "注册成功";
		}
		else{
			echo "注册失败";
		}
			
	}
	
?>

ajax 语句交互案例

html js ajax语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>欢迎注册</h1>
		<input type="text" id="username" onblur="checkUser()" placeholder="请输入账户" />
		<span id="userMsg"></span><br>
		<input type="password" name="userpass" id="nserpass" placeholder="请输入密码" />
	</body>
</html>
<script type="text/javascript">
	function checkUser() {
		//第一步 创建xhr
		let xhr = new XMLHttpRequest();
		//第二步open()方法，是设置请求方式，请求地址，是否异步
		var getname = document.getElementById("username")
		xhr.open("get","result.php?username="+getname.value,true)
		//第三步设置回调函数
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4 && xhr.status === 200) {
				document.getElementById("userMsg").innerHTML = xhr.responseText
			}
		}
		//第四步 发送
		xhr.send();
	}
</script>

php代码

<?php
	header("content-type:text/html;charset=utf-8");
	//第一步 接收前端传来的数据
	$username = $_GET['username'];
	//第二步 连接数据库
	$conn = mysqli_connect("localhost","root","root","de2013");
	
	//执行aql语句
	$sql = "select * from vips where username ='$username'";
	$result = mysqli_query($conn,$sql);
	
	//关闭数据库
	mysqli_close($conn);
	
	//响应前端
	$rows = mysqli_num_rows($result);
	if($rows){
		echo "该用户已经被使用"; 
	}
	else{
		echo"可以使用";
	}
?>

前后端交互 js封装好的函数

file:///F:/第二阶段下/ajax.js//功能:进行前后端交互
	//请求参数   响应数据

	//type:get/post
	//url:服务器地址
	//isAsyn:是否异步
	//data:请求参数
	//callBack:接收responseText的数据，且实用的函数

	//程序员角度
	function ajax(type, url, isAsyn, data, callBack) {
		let xhr;
		if (window.ActiveXObject) {
			//ie
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		} else {
			//非ie
			xhr = new XMLHttpRequest();
		}

		//将type全都转换为小写
		type = type.toLowerCase();

		if (type == "get") {
			let urlParam = url;
			if (data != "") {
				//"5ajaxFun.php?name=laowang&pwd=666"
				urlParam += "?" + data;
			}
			xhr.open(type, urlParam, isAsyn);
			xhr.send();
		} else if (type == "post") {
			xhr.open(type, url, isAsyn);
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			if (data != "") {
				xhr.send(data);
			} else {
				xhr.send();
			}
		}

		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				callBack(xhr.responseText);
			}
		}
	}

JSON 语法

JSON是前后端数据交换的一种格式

JSON字符串,前后端数据交互时传输的格式
JSON对象是前端想得的格式

			//JSON字符串,前后端数据交互时传输的格式
			var JSON =`[
				{
					"name":"小明"
					"age":"18"
				},
				{
					"name":"小红"
					"age":"98"
				},
				
			]`
			//JSON对象是前端想得的格式
			var json =[
				{
					"name":"小明",
					"age":"18"
				},
				{
					"name":"小红",
					"age":"98"
				},
				
			]
			//（JSON的正解析）JSON字符串转化成JSON对象
			JSON.parse(JSON字符串)
			//（JSON的反解析）JSON对象转化成JSON字符串
			JSON.stringfy(JSON对象)

同源组策略

ajax请求地址与当前页面的地址必须是同一种协议，同主机，同端口才能正常的发送ajax请求，如果不一样，那就会认为是跨域请求，游览器会阻止这个请求行为

跨域的解决方式

1.CORS
2.服务器反向代理
3.JSONP

JSONP:一种解决跨域的方法：工作机制：利用动态创建一个script标签并利用它的src属性向服务器发送一次http请求，并提前声明好一个回调函数，回调函数的函数名利用callback请求参数传递给后端。后端接受到来自前端的请求后，获取callback请求参数并拼接一个调用函数的js代码段并将要返回给前端的数据以实参的形式存在。前端接受来自后端的响应后，会将后端的返回内容当做js代码来执行即调用一个函数，并用一个形参来接受后端想要传过来的数据

前端代码

<script type="text/javascript">
			//4.回调函数
			function fu(date){
				
				//调用需要的数据
			}
			//1.创建一个script标签
			let script = document.createElement("script")
			//2.让创建的script标签的src属性引入请求数据 通过 请求地址
			//callback=调用函数名 前后端使用callback
			script.setAttribute("src","date.php?callback=fu & name=+queryname.value")
			//3.插入到页面中
			document.querySelector("body").appendChild(script)
		</script>

后端代码

<?php

	header("Content-Type:text/html;charset=utf-8");
	$con = mysql_connect("localhost","root","123456");
	if (!$con){
		die('Could not connect: ' . mysql_error());
	}
	else{
		mysql_select_db("school",$con);
		mysql_query("set character set 'utf8'");//读库 
		mysql_query("set names 'utf8'");//写库
		$name = $_GET["name"];
		$fn = $_GET["callback"];
		$result = mysql_query('SELECT * FROM students WHERE name="'.$name.'"');
		// $result : php世界里的关联数据（
		// 将$result变成前端所认识的数组或者是对象(JSON字符串)

		$response = $fn."[";
		while($row = mysql_fetch_array($result)){
			$response = $response.'{'.'"id":'.$row["id"].''.','.'"name":"'.$row["name"].'"'.','.'"sex":'.$row["sex"].''.','.'"city":"'.$row["city"].'"'.','.'"age":'.$row["age"].''.'},';
		}
		$response = substr($response,0,strlen($response)-1)."]";

		if(strlen($response) === 1){
			echo "[]";
		}
		else{
			echo $response;
		}
	}

?>

本地存储 cookie的使用方法

cookie是document的内置对象，保存在用户磁盘

expires失效时间

写入cookie

	var date= new Date("2021-3-31 00:00:00")
	//写入cookie
	document内置对象cookie ="name=value;失效时间"
	document.cookie ="name=lijien;expires="+date

输出cookie

//直接可以输出，设置变量
console.log(document.cookie)

输出的cookie是字符串我们想要转成可使用的对象

删除cookie

document.cookie="age=18;expires="+new Date("1999-1-1 00:00:00)

闭包

什么是闭包

嵌套的函数
可以访问另一个函数的局部变量的函数
函数内部的函数内部的函数叫闭包

闭包的作用

可以在函数的外面访问函数的局部变量
局部变量一直存在内存中（缺点：会造成性能问题）

北冥神功。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前后端交互的笔记

！数据库的增删改查My SQL 新建一个表//create table 表名（字段1，字段2......字段n）create table student（ stu_id int, stu_name varchar(10), stu_age int ）1.增加一条语句方法1//insert into 表名(字段1，字段2....字段n）//values(值1，值2，.....值n)insert into student(stu_id,stu_name,stu_int)value
复制链接

扫一扫