如何将创建的文档放到指定目录

如何将创建的文档放到指定目录

  • 例如如何将创建的txt文件到指定的txt目录下，或者如何将拷贝后的图片放入img目录下


1
2
3
4
5
6
7
8
//html 文件

   <body>
	<form action="../php/test.php" method="post" enctype="multipart/form-data">
		<input type="file" name="pic" id="pic" value="" />
		<input type="submit" name="submit" value="提交"/>
	</form>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// php 文件

<?php
	if(!empty($_POST['submit'])) {
		if(!empty($_FILES['pic']['name'])) {
			$type = $_FILES['pic']['type'];
			if($type == "image/jpeg" || $type == "image/png") {
             
                // 定义一个变量，存储相对该PHP的相对位置
				$path = "../img/";
				//								path. 将拷贝完成的图片，拼接好指定目录
				$result = move_uploaded_file($_FILES['pic']['tmp_name'],$path.$_FILES['pic']['name']);
			}
			if($result) {
				$val = $_FILES['pic']['name'];
				// 在创建文件的时候将文件创建到指定位置
				$fp = fopen("../txt/test.txt","a+");
				fwrite($fp,$val);
				fclose($fp);
			}		
		}		
	}
?>

展开全文 >>

前后台小程序

1. 前台添加菜单

1
2
3
4
5
6
7
<!--增加菜单前台页面-->
		<form name="menu" enctype="multipart/form-data" action="php/menu/addmenu.php" method="post">
			菜名： <input type="text" name="menuname" id="menuname" value="" /><br>
			价格： <input type="text" name="price" id="" value="" /><br>
			图片： <input type="file" name="pic" id="pic" value="" /><br>
			<input type="submit" name="submit" value="添加菜单"/>
		</form>

2. 后台接受请求，接受数据并创建menu数据库，将上传的数据存储到menu数据库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
	//判断用户有没有输入
	if(!empty($_POST['submit'])) {
		//判定有没有上传图片
		if(!empty($_FILES['pic'])) {
			//后台需要检查上传类型（放置直接上传PHP文件）
			if($_FILES['pic']['type'] == "image/jpeg" || $_FILES['pic']['type'] == "image/png") {
				$path = "../../uploads/";
				$result = move_uploaded_file($_FILES['pic']['tmp_name'],$path.$_FILES['pic']['name']);
			}
			//比如要求增加菜单时一定要上传图片
			if($result) {
				$menuname = htmlspecialchars($_POST['menuname']);
				$price = floatval($_POST['price']); //转成浮点数
				$pic = $_FILES['pic']['name'];
				include "../common/mysql.php";
				$fields = array(
					'name' => $menuname,
					'price' => $price,
					'picture' => $pic
				);
				insert($link, $fields, "menu");
				mysqli_close($link);
			}
		}
	}
?>

image.png

3. 前台发送数据，向后台请求刚才上传的数据，然后将获取到的数据遍历形成菜单界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//使用Ajax获得菜单数据
var xhr = new XMLHttpRequest();
xhr.onload = function() {
	var menu = JSON.parse(this.responseText);
	createMenu(menu);
}
xhr.open("get","php/menu/listmenu.php");
xhr.send();
function createMenu(data) {
	line = "";
	for(i in data) {
		line += "<li><input type=\"checkbox\" name=\"menu_id[]\" value=\""+data[i].id+"\" />　<img width='50px' src=\"uploads/"+data[i].picture+"\">　<span id=\""+data[i].id+"\" >"+data[i].name+"</span><span id=\""+data[i].id+"\" >"+data[i].price+"</span>元　订购份数： <input type=\"text\" name=\"num_"+data[i].id+"\"/></li>"
		document.getElementById("menuUl").innerHTML = line;
	}
}

4. 后台接受请求，打开menu数据库，将数据返回给前段

1
2
3
4
5
6
<?php
	//mysql.php  数据库操作函数库文件
	include "../common/mysql.php";
	$data = getAll($link, "*", "menu", "1=1");
	echo json_encode($data);
?>

image.png

5. 前台注册界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<body>
		<div id="nav"></div>
		<form action="php/member/register.php" method="post" name="form1">
			密　　码： <input type="password" name="member_password" /> <br>
			确认密码： <input type="password" name="member_password_confirm" /> <br>
			用户姓名： <input type="text" name="member_name"/> <br>
			用户电话： <input type="text" name="member_mobile"/> <br>
			用户地址： <input type="text" name="member_address"/> <br>
			<input type="hidden" name="member" value="1" />
			<input type="button" name="btn" value="立即注册"/>
		</form>
	</body>
	<script type="text/javascript">
		$("#nav").load("tpl/nav.html");
		document.form1.btn.onclick = checkdata;
		var isOk = true;
		function checkdata() {
			if(document.form1.member_password.value != document.form1.member_password_confirm.value){
				alert("两次密码输入不一致");
				return false;
			}
				document.form1.submit();
		}
		function checkuser(value) {
			var xhr = new XMLHttpRequest();
			xhr.onload = function() {
				if(this.responseText == "fail") {
					document.form1.btn.disabled = true;
					document.form1.member_username.className = "error";
				}else {
					document.form1.btn.disabled = false;
					document.form1.member_username.className = "";
				}
			}
			var formData = new FormData();
			formData.append("member_username",value)
			xhr.open("POST","php/member/checkuser.php");
			xhr.send(formData);
		}
	</script>

