前台提交数据到php mysql_Ajax提交数据至PHP，并写入到MySQL

有时候，对于html上的元素，我们不能表单直接提交给PHP，或者由于动态新增不能简单的通过Form来获取新增的表单信息。

因此，就需要：

1、通过js来实现对html上元素信息的抓取。

2、然后通过{}和[]组成json形式的对象，通过jQuery中的Ajax提交给PHP页面。

3、PHP页面通过$_POST方法获取提交的json形式对象，并进行解析，进一步处理。

4、再通过mysqli对象，将PHP里处理的数据写入到数据库中。

下面我们通过一个简单的例子来实现下：

1 html简单设计

我们实现一个动态新增填写内容：

录入：学号、姓名、性别三个字段，并填写提交人信息，

最终写入mysql数据库TestDB的Students表中。

先设计一个最简单的html页面：

案例：Ajax提交Json类型对象至PHP写入mySql

新增

删除

用户名

提交

其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('

$("#l"+cnt).append('

$($("#l"+cnt+" > div")[0]).append('');

$("#l"+cnt).append('

$($("#l"+cnt+" > div")[1]).append('');

$("#l"+cnt).append('

$($("#l"+cnt+" > div")[2]).append('');

sex.forEach(function(ele,ind){

$("#l"+cnt+" > div > select").append(''+ele+'');

});

});

})

效果演示：

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接收

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);

谢谢大家查阅，QQ号：237476510，喜欢的话，请点击收藏！

原创教程，转载请说明出处，谢谢