您的位置：首页 > Web前端

AJAX例子（前端数据添加到数据库）

2017-05-17 19:53 169 查看

一个AJAX例子。

不同的是这次的数据要添加到数据库中，然后再前端显示出来（）。

话不多说，上代码：

view：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<base href="<?php echo base_url();?>">
<title>页面</title>
</head>
<body>
<h1>学生信息录入</h1>
<label for="stuName">姓名：</label>
<input type="text" id="stuName" ><br>
<label for="stuAge">年龄</label>
<input type="text" id="stuAge" ><br>
<label for="stuNumber">学号</label>
<input type="text" id="stuNumber" ><br>
<input type="button" id="send" value="提交">
<p id="Result"></p>
<script src="jq/jquery-3.2.1.min.js"></script>
<script>
document.getElementById("send").onclick=function () {
$.ajax({
type:"POST",
url: "index.php/Welcome/insert",
data:{
stuName: $('#stuName').val(),
stuAge:$('#stuAge').val(),
stuNumber:$('#stuNumber').val()
},
dataType:'text',
success:function (data) {
if(data){
document.getElementById('Result').innerHTML=data;
$("input:not('#send')").val('');
}
},
error:function () {
document.getElementById('Result').innerHTML="出错啦！";
$("input:not('#send')").val('');
}

});
}

</script>
</body>
</html>

model：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Insert extends CI_Model{
public function __construct()
{
parent::__construct();
//     $this->db->database();
}
public function insert_users($data){
return  $this->db->insert('test',$data);
}

}

controllers：

public function insert(){
$this->load->model('Insert');
$data = array(
'name'=>$_POST['stuName'],
'age'=>$_POST['stuAge'],
'number'=>$_POST['stuNumber']
);
$this->Insert->insert_users($data);
echo $data['name']."保存成功";

}

输入数据：

保存成功：

数据库信息：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： AJAX 后端前端基础数据库

相关文章推荐

新的分享

章节导航