6. 注册用户的时候检测该用户名是否已经被注册，如果没被注册，可以注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
	//验证用户名的合法性
	if(!empty($_POST['member_username'])) {
		include "../common/mysql.php";
		$username = htmlspecialchars($_POST['member_username']);
		//查询该用户名是否已经存在
		$member = getOne($link,"*","member","member_username='".$username."'");
		//如果查询结果为空 表示没有相同的用户注册
		if(empty($member)) {
			echo "ok";
		}else {
			echo "fail";
		}
	}
?>

7. 将可以注册的用户名即其他信息，插入到member数据表里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
	//会员注册
	if(!empty($_POST['member'])) {
		//引入数据库函数库
		include "../common/mysql.php";
		foreach($_POST as $key => $val) {
			$_POST[$key] = htmlspecialchars($val);
		}
		$member = array(
			'member_name' => $_POST['member_name'],
			'member_mobile' => $_POST['member_mobile'],
			'member_address' => $_POST['member_address'],
			'member_username' => $_POST['member_username'],
			'member_password' => sha1($_POST['member_password'])
		);
		insert($link, $member, 'member');
	}
?>

会员界面

8. 会员登录页面，将前台输入的用户名和密码传送到后台

1
2
3
4
5
6
7
8
9
10
11
12
<body>
		<div id="nav"></div><br>
		<!--登陆页面-->
		<form action="php/member/login.php" name="form1" method="post">
			用户名： <input type="text" name="username" /><br>
			密　码： <input type="password" name="password" /><br>
			<input type="submit" name="btn" value="立即登录"/>
		</form>
	</body>
	<script type="text/javascript">
		$("#nav").load("tpl/nav.html");
	</script>

9. 将前台输入的信息进行核实，如果信息不符合留在本页，如果符合，跳转到首页。并以此在member表中查找该会员信息，将会员用户名，名称，电话存储到Session里面，备用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
	session_start();
	if(!empty($_POST['username']) && !empty($_POST['password'])) {
		include "../common/mysql.php";
		//对提交的数据进行预处理
		$username = htmlspecialchars($_POST['username']);
		$password = sha1($_POST['password']);
		$member = getOne($link,"*","member","member_username='".$username."' and member_password='".$password."'");
		if(!empty($member['member_username'])) {
			$_SESSION['member']['username'] = $member['member_username'];
			$_SESSION['member']['name'] = $member['member_name'];
			$_SESSION['member']['mobile'] = $member['member_mobile'];
			header("Location: /php/db/index.html");
		}else {
			header("Location: /php/db/login.html");
		}
	}
?>

10. 判断用户是否登录，如果登录成功返回上述存储在Session里面的数据

1
2
3
4
5
6
7
8
9
10
<?php
	session_start();
	if(!empty($_SESSION['member'])) {
		//将用户登录信息输出到前台
		echo json_encode($_SESSION['member']);
	}else {
		//nologin  表示用户尚未登录
		echo json_encode(array("no login"));
	}
?>

11. 前台想后台发送请求，如果用户登录，界面显示 欢迎”+data.name+”来到商城 用户中心

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
			$('#nav').load("tpl/nav.html");
			$.get("php/member/member_status.php",{},function(data) {
				console.log(data);
				if(typeof(data.name) != "undefined") {
					$('#member_status').html("欢迎"+data.name+"来到商城 <a href=''>用户中心</a>");
				}
			},"json");
		</script>

12. 前台将选中的菜品和分数传送到后台

1
2
3
4
5
6
7
8
var xhr = new XMLHttpRequest();
xhr.onload = function() {
	document.getElementById("tips").innerHTML = this.responseText;
}
var formData = new FormData();
formData.append("menu",JSON.stringify(userSelected));
xhr.open("POST","php/orders/dingdan.php");
xhr.send(formData);

