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

最新推荐文章于 2022-11-28 22:14:50 发布

叫我邱球球

最新推荐文章于 2022-11-28 22:14:50 发布

阅读量1.4w

点赞数 5

分类专栏： AJAX简述文章标签： AJAX 后端前端基础数据库

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/72427138

版权

AJAX简述专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一个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").οnclick=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']."保存成功";

    }

输入数据：