PHP 小例子（3）--jQuery,Ajax 实现数据库添加

修改自：https://www.webslesson.info/2016/06/php-jquery-ajax-insert-radio-button-value-on-click.html
Bootstrap 5 + PHP7.2测试通过

test数据库下的表格

  --  
 -- Table structure for table `tbl_gender`  
 --  
 CREATE TABLE IF NOT EXISTS `tbl_gender` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `gender` varchar(20) NOT NULL,  
  PRIMARY KEY (`id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;  
 --

insert_radiobtn.php

<!DOCTYPE html>  
<html>  
    <head>  
        <title>jQuery 实现Radio 按钮数据添加 </title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    </head>  
    <body>  
        <br />  
        <div class="container" style="width:500px;">  
                <h3 class="text-center">选择下面的按钮，然后就可以通过Ajax实现数据添加到数据库</h3>  
                <div class="radio">  
                    <input type="radio" name="gender" value="Male" />Male <br />  
                    <input type="radio" name="gender" value="Female" />Female <br />  
                    <input type="radio" name="gender" value="Other" />Other <br />  
                </div>  
                <div id="result"></div>  
        </div>  
        <br />
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    </body>  
</html>  
<script>  
    $(document).ready(function(){
    
      
        $('input[type="radio"]').click(function(){
    
      
            var gender = $(this).val();  
            $.ajax({
    
      
                url:"insert.php",  
                method:"POST",  
                data:{
    
    gender:gender},  
                success:function(data){
    
      
                        $('#result').html(data);  
                }  
            });  
        });  
    });  
</script>

insert.php

 <?php  
  
 $host = "localhost";  
 $username = "root";  
 $password = "password";  
 $database = "test";  
 try  
 {
    
      
      $connect = new PDO("mysql:host=$host;dbname=$database",$username, $password);  
      $connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);  
      if(isset($_POST["gender"]))  
      {
    
      
           $query = "INSERT INTO tbl_gender(gender) VALUES (:gender)";  
           $statement = $connect->prepare($query);  
           $statement->execute(  
                array(  
                     'gender'     =>     $_POST["gender"]  
                )  
           );  
           $count = $statement->rowCount();  
           if($count > 0)  
           {
    
      
                echo "插入成功";  
           }  
           else  
           {
    
      
                echo '插入失败';  
           }  
      }  
 }  
 catch(PDOException $error)  
 {
    
      
      echo $error->getMessage();  
 }  
 ?>

PHP 小例子（3）--jQuery,Ajax 实现数据库添加

猜你喜欢