13. 后台接受数据，遍历数组，将数据插入到listorder表中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
	session_start();
	//将用户订餐数据记录到数据库
	//接受提交的订单数据
	if(!empty($_POST['menu'])) {
		include "../common/mysql.php";
		//$_POST['menu']是前台传来的JSON串
		//json_decode 将JSON字符串转变成数组
		$menu = json_decode($_POST['menu'],true);
		print_r($menu);
		//用户选择的checkbox - menu_id
		foreach($menu as $key => $val) {
			$menu_id = $val['menu_id'];
			//订购的份数 num_id
			$amount = intval($val['amount']);
			echo "订单的菜单id=".$menu_id."<br>";
			echo "订单的份数amount=".$amount."<br><br>";	
			$row = getOne($link, "name,price","menu","id=".$menu_id);
			$fields = array(
				"menu_name" => $row['name'],
				"menu_price" => $row['price'],
				'amount' => $amount,
				'createDate' => date("Y-m-d H:i:s"),
				'name' => $_SESSION['member']['name'],
				'number' => $_SESSION['member']['mobile']
			);
			insert($link, $fields, 'orderlist');	
		}
	}
?>

image.png

image.png

展开全文 >>

mysqli用法

一、mysql与mysqli的概念相关：

  1. mysql与mysqli都是php方面的函数集，与mysql数据库关联不大。

    1. 在php5版本之前，一般是用php的mysql函数去驱动mysql数据库的，比如mysql_query()的函数，属于面向过程3、在php5版本以后，增加了mysqli的函数功能，某种意义上讲，它是mysql系统函数的增强版，更稳定更高效更安全，与mysql_query()对应的有mysqli_query()，属于面向对象，用对象的方式操作驱动mysql数据库

  2. mysql_connect()与mysqli_connect()

    • 使用mysqli，可以把数据库名称当作参数传给mysqli_connect()函数，也可以传递给mysqli的构造函数；

    • 如果调用mysqli_query()或mysqli的对象查询query()方法，则连接标识是必需的。

  3. mysql与mysqli的区别：

    • mysql是非持继连接函数，mysql每次链接都会打开一个连接的进程。

    • mysqli是永远连接函数，mysqli多次运行mysqli将使用同一连接进程,从而减少了服务器的开销。mysqli封装了诸如事务等一些高级操作，同时封装了DB操作过程中的很多可用的方法。返回记录集类型为array mysql_fetch_array ( resource $result [, int $ result_type ] )有一点很重要必须指出，用 mysql_fetch_array() 并不比用 mysql_fetch_row()慢，而且还提供了明显更多的值。 mysql_fetch_array() 中可选的第二个参数 是一个常量，可以接受以下值：MYSQL_ASSOC，MYSQL_NUM 和 MYSQL_BOTH。参数的默认值是 MYSQL_BOTH。如果用了 MYSQL_BOTH，将得到一个同时包含关联和数字索引的数组。用 MYSQL_ASSOC 只得到关联索引（如同 mysql_fetch_assoc()那样 mysql_fetch_assoc() 函数从结果集中取得一行作为关联数组。返回根据从结果集取得的行生成的关联数组，如果没有更多行，则返回 false。），用 MYSQL_NUM 只得到数字索引[]。例如：

      1
      2
      3
      4
      5
      6
         $con = mysqli_connect("localhost","root","","mydb");    
         $select1 = "select * from mysql_table where age > 20";
      $re_select1 = mysqli_query($con, $select1);
      print_r($re_select1);
      $data = mysqli_fetch_all($re_select1,MYSQLI_ASSOC);
      print_r($data);


数据库操作关键函数

* mysqli_connect: 连接数据库

* mysqli_error: 最后一次SQL动作错误信息
 * mysql_errno(): 函数返回上一个 MySQL 操作中的错误信息的数字编码。
                      返回上一个 MySQL 函数的错误号码，如果没有出错则返回 0（零）。
 * mysqli_query: 执行SQL语句，增删改查
 * mysqli_select_db: 选择数据库
 * mysqli_fetch_array(): 从查询结果去1条查询记录
 * mysqli_fetch_all()： 函数从结果集中取得所有行作为关联数组
 * mysqli_close: 关闭数据库

假设数据库的名称为mydb

连接数据库

1
2
3
4
5
6
7
/**
*'localhost',  /* The host to connect to 连接MySQL地址 */     
*'root',      /* The user to connect as 连接MySQL用户名 */     
*'password',  /* The password to use 连接MySQL密码 */     
*'mydb');    /* The default database to query 连接数据库名称*/ 
/
$connect = mysqli_connect("localhost","root","","mydb");

创建数据表 person

1
2
$create_table = "create table mysql_table(id int NOT NULL AUTO_INCREMENT,PRIMARY KEY(id),name varchar(15),age int)";
mysqli_query($con,$create_table);

插入数据

1
2
   $insert1 = "insert into mysql_table (`name`, `age`) values('yyy',90)";
mysqli_query($con,$insert1);

查询数据

