PHP+MySQL+AJAX+JSON簡單實例

建立數據庫：

DROP SCHEMA IF EXISTS tt;
CREATE SCHEMA IF NOT EXISTS tt;

USE tt;

DROP TABLE IF EXISTS t_course;
CREATE TABLE IF NOT EXISTS t_course(
	course_id SMALLINT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
	course_num varchar(30) NOT NULL,
	course_name VARCHAR(150) NOT NULL,
	course_time SMALLINT UNSIGNED NOT NULL DEFAULT 20,
	course_credit DECIMAL(2,1) UNSIGNED NOT NULL DEFAULT 0,
	course_property varchar(30) NOT NULL
)ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT t_course (course_num,course_name,course_time,course_credit,course_property) VALUES('091M5002H','TCP/IP協議及網絡編程技術',40,2.0,'專業普及課'); 
INSERT t_course (course_num,course_name,course_time,course_credit,course_property) VALUES('201M5015H','操作系統安全',40,2.0,'專業普及課');
INSERT t_course (course_num,course_name,course_time,course_credit,course_property) VALUES('201M5016H','高級計算機體系結構',40,2.0,'專業普及課');
INSERT t_course (course_num,course_name,course_time,course_credit,course_property) VALUES('15MGB003H-07','英語-C',40,2.0,'專業必修課');

index.html文件：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>課程管理</title>
		<link rel="stylesheet" type="text/css" href="css/main.css">
	</head>
	<body>
		<div class="container">
			<h2>課程管理</h2>
		</div>
		<div class="container">
			<div class="course">
				<table class="data">
					<tr>
						<td>課程編號</td>	
						<td style="width:300px">課程名稱</td>	
						<td>課時</td>	
						<td>學分</td>	
						<td style="width:300px">課程屬性</td>
						<td style="width:240px;">
							<a id="addCourse" class="addCourse" href="javascript:;"/>添加課程</a>
						</td>							
					</tr>
				</table>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"> </script>
		<script type="text/javascript" src="js/course.js"> </script>
	</body>
</html>

main.css文件：

body{
	background-color:#ffffff;
	text-align:center;
}

.container {
	margin-top:60px;
}

.course{
	margin-left:30px;
}

td {
	font-size:20px;
	width:200px;
	height:40px;
	text-align:center;
	color:black;
	background-color:white;
}

.addCourse:hover{
	background-color:#aaaacc;
}
.addCourse{
	text-decoration:none;	
	cursor:pointer;
}

input.txtField{
	width:100px;
	height:30px;
}

js文件：

首先去jquery官網http://jquery.com/下載：
jquery-3.1.1.min.js
jquery-3.1.1.js
二者的不同請問搜索引擎

course.js:

$(function(){
	var g_table = $("table.data");
	var init_data_url = "data.php?action=init_data_list";
	$.get(init_data_url,function(data){
		var row_items = $.parseJSON(data);
		for( var i = 0 , j = row_items.length ; i < j ; i++) {
			var data_dom = create_row(row_items[i]); 
			g_table.append(data_dom);
		}
	});
    
	function create_row(data_item){
		var row_obj = $("<tr></tr>");
		for(var k in data_item){
			if("course_id" != k){
				var col_td = $("<td></td>")	
				col_td.html(data_item[k]);
				row_obj.append(col_td);
			}
		}

		//delButton
		var delButton = $('<a class="optLink" href="javascript:;">刪除 </a>');
		delButton.attr("dataid",data_item['course_id']);
		delButton.click(delHandler);
        
		//editButton
		var editButton = $('<a class="optLink" href="javascript:;">編輯 </a>');
		editButton.attr("dataid",data_item['course_id']);
		editButton.click(editHandler);

		var opt_td = $('<td></td>');
		opt_td.append(delButton);
		opt_td.append(editButton);
		row_obj.append(opt_td);
		return row_obj;
	}
	
	//delHandler
	function delHandler(){
		var data_id = $(this).attr("dataid");
		var meButton = $(this);
		$.post("data.php?action=del_row",{dataid:data_id},function(res){
				if("ok" == res)	{
					$(meButton).parent().parent().remove();
				} else {
					alert("刪除失敗!");	
				}
		});
	}

    //editHandler
	function editHandler(){
		var data_id = $(this).attr("dataid");
		var meButton = $(this);
		var meRow = $(this).parent().parent();
		
		var editRow = $("<tr></tr>");
		for(var i = 0 ; i < 5 ; i++){
			var editTd = $("<td><input type='text' class='txtField'/></td>");	
			var v = meRow.find('td:eq('+i+')').html();			
			editTd.find('input').val(v);
			editRow.append(editTd);
		}
		
		var opt_td = $('<td></td>');
		//saveButton
		var saveButton = $("<a href='javascript:;' class='optLink'>保存 </a>");
		saveButton.click(function(){
				var currentRow = $(this).parent().parent();
				var input_fields = currentRow.find("input");
				var post_fields = {};
				post_fields['course_num'] = input_fields[0].value;
				post_fields['course_name'] = input_fields[1].value;
				post_fields['course_time'] = input_fields[2].value;
				post_fields['course_credit'] = input_fields[3].value;
				post_fields['course_property'] = input_fields[4].value;
				post_fields['course_id'] = data_id;
				$.post('data.php?action=edit_row',post_fields,function(res){
					if("ok" == res){
						var newUpdateRow = create_row(post_fields);		
						currentRow.replaceWith(newUpdateRow);
					} else {
						alert("數據更新失敗!");	
					}
				});
		});
        
		//cancelButton
		var cancelButton = $("<a href='javascript:;' class='optLink'>取消 </a>");
		cancelButton.click(function(){
				var currentRow = $(this).parent().parent();		
				meRow.find('a:eq(0)').click(delHandler);
				meRow.find('a:eq(1)').click(editHandler);
				currentRow.replaceWith(meRow);
		});

		opt_td.append(saveButton);
		opt_td.append(cancelButton);
		editRow.append(opt_td);
		meRow.replaceWith(editRow);
	}

	
    //addCourse
	$("#addCourse").click(function(){
		var addRow = $("<tr></tr>");	
		for(var i = 0 ; i < 5 ; i++){
			var col_td = $("<td><input type='text' class='txtField'/></td>");	
			addRow.append(col_td);
		}	

		var col_opt = $("<td></td>");
		//confirmButton
		var confirmBtn = $("<a href='javascript:;' class='optLink'>確認 </a>");
		confirmBtn.click(function(){
			var currentRow = $(this).parent().parent();	
			var input_fields = currentRow.find("input");
			var post_fields = {};
			post_fields['course_num'] = input_fields[0].value;
			post_fields['course_name'] = input_fields[1].value;
			post_fields['course_time'] = input_fields[2].value;
			post_fields['course_credit'] = input_fields[3].value;
			post_fields['course_property'] = input_fields[4].value;
			$.post("data.php?action=add_row",post_fields,function(res){
				if(0 < res){
					post_fields['course_id'] = res;
					var postAddRow = create_row(post_fields);
					currentRow.replaceWith(postAddRow);
				} else {
					alert("插入失敗!");	
				}
			});	
		});
		
        //cancelButton
		var cancelBtn = $("<a href='javascript:;' class='optLink'>取消 </a>");
		cancelBtn.click(function(){
				$(this).parent().parent().remove();
		});
		
		col_opt.append(confirmBtn);
		col_opt.append(cancelBtn);
		addRow.append(col_opt);
		g_table.append(addRow);
	});
});

LAMP實驗環境

在瀏覽器地址欄輸入：localhost/course.結果如下，可以實現實時編輯表格，添加課程，其中用到了ajax異步請求，數據傳輸過程用到了json的數據格式

小實驗基本結構：

——css

——main.css

——js

——jquery-3.1.1.min.js

——data.php

——index.html

參考：http://www.imooc.com/learn/754，PHP+AJAX實現表格實時編輯

PHP+MySQL+AJAX+JSON簡單實例

【SQL進階】CASE語句的使用

npm error Cannot read properties of null (reading 'isDescendantOf')

PCA(Principal Components Analysis)

樸素貝葉斯算法（Naive Bayes）

K-means 算法

線性迴歸（Linear Regression）

K 鄰近算法（k-Nearest Neighbor，KNN）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結