有时候，对于html上的元素，我们不能表单直接提交给PHP，或者由于动态新增不能简单的通过Form来获取新增的表单信息。
因此，就需要：
1、通过js来实现对html上元素信息的抓取。
2、然后通过{}和[]组成json形式的对象，通过jQuery中的Ajax提交给PHP页面。
3、PHP页面通过$_POST方法获取提交的json形式对象，并进行解析，进一步处理。
4、再通过mysqli对象，将PHP里处理的数据写入到数据库中。
下面我们通过一个简单的例子来实现下：
1 html简单设计
我们实现一个动态新增填写内容：
录入：学号、姓名、性别三个字段，并填写提交人信息，
最终写入mysql数据库TestDB的Students表中。
先设计一个最简单的html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例：Ajax提交Json类型对象至PHP写入mySql</title>
<!-- 引入标准bootstrap文件和jQuery文件 -->
<script src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script src="js/bootstrap.min.js"></script>
<!-- 引入自定义的css和js -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<form class="form-horizontal" role="form">
<div id="btn">
<div class="col-sm-2">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
新增
</button>
</div>
<div class="col-sm-2">
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
删除
</button>
</div>
<div class="col-sm-3"></div>
<div class="input-group">
<span class="input-group-addon">用户名</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button id="btn_submit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-asterisk"></span>
提交
</button>
</span>
</div>
</div>
<div id="list">
<!-- js动态新增 -->
</div>
</form>
</div>
</body>
</html>
其main.css文件，进行简单配置：
body{
padding: 20px 15%;
}
1.png
上面的html简单的加了一个form表单（也可不用form），其中div#btn中存放了所有的按钮，div#list是我们需要动态新增的列表字段行。
2 JS按钮事件
2.1 新增按钮事件
动态新增这块我们用jQuery实现：
$(function(){
var cnt = 0;
var sex = ['男','女'];
// 新增按钮
$("#btn_add").click(function(){
cnt += 1;
$("#list").append('<div class="form-group" id="l'+cnt+'"></div>');
$("#l"+cnt).append('<div class="col-sm-4"></div>');
$($("#l"+cnt+" > div")[0]).append('<input type="text" class="form-control" name="stu_no" placeholder="学号">');
$("#l"+cnt).append('<div class="col-sm-4"></div>');
$($("#l"+cnt+" > div")[1]).append('<input type="text" class="form-control" name="stu_name" placeholder="姓名">');
$("#l"+cnt).append('<div class="col-sm-4"></div>');
$($("#l"+cnt+" > div")[2]).append('<select class="form-control"></select>');
sex.forEach(function(ele,ind){
$("#l"+cnt+" > div > select").append('<option>'+ele+'</option>');
});
});
})
效果演示：
2.png
2.2 删除按钮事件
删除按钮的事件很简单，就是把按照cnt，降序将其remove()掉。
// 删除按钮
$("#btn_delete").click(function(){
if(cnt > 0){
$("#l" + cnt).remove();
cnt -= 1;
}
});
3 设计mySQL数据库
这里为了简单演示，数据库就设计一张单表。其DDL如下：
CREATE DATABASE STUDENTS default character set utf8 collate utf8_general_ci;
USE STUDENTS;
CREATE TABLE IF NOT EXISTS t_stu(
FID INT NOT NULL AUTO_INCREMENT, # 主键
USERNAME VARCHAR(20) NOT NULL,
STUNO VARCHAR(255) NOT NULL,
STUNAME VARCHAR(10) NOT NULL,
STUSEX VARCHAR(10) NOT NULL,
CREATETIME TIMESTAMP NOT NULL,
primary key(FID)
)ENGINE=InnoDB DEFAULT CHARSET=utf8;
3.png
4 Ajax提交
4.1 取值
我们简单实现，如下：
判断cnt大于0和用户名填写的情况下，就去取新增按钮新增的学号、姓名、性别。
不考虑新增了一行后，没填写的情况，也不做过多空校验等其他校验，
仅仅实现简单的数据提取，生成一个Object对象（Json形式），然后Ajax提交这个抓取生成的Object给PHP。
var dataJson = function(){
var d_username = $('input[name="username"]').val();
if(cnt > 0 && d_username != ""){
var d_stuno = [];
$.each($('input[name="stu_no"]') ,function(index,domEle){
d_stuno.push(domEle.value);
});
var d_stuname = [];
$.each($('input[name="stu_name"]') ,function(index,domEle){
d_stuname.push(domEle.value);
});
var d_stusex = [];
$.each($('select option:selected') ,function(index,domEle){
d_stusex.push(domEle.value);
});
return {
'username' : d_username,
'stuno' : d_stuno,
'stuname' : d_stuname,
'stusex' : d_stusex
};
}else{
return undefined;
}
};
4.2 Ajax提交
$("#btn_submit").click(function(){
var obj = dataJson();
if(obj != undefined){
$.ajax({
type : 'post',
url : 'submit.php',
data : obj,
success : function(htmltxt){
if(htmltxt == 200){
alert("提交成功");
}else{
alert("提交失败");
}
}
})
};
});
5 PHP写入数据库
注意：这里的主页html需要用(http://localhost)去访问，才能提交给PHP。
5.1 PHP接收
<?php
header("Content-type:text/html;charset=utf-8");
header('Access-Control-Allow-Origin:*');
// 获取Ajax提交的数据
$username = @$_POST['username'];
$stuno = @$_POST['stuno'];
$stuname = @$_POST['stuname'];
$stusex = @$_POST['stusex'];
?>
PHP中加@，可以屏蔽错误。
5.2 PHP连接mySQL
//mySQL连接
$link = mysqli_connect(
'localhost',
'root',
'',
'STUDENTS'
);
if (!$link) {
printf("Can't connect to MySQL Server. Errorcode: %s ", mysqli_connect_error());
exit;
}
mysqli_set_charset($link,'utf8');
5.3 PHP判断用户名是否提交过
// 判断用户名是否提交过
$sql ="select * from t_stu where username ='".$username."';";
$result = mysqli_fetch_array(mysqli_query($link, $sql));
if(!empty($result)){
echo 404; // 提交失败，用户名已在数据库中存在
}else{
echo 200; // 提交成功
};
5.4 PHP写入mySQL
$sql ="select * from t_stu where username ='".$username."';";
$result = mysqli_fetch_array(mysqli_query($link, $sql));
if(!empty($result)){
echo 404; // 提交失败，用户名已在数据库中存在
}else{
// 写入数据库表
$cnt = count($stuno);
for($i = 0; $i < $cnt; $i++){
$sql ="insert into t_stu (username, stuno, stuname, stusex, createtime) VALUES ('"
.$username. "','"
.$stuno[$i]. "','"
.$stuname[$i]. "','"
.$stusex[$i]. "',"
."now());";
mysqli_query($link, $sql);
}
echo 200; // 提交成功
};
4.png
5.png
5.5 PHP关闭数据库连接
// 关闭数据库连接
mysqli_close($link);
网友评论