1
2
3
$select1 = "select * from mysql_table where age > 20";
$re_select1 = mysqli_query($con, $select1);
print_r($re_select1);

关闭数据

1
mysqli_close($con);

如何将创建的文档放到指定目录

  • 例如如何将创建的txt文件到指定的txt目录下，或者如何将拷贝后的图片放入img目录下


1
2
3
4
5
6
7
8
//html 文件

   <body>
	<form action="../php/test.php" method="post" enctype="multipart/form-data">
		<input type="file" name="pic" id="pic" value="" />
		<input type="submit" name="submit" value="提交"/>
	</form>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// php 文件

<?php
	if(!empty($_POST['submit'])) {
		if(!empty($_FILES['pic']['name'])) {
			$type = $_FILES['pic']['type'];
			if($type == "image/jpeg" || $type == "image/png") {
             
                // 定义一个变量，存储相对该PHP的相对位置
				$path = "../img/";
				//								path. 将拷贝完成的图片，拼接好指定目录
				$result = move_uploaded_file($_FILES['pic']['tmp_name'],$path.$_FILES['pic']['name']);
			}
			if($result) {
				$val = $_FILES['pic']['name'];
				// 在创建文件的时候将文件创建到指定位置
				$fp = fopen("../txt/test.txt","a+");
				fwrite($fp,$val);
				fclose($fp);
			}		
		}		
	}
?>

展开全文 >>

Cookie和Session详解

1. 什么是Cookie

Cookie实际上是一小段的文本信息。客户请求服务器，如果服务器需要记录该用户状态，就使用response想客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再次请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容，换句话说，Cookie不适合用带有隐私类信息。

1
2
3
4
5
6
7
8
9
10
11
<?php
	print_r($_COOKIE);
	if(!empty($_COOKIE['num'])) {
		$_COOKIE['num']++;
		setcookie("num",$_COOKIE['num']);
		echo $_COOKIE['num'];
	}else {
		setcookie('num',1);
	}
	setcookie('name','da',time()+24*3600);
?>

例如上端代码，当每次刷新界面的时候num都会自增1，实现界面浏览次数。

2. Cookie的不可跨域性

Cookie在客户端是由浏览器管理的，浏览器能够保证Google只会操作Google的Cookie，而不会操作baidu的Cookie，从而保证用户的隐私安全

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
		var indexDate = new Date();
		$.ajax({
			type:"get",
			url:"count.php?actionC=content",
			async:true,
			data: {},
			success: function(data) {
				$("#boxContent").html("这是content的数据：　"+data);
			}
		});
		document.cookie = "contentTime="+indexDate;	
	</script>
1
2
3
4
5
6
7
8
9
<?php
			if(!empty($_COOKIE[$val1])) {
				$_COOKIE[$val1]++;
				setcookie($val1,$_COOKIE[$val1]);
				echo $_COOKIE[$val1];
			}else {
				setcookie($val1,1);
			}	
?>

3. Cookie的值

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
			//设置一个cookie
			document.cookie = "user=sdr;";
			//获取所有的cookie
			var str = document.cookie;
			//如何从所有cookie中取出特定名的cookie值
			//cookie特点：  以键值对形式存储 用分号空格分隔每一个cookie
			//取num值
			var start = str.indexOf('num=')+4;
			var end = str.indexOf(';',start);
			//使用substring获取值
			var val = str.substring(start,end);
</script>

4. Cookie的有效期

  • 后台设置
1
2
3
//设置一个有生命期的cookie
	//过期时间是时间数，比如 一天后失效  那就是24*3600秒后失效
	setcookie("newMember","rrrr",time()+24*3600);
  • 前台设置
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
			function setCookie(name,value,path,expires) {
				//设置一天之后失效
				var current_data = new Date();
				//将日期设置为一天之后的日期
				current_data.setDate(current_data.getDate() + expires);
				//将日期转成GMT字符串  得到的是对象
				var expires_str = current_data.toGMTString();
				//设置cookie的过期日期
				document.cookie = name+"="+value+"; path="+path+";expires="+expires_str;
			}
			setCookie("user","dddd","/",1);	
		</script>

###Cookie总结

 - Cookie 是存储在浏览器哭护短的一片数据
- 可以同时被前台和后台操作。当前台刷新后，刷新后台，此时num会在前台基础上增1。
- 可以跨页面存储
- Cookie是由生命期，默认与浏览器进程相同，如果浏览器退出，  Cookie会被注销
- Cookie特点，以键值对形式存储，用分号空格分隔每一个Cookie

Session

1. 什么是Session

Session是一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，为Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找客户的状态就可以了。
如果说Cookie是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案袋就可以了。

2. Session实现用户登录

