较简单的用ajax修改和添加功能(链接数据库)

修改和添加关于数据库的信息,可以用于任何的添加和修改

这些数据库和前面的随笔数据库是一样的

一、显示出数据库中的信息

(1)显示的效果也可以是用bootstrap的标签页显示(前面一定要引入bootstrap)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< ul id="myTab" class="nav nav-tabs">
       < li class="active" style=" font-size:30px" >< a href="#home" data-toggle="tab"> 饭面类 a >
       li >
       < li style=" font-size:30px">< a href="#ios" data-toggle="tab">特色小吃 a > li >
       < li class="dropdown" style=" font-size:30px">
             < a href="#" id="myTabDrop1" class="dropdown-toggle"data-toggle="dropdown">酒水饮品 < b class="caret"> b >
             a >
             < ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" style=" font-size:25px">
                 < li >< a href="#jmeter" tabindex="-1" data-toggle="tab">
                     酒水 a >
                 li >
                 < li >< a href="#ejb" tabindex="-1" data-toggle="tab">
                     饮品 a >
                 li >
             ul >
       li >
ul >

二、修改内容

 (1)标题显示之后,就是每一个标题中的内容了,可以用ajax遍历

1
2
3

"mian" >

      

(2)进行数据库遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
     url: "mianlei.php" ,   //编写处理页面
     dataType: "TEXT" ,
     success: function (d){
         var hang = d.split( "|" );  //拆分字符“|”串:显示行
         var str = "" ;
         for ( var i=0;i
         {
             var lie = hang[i].split( "^" );  //拆分字符串“^”:显示列
             str += " " ;
         }
       $( "#mian" ).html(str);   //把遍历的内容写在上面的                    
         }
})   

(3)处理页面的编写如下

1
2
3
4
5
6
include ( "DBDA.php" );  //调用封装好的数据库类
$db = new DBDA(); 
 
$sql = "select * from caidan where fcode =('1101')" //查询符合父级号的所有信息
echo $db ->StrQuery( $sql );  //输出结果

(4)然后进行修改的内容可以用模态框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      < div class="modal-dialog">
           < div class="modal-content">
                < div class="modal-header">
                         < button type="button" class="close" data-dismiss="modal" aria-hidden="true">× button >
                         < h4 class="modal-title" id="myModalLabel">修改 h4 >
               div >
               < div class="modal-body" id="content">
                    
               div >
              < div class="modal-footer">
                  < button type="button" class="btn btn-default" data-dismiss="modal">关闭 button >
                  < button type="button" class="btn btn-primary" id="tijiao">提交 button >
               div >
           div >
      div >
div >  

(5)修改的时候,里面要默认显示原来的名字和价格,所以要将前面遍历的代号传过来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$( ".aa1" ).click( function (){
     var code = $(this).attr( "code" );  //找到code值
     $.ajax({
         url: "xiugaichuli.php" //编写处理页面
         data:{c:code},  //将code值传过去
         type: "POST" ,
         dataType: "TEXT" ,
         success: function (d){
             var hang = d.split( "|" );  //拆分字符“|”串:显示行
             var str = "" ;
             for ( var i=0;i
             {
                 var lie = hang[i].split( "^" );  //拆分字符串“^”:显示列
                 str += "
名称:

价格:
"
;
             }
                                         
             $( "#content" ).html(str);  //写入模态框中的content的位置
                    }
     })
                                     
})

较简单的用ajax修改和添加功能(链接数据库)_第1张图片

(6)单击提交按钮后写入数据库,并且这里也修改了,单击提交按钮进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$( "#tijiao" ).click( function (){
     var code = $( ".name" ).attr( "code" );   //找到名称中的代号
     var code = $( ".price" ).attr( "code" );  //找到价格的代号
     var name = $( ".name" ).val();  //找到名称的值
     var price = $( ".price" ).val();  //找到价格的值
     $.ajax({
         url: "tjsk.php" //处理页面的编写
         data:{n:name,p:price,c:code},  //将值传到处理页面
         type: "POST" ,
         dataType: "TEXT" ,
         success: function (data){  ///处理页面成功后输出
             if (data.trim()== "ok" )
             {
               alert( "修改成功!" );
             }
                                                             
         }
     })
})

较简单的用ajax修改和添加功能(链接数据库)_第2张图片   较简单的用ajax修改和添加功能(链接数据库)_第3张图片       

三、添加内容

(1)同上面的写一个弹框,里面有文本框

1
"tianjia" data-toggle= 'modal' data-target= '#myModall' >添加菜品
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class = "modal-content" >
     
class = "modal-header" >
         
         

class = "modal-title" id= "myModalLabel" >添加菜品

     
     
class = "modal-body" id= "content" >
         
"name" >名称: "text" id= "ming" />
         
     
"price" >价格: "text" id= "jia" />
     
     
class = "modal-footer" >
         
     

较简单的用ajax修改和添加功能(链接数据库)_第4张图片

(2)填写信息后,单击提交按钮写入数据库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$( "#tijiao1" ).click( function (){
     var n = $( "#ming" ).val();  //找到名称文本框的值
     j = $( "#jia" ).val();  //找到价格文本框的值
     $.ajax({
         url: "tianjia.php" //编写处理页面
         data:{n:n,j:j},  //将值传过去
         type: "POST" ,
         dataType: "TEXT" ,
         success: function (d){
             if (d.trim()== "ok" )
             {
               alert ( "添加成功!" );
             }
            window.location.href= "xiugaicanpin.php" ;
         }  
    }) 
})               

(3)处理页面的编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
     include ( "DBDA.php" );
     $db = new DBDA();
     
     $n = $_POST [ "n" ];  //将传来的值接收
     $j = $_POST [ "j" ];
     
     $sql = " select max(code) from caidan where fcode='1101' " //查找这个父级代号的最大代号
     $attr = $db ->Query( $sql );
     foreach ( $attr as $v )
     {
         $c = $v [0]+1;  //使最大值加1
         $sqll = " insert into caidan values('{$j}','{$c}','{$n}','1101','','','')" //写入数据库
         $db ->Query( $sqll ,0);
         echo "ok" ;
     }
?>

(4)添加结束后看下结果

较简单的用ajax修改和添加功能(链接数据库)_第5张图片    

 

 

到此,结束了,简单的添加和修改的功能,后面还要增加删除功能~~

转载于:https://www.cnblogs.com/aqxss/p/6637800.html

你可能感兴趣的:(较简单的用ajax修改和添加功能(链接数据库))