AJAX例子(前端数据添加到数据库)

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

    }

输入数据:


保存成功:


数据库信息:


  • 5
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个简单的例子: HTML页面中,可以使用jQuery库的ajax方法发送请求并接收后端数据,示例代码如下: ```html <!DOCTYPE html> <html> <head> <title>AJAX Example</title> <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="result"></div> <script> $.ajax({ url: "/api/data", // 后端接口地址 method: "GET", // 请求方法 success: function(data) { // 成功回调函数 $("#result").html(data); // 显示后端返回的数据 }, error: function() { // 失败回调函数 alert("请求数据失败!"); } }); </script> </body> </html> ``` 这里使用了jQuery库中的ajax方法,通过设置url、method、success和error参数来发送请求、处理响应和处理异常。其中,url表示后端接口地址,method表示请求方法(GET、POST、PUT等),success和error分别表示请求成功和失败时的回调函数。在success回调函数中,我们将后端返回的数据显示在页面上,这里使用了jQuery库的html方法。 后端接口可以根据具体需求来设计,这里以Python Flask框架为例,示例代码如下: ```python from flask import Flask app = Flask(__name__) @app.route('/api/data') def get_data(): data = "Hello, World!" return data if __name__ == '__main__': app.run() ``` 这里定义了一个路由/api/data,当接收到GET请求时,返回字符串"Hello, World!"。当然,实际应用中,我们可以从数据库中查询数据等,然后将结果返回给前端页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值