上面提到过，Session数据存储在服务器中，每个会话分配一个单独的Sessioin_id，该Session_id通过Cookie传送到前台，默认的session_id名称就是PHPSESSION，前台只能看到Session的id，为不能修改Session，这样我们就可以用Session来保存一些隐私信息。

3. Session 使用

使用Session之前，需要先开启会话。Session存储在Session数组$_SESSION里面。相对于Cookie，Session存储比较安全，但如果Session数量较多，会导致服务器性能下降。

展开全文 >>

简易版网上订餐

简易版网上订餐，包括从后台添加菜品图片，菜品，价格

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 600px;
				height: 400px;
				border: 2px solid black;
				margin: 50px auto;
				text-align: center;
				position: relative;
			}
			.myPhp{
				height: 140px;
				margin-top: 150px;
				width: 800px;
			}
			#order, #show {
				text-align: left;
			}
			#show {
				border: 2px solid black;
				width: 600px;
				margin-top: 150px;
			}
			#show div, form div {
				height: 50px;
			}
			#show div span:nth-of-type(1), form div span:nth-of-type(1), #show div span:nth-of-type(2), form div span:nth-of-type(2) {
				display: inline-block;
				width: 140px;
			}
			img {
				width: 40px;
				vertical-align: middle;
				margin: 0 8px;
			}
			#btn1, #btn2 {
				width: 50px;
				font-size: 16px;
				background: #F5F5F5;
			}
			#btn2 {
				margin-left: 8pxs;
			}
			#btn1 {
				position: absolute;
				bottom: 10px;
				right: 20px;
			}
		</style>
	</head>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<body>
		<!--前台界面-->
		<div class="myHtml box">
			<h1>丽德国际大酒店</h1>
			<form id="order" action="" method="post" enctype="multipart/form-data">		
				<input type="button" id="btn1" name="submit1" value="提交"/>
			</form>
		</div>
		<div id="show"></div>
		<!--老板添加菜单-->
		<!--
			老板往后台添加菜单，到文件中，后台从文件中获取菜品，返回到前台，形成订单界面
			用户通过点击勾选，前台将所选菜品和份数传到后台，后台经过计算，将结果反倒浅谈
		-->
		<div class="myPhp box">
			<h2>添加菜单</h2>
			图片：<input type="file" id="pic" name="pic" />
			菜品：<input type="text" name="caipin" id="caipin" value="" />
			价格：<input type="text" name="price" id="price" />元
			<input type="button" id="btn2" name="submit2" value="提交"/>
		</div>
	</body>
	<script type="text/javascript">
		//老板添加菜
		$('#btn2').click(function() {
			var str = $('#caipin').val()+" "+$('#price').val();
			var formDate = new FormData();
			formDate.append("str",str);
			formDate.append("pic",$('#pic')[0].files[0]);
			$.ajax({
				type:"post",
				url:"writeDan.php",
				async:true,
				data: formDate,
				processData: false,
				contentType: false,
				success: function() {},
			});
		})
		//前台发送请求，获取菜单
		$.ajax({
			type:"get",
			url:"dingDan.php?action=caidan",
			async:true,
			data: {},
			dataType: "json",
			success: function(data) {
				createCai(data);
			}
		});
		//创建前台点菜界面
		function createCai(data) {
			console.log(data)
			for(var i = 0; i < data.length-1; i++) {
				$("<div><img src="+data[i].split(' ')[0]+" ><span>菜品："+data[i].split(' ')[1]+"</span><span>　　价格：￥"+data[i].split(' ')[2]+"元</span>　　份数：<input type='text'><input type='checkbox'></div>").appendTo("#order");
			}
		}
	
		//点击 点餐的时候  获取勾选菜品，所选份数
		$("#btn1").click(function() {
			var arrIndex = [];
			var arrCount = [];
			$('input:checkbox').each(function(index,obj) {
				if($('input:checkbox')[index].checked == true) {
					var count = parseInt($('input:text')[index].value);
					arrIndex.push(index);
					arrCount.push(count);	
				}
			})

			$.ajax({
				type:"post",
				url:"dingDan.php",
				async:true,
				data: {"index":arrIndex,"count":arrCount},
				dataType: "json",
				success: function(data) {
					console.log(data)
					$("<h3>您所选购：</h3>").appendTo('#show');
					for(var i = 0; i<data.length-1;i++) {
						$("<div><img src="+data[i].split(' ')[0]+" ><span>"+data[i].split(' ')[1]+"</span><span> 单价："+data[i].split(' ')[2]+"</span><span> 小计："+data[i].split(' ')[2]+"</span></div>").appendTo('#show');
					}
					$("<h4>总价："+data[data.length-1]+"</h4>").appendTo('#show');
				}
			});
		})
	</script>
</html>

