html、php和js值的傳遞（使用ajax進行傳遞）

html、php和js值的傳遞（使用ajax進行傳遞）

在開發校企合作管理系統時，由於使用到了html、php和js之間的資料傳遞，所以這裡記下此方法方便日後使用。
使用的場景：js獲取checkbox的值後，將獲取的值傳遞給php。
即：html（前端頁面）->js->php（連線資料庫，對資料庫進行修改）

1.html
這裡主要使用了彈出框來彈出所查詢到的資料庫因此做了兩個table

<!--表格內容-->
<table id="qiye">
	<thead>
		<tr>
		<th><input type="checkbox"></th>
		<th>合作企業名稱</th>
		<th>企業聯絡人</th>
		<th>地址</th>
		<th>所屬行業</th>
		</tr>
	</thead>
<tbody>
<!--彈出框表格內容-->
<table style="font-family: '楷體';width: 770px">
	<tr>
		<td>合作企業名稱</td>
		<td><input type="text" id="newEnName"/></td>
		<td>企業聯絡人</td>
		<td><input type="text" id="newENlinkman"/></td>
	</tr>
	<tr>
		<td>企業所屬省份</td>
		<td><input type="text" id="newEnprovince"/></td>
		<td>企業地址</td>
		<td><input type="text" id="newEnaddress"/></td>
	</tr>
	<tr>
		<td>網址</td>
		<td><input type="text" id="newEninternet"/></td>
		<td>性質</td>
		<td><input type="text" id="newEnqualit"/></td>
		</tr>
	<tr>
		<td>所屬行業</td>
		<td><input type="text" id="newEnindustry"/></td>	
		<td>備註</td>
		<td><input type="text" id="newEndetail"/></td>
	</tr>
</table>
<div style="float: right;">
	<button class="my-btn-gray" onclick="cancel()">取消</button>
    <button class="my-btn-blue" onclick="save()">儲存</button>
</div>
</table>

2.js獲取html中的checkbox的值。
（需要注意的是getElementById/name要對應html的table名和checkbox名）

function getcheck(){
	var rows = document.getElementById("qiye").rows;
    var box = document.getElementsByName("check");
    var states = "";
    //var  table = document.getElementById("qiye");
    //獲取勾選的所有值
    for(var i=0;i<box.length;i++){
		if(box[i].checked){
			var row = box[i].parentElement.parentElement.rowIndex;
			states += rows[row].cells[1].innerHTML+";";
            //alert(rows[row].cells[1].innerHTML);
		}
	}

3.使用ajax將獲取的值傳遞給php
（在這裡需要注意的是html中需要呼叫jquery，同時由於php返回的資料為json格式因此這裡需要將json資料解析給變數方便傳遞給html）

    var table;
	$.ajax({
		type:'POST',
        url:"../DB/searchDB.php",
        data:{name:states},
        success: function(data){
			//alert("成功");
			table=JSON.parse(data);
		}
	});
	

4.php
該php頁面主要是連線資料庫（DB.php）並查詢資料庫

<?php
require("../../DB.php");
$name=$_POST['EnName'];
$sql="select * from enterprise where EnName='$name'";
$res=$conn->query($sql);
if($res){
	$table=$res->fetch_row();
}
$content=json_encode($table);
echo ($content);
	//echo $table[0],$table[1];
?>

完整功能程式碼（實現了對資料庫的修改）：
連結：https://pan.baidu.com/s/1bLSwVL2t3A4KGKBGGNDNyg
提取碼：qwpz