PHP小例子（8）-- 通过jQuery实现数据插入

最新推荐文章于 2024-08-29 14:28:28 发布

三哥自尊心强

最新推荐文章于 2024-08-29 14:28:28 发布

阅读量126

点赞数

分类专栏： PHP 文章标签： php jquery bootstrap ajax

本文链接：https://blog.csdn.net/yaoguoxing/article/details/112095937

版权

PHP 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

功能：Ajax添加数据，jQuery实现页面元素添加
Bootstrap 5 + PHP 7.2 测试
参考：https://www.webslesson.info/2016/02/dynamically-add-remove-input-fields-in-php-with-jquery-ajax.html
SQL文件

--
-- 使用test数据库
--

CREATE TABLE IF NOT EXISTS `tbl_name` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 ;

name.php

<?php  
    $connect = mysqli_connect("localhost", "root", "password", "test");  
    $number = count($_POST["name"]);  
    if($number > 0)  
    {  
        for($i=0; $i<$number; $i++)  
        {  
            if(trim($_POST["name"][$i] != ''))  
            {  
                    $sql = "INSERT INTO tbl_name(name) VALUES('".mysqli_real_escape_string($connect, $_POST["name"][$i])."')";  
                    mysqli_query($connect, $sql);  
            }  
        }  
        echo "数据添加成功";  
    }  
    else  
    {  
        echo "数据无效";  
    }  
 ?>

add.php //前端展示文件

<!doctype html>
<html lang="en">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  

    <title>Bootstrap 5 powered</title>
    </head>
    <body>
        <div class="container"> 
            <h2 class="text-center mt-5">jQuery生成DOM元素，并通过jQuery实现添加</h2>  
            <div class="form-group">  
                <form name="add_name" id="add_name">  
                    <div class="table-responsive">  
                        <table class="table table-bordered" id="dynamic_field">  
                            <tr>  
                                    <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>  
                                    <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                            </tr>  
                        </table>  
                        <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                    </div>  
                </form>  
            </div>  
    </div>
   

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <script>  
        $(document).ready(function(){  
            var i=1;  
            $('#add').click(function(){  
                i++;  
                $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
            });  
            $(document).on('click', '.btn_remove', function(){  
                var button_id = $(this).attr("id");   
                $('#row'+button_id+'').remove();  
            });  
            $('#submit').click(function(){            
                $.ajax({  
                        url:"name.php",  
                        method:"POST",  
                        data:$('#add_name').serialize(),  
                        success:function(data)  
                        {  
                            alert(data);  
                            $('#add_name')[0].reset();  
                        }  
                });  
            });  
        });  
    </script>
    </body>
</html>```

三哥自尊心强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PHP小例子（8）-- 通过jQuery实现数据插入

功能：Ajax添加数据，jQuery实现页面元素添加Bootstrap 5 + PHP 7.2 测试参考：https://www.webslesson.info/2016/02/dynamically-add-remove-input-fields-in-php-with-jquery-ajax.htmlSQL文件---- 使用test数据库--CREATE TABLE IF NOT EXISTS `tbl_name` ( `id` int(11) NOT NULL AUTO_INCRE
复制链接

扫一扫

专栏目录