####PHP代码1 往后台上传图片，添加菜品和价格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
	if(!empty($_POST['str'])) {
		$result = false;
		if(!empty($_FILES['pic']['name'])){
			$type = $_FILES['pic']['type'];
			if($type == "image/jpeg" || $type == "image/png" || $type == "image/gif"){
				$result = move_uploaded_file($_FILES['pic']['tmp_name'],$_FILES['pic']['name']);
			}	
		}
		if($result) {
			$str = $_FILES['pic']['name']." ".$_POST['str']."\n";
			$fp = fopen("dingDan.txt","a+");
			fwrite($fp,$str);
			fclose($fp);
		}
	}	
?>

####PHP代码2 从后台去数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
	if(!empty($_GET['action'])) {
		$fp = fopen("dingDan.txt","r");
		$arr = array();
		while(!feof($fp)) {
			$arr[] = fgets($fp);
		}
		$arr1 = json_encode($arr);
		echo $arr1;
		fclose($fp);
	}
	if($_POST) {
		$fp = fopen("dingDan.txt","r");
		$arr = array();
		while(!feof($fp)) {
			$arr[] = fgets($fp);
		}
		fclose($fp);
		$index = $_POST['index'];
		$count = $_POST['count'];
		$allTotal = 0;
		$arr2 = array();
		for($i=0;$i<count($index);$i++) {
			$picture = explode(" ",$arr[$index[$i]])[0];
			$caiPin = explode(" ",$arr[$index[$i]])[1];
			$price = explode(" ",$arr[$index[$i]])[2];
			$total = $price * $count[$i];
			$arr2[] = $picture." ".$caiPin." ".$price." ".$total;
			$allTotal += $total;	
		}
		$arr2[] = $allTotal;
		$num = json_encode($arr2);
		echo $num;	
	}
?>

展开全文 >>

分页

HTML 代码段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.wrap {
			width: 400px;
			height: 200px;
		}
		#pagenav {
			overflow: hidden;
			width: 300px;
			margin: 0 auto;
		}
		a {
			display: block;
			border: 1px solid lightgray;
			width: 30px;
			height: 20px;
			float: left;
			font-size: 12px;
			text-align: center;
			line-height: 20px;
			text-decoration: none;
		}
		#content {
			width: 400px;
			height: 200px;
			background: #f5f5f5;
		}
	</style>
	<body>
		<div class="wrap">
			<div id="content"></div>
			<!--页码导航 -->
			<div id="pagenav"></div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		totalNum = 100;//总页数 
		pageSize = 3;//每页显示数量 
		totalPage = Math.ceil(totalNum/pageSize);//总页数的计算公式
		createPageNav(1);
		function createPageNav(pageIndex) {
			//每页页码不超过9页
			//pageIndex保持在中间
			var pageIndex = parseInt(pageIndex);
			start = pageIndex - 4 > 0 ? pageIndex - 4 : 1;
			end = pageIndex + 4 < totalPage ? pageIndex + 4 : totalPage;
			end = end - start < 8 ? (start+8>totalPage ? totalPage : start+8) : end;
			//如果是最后一页，向前保持所有的
			if(end == totalPage) {
				start = totalPage - 8 > 0 ? totalPage - 8 : 1;
			}
			document.getElementById('pagenav').innerHTML = "";
			for(var i=start; i<=end; i++){	
				var a = document.createElement('a');
				a.innerHTML = i;
				//自定义属性  在标签a里面会显示 <a data-page="i">i</a>
				a.dataset.page = i;
				a.href = "###";
				a.onclick = ViewNews;
				document.getElementById('pagenav').appendChild(a);
			}
		}
		function ViewNews(){
			var pageIndex = this.dataset.page;
			createPageNav(pageIndex);
			$.ajax({
				type: "get",
				url: "news.php",
				data: {"pageIndex":pageIndex},
				async: true,
				dataType: "json",
				success: function(data) {
					//将新闻数据显示出来
					createNews(data);
				}
			})
		}
		function createNews(data) {
			var news = "";
			for(var i = 0;i< data.length;i++) {
				news += "<li>"+data[i][0]+"</li>";
			}
			$('#content').html(news);
		}
	</script>
</html>

PHP代码段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
	/**
	 * intval 将字符串转换成整数
	 * pageIndex  第几页新闻
	 * pageIndex = 3  (从1 开始)
	 * pageSize = 3  每页显示几条新闻
	 */
	$news = array();
	for($i=0;$i<100;$i++) {
		$news[] = array("新闻$i");
	}
	$pagaIndex = empty($_GET['pageIndex']) ? 1 : intval($_GET['pageIndex']);
	$pageSize = 3;
	$start = ($pagaIndex - 1) * $pageSize;
	$outNews = array();
	for($i=0;$i<$pageSize;$i++) {
		if(!empty($news[$start + $i])){
			$outNews[] = $news[$start + $i];
		}	
	}
	echo json_encode($outNews);
?>

欢迎来到大瑞的微博

展开全文 >>

浅谈前后台交互

前后台交互

举例：外卖餐厅订餐

  • 初识状态：
1
2
3
4
<form method="get">
    <div>丽德快餐厅</div>
 	<input type="button" name="button" id="btn" value="立即订餐">  
</form>
  • 具体的菜单（菜品+价格），前台要从后台获取，这时就要前台想后台发送一个数据，jquery将Ajax封装。以GET方式向后台提交数据，链接后台的地址存在URL里面，async判断是否异步，一般都会选择true，异步，因为同步会出现卡顿现象，dataType，要求后台给我们返回的数据类型，success数据传送成功后生成的函数，函数里面的参数就是后台给我们返回的数据。
    根据上图的流程，可以理解为，用户 通过脚本语言的 Ajax，向服务器传送HTTP请求，服务器将请求处理后返回一组数据到Ajax，经过一些列编码成HTML和CSS呈现给用户。毕竟所有的程序最终都要转化为HTML和CSS用户才能看到。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
		type: "get", //数据提交类型
		url: "form-2.php?action=num",
		data: {},
		dataType: "json",
		async: true,
		success: function(data){
			for(i in data) {	
				var div = document.createElement('div');
				document.body.appendChild(div);
				$("<span>"+data[i][0]+"</span> <span class='price'>"+data[i][1]+"</span> <input type='checkbox' name='key[]' value="+i+"/> 订餐份数：<input type='text' name='amount_"+i+"'/>").appendTo(div);
			}
		}
	});
  • 前台通过GET传送的请求，后台也要用GET方法接受，接受后将前台的需求返回。
1
2
3
4
5
6
7
8
9
10
$menu = array();
	$menu[] = array("红烧肉",10);
	$menu[] = array("烤鸡", 20);
	$menu[] = array( "鲍鱼", 30);
	$menu[] = array( "青菜汤",4);
	//返回界面所需要的数据
	if(!empty($_GET["action"])) {
		$jsonstr = json_encode($menu);
		echo $jsonstr;
	}
  • 这样前台的界面就会形成。

image.png

  • 界面形成后，用户开始订餐

image.png

  • 此时前台需要将用户选中的菜品和所选份数的数据传递给后台，后台将所选菜品对应的价格与份数相加，计算出总价，返回给前台，前台将接受到的数据呈现给用户
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$("#btn")[0].onclick = function() {
		var arrIndex = [];
		var strIndex = '';
		var arrCount = [];
		var strCount = '';
        //遍历界面中的复选框，将勾选中的下标和对应的份数保存到数组里面
		$('input:checkbox').each(function(index,val) {
			if(val.checked == true) {
				arrIndex.push(index);
				arrCount.push($('input:text')[index].value)
			}
        //将数组变成字符串：=> 用字符串传递比较安全
			strIndex = arrIndex.join();
			strCount = arrCount.join();
		})
		$.ajax({
			type: "post", //数据提交类型
			url: "form-2.php",
			data: {"key":strIndex,"amount_":strCount},
			dataType: "json",
			async: true,
			success: function(data){
				$("<h4>您的总订单：</h4>").appendTo(document.body);
				for(var i =0;i<data.length-1;i++) {
					$("<div></div>").html(data[i].name+"　份数："+data[i].amount+"　小计："+data[i].price).appendTo(document.body);
				}
				$("<span></span>").html("总价:").appendTo(document.body);
				$("<span></span>").html(data[2].total).appendTo(document.body);
			}
		});
	}
  • 前台通过POST方法，将勾选框的下标 key 和对应的份数 amount_ 传送到后台，后台接受到数据之后进行处理，将小计与最后的总价返回给前端。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if(!empty($_POST["key"])){
	    $totalPrice = 0;
	    $userSelected = array();
	    $keys = explode(',',$_POST['key']);
	    $amount = explode(',',$_POST['amount_']);
	    foreach($keys as $key => $val){
		     $amount1 = $amount[$key];
		     $userSelected[$key]['name'] = $menu[$val][0];
		     $userSelected[$key]['price']= $menu[$val][1]*$amount1;
		     $userSelected[$key]['amount'] = $amount[$key];
		     $totalPrice += $userSelected[$key]['price'];
	    }
	    $userSelected[]['total'] = $totalPrice;
//	     recordMenu($userSelected);
	     echo json_encode($userSelected);
	}
  • 结果如下（简易版网上订餐）

image.png

  • 旁白：前端与服务器的交互。一个请求对应一个回应。

展开全文 >>

ajax和jsonp区别

ajax和jsonp区别

  1. ajax和jsonp的调用方式很像
    • 目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
  2. 实质不同
    • ajax的核心是通过xmlHttpRequest获取非本页内容
    • jsonp的核心是动态添加script标签调用服务器提供的js脚本
  3. 区别联系
    • 不在于是否跨域
    • ajax通过服务端代理一样跨域
    • jsonp也不并不排斥同域的数据的获取
  4. jsonp是一种方式或者说非强制性的协议
    • ajax也不一定非要用json格式来传递数据

  • 原生script跨域方法–jsonp

    script跨域方法
    script跨域方法

  • JQ对jsonp进行封装

    image.png

script跨域方法

  • $.ajax()方法参数详解

    • data:
      要求为 Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动 转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:”bar1”,foo2:”bar2”}转换 为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo: [“bar1”,”bar2”]}转换为&foo=bar1&foo=bar2。
    • dataType:
      要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
      • xml：返回XML文档，可用JQuery处理。
      • html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
      • script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
      • json：返回JSON数据。
      • jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
      • text：返回纯文本字符串。
    • success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
      (1)由服务器返回，并根据dataType参数进行处理后的数据。
      (2)描述状态的字符串。
      function(data, textStatus){
      //data可能是xmlDoc、jsonObj、html、text等等
this;  //调用本次ajax请求时传递的options参数
      }

    • jsonp：
      要求 为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里 的”callback”部分，例如{jsonp:’onJsonPLoad’}会导致将”onJsonPLoad=?”传给服务器。

    • processData：
      要 求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类 型”application/x-www-form-urlencoded”。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

    • contentType：
      要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。

  • 利用JQ封装的Ajax实现文件上传

image.png

image.png

展开全文 >>

json_encode

  1. json_encode 对变量进行JSON编码，该方法可以对出了resource类型的意外的所有类型进行json编码，编码成功则返回以JSON形式表示的string或者在失败的时候返回FALSE。

  2. json_decode 对JSON格式的字符串进行编码

json_decode(string &json [bool $assoc])
参数1 为待解码的json string 格式的字符串。参数2 如果为true则返回array而非object
JSON数据的四个基本规则：
1> 并列的数据之间用逗号“，”分隔
2>映射用冒号 “：”表示
3>并列数据的集合（数组）用方括号”[]”表示
4>映射的集合（对象）用大括号“{}”表示。
php代码

运行结果

  1. JSON.parse()
    在JS中使用JSON.parse()方法用于将JSON字符串转化为对象
    经常用于ajax在php端返回使用json_encode处理的json数据，而在ajax的success方法中则需要使用JSON.parse()方法将其转换为对象
    script代码
    运行结果

但是有时候使用JSON.parse()也会出错
image.png
image.png

当映射的对象是汉字，并且中间有”\“的时候JSON.parse()会报错，但是用eval不会

image.png
image.png

但当映射的对象是英文时，两个都不会报错，但是反斜杠后面的内容不会显示

image.png

image.png

使用JSON.parse()，只有严格按照json格式的字符串才能输出

至于JSON.parse和eval的区别及利弊则引用《高性能Javascript》书中的一句话：

警告：关于JSON和eval需要注意的是：在代码中使用eval是很危险的，特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，
尽可能使用JSON.parse()方法解析字符串本身。该方法可以捕捉JSON中的语法错误，并允许你传入一个函数，用来过滤或转换解析结果。
如果此方法以备Firfox 3.5 、IE8 及 Safari 4 原生支持。大多数javascript类库包含的JSON解析代码会直接调用原生版本,如果没有原生支持的话，会调用一个略微不那么强大的非原生版本来处理

展开全文 >>

JSONP 的工作原理

JSONP 的工作原理

1. JSONP由来

根据浏览器同源策略，所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访问 b域名的信息，但是script 标签的src属性可以跨域引用文件，jsonp是请求之后后台包装好一段json，并且把数据放在一个callback函数，返回一个js文件，动态引入这个文件，下载完成js之后，会去调用这个callback,通过这样访问数据。

2. JSONP有什么用

由于同源从略的限制，XMLHttpRequest只允许请求前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后再服务端输出JSON数据并执行回调函数，从而解决跨域数据请求

3. 如何使用JSONP

  • HTML代码
    HTML代码
  • PHP代码
    PHP代码

4. JSONP原理

首先在客户端注册一个callback，然后把callback的名字传给服务器。此时，服务器先生成json数据，然后以javascript语法的方式，生成function，function名字就是传递上来I带参数jsonp。最后将json数据直接以入参的方式，放置function中，这样就生成js语法的文档，返回给客户端。客户端浏览器，解析script变迁，并执行返回javascript文档，此时数据作为参数，传入了客户端预先定义好的callback函数里。
简单的说，就是利用script标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。

5. 备注

#####json 是一种数据格式

#####jsonp 是一种数据调用的方式，

联系 带callback的json就是jsonp

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家