Ajax如何实现向数据库修改和添加功能

这篇文章将为大家详细讲解有关Ajax如何实现向数据库修改和添加功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

十余年的紫云网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同,自动调整紫云建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“紫云网站设计”,“紫云网站推广”以来,每个客户项目都认真落实执行。

修改和添加关于数据库的信息,可以用于任何的添加和修改这些数据库和前面的随笔数据库是一样的

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

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


   饭面类
  
  特色小吃
  
   酒水饮品 
   
   
    
  •      酒水     
  •     
  •      饮品     
  •       

    Ajax如何实现向数据库修改和添加功能

    二、修改内容

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

     
    

    (2)进行数据库遍历

    $.ajax({
     url:"mianlei.php", //编写处理页面
     dataType:"TEXT",
     success: function(d){
      var hang = d.split("|"); //拆分字符“|”串:显示行
      var str = "";
      for(var i=0;i ";
      }
       $("#mian").html(str); //把遍历的内容写在上面的     
      }
    })

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

    StrQuery($sql); //输出结果

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

    
      
       
        
          ×
          修改
          
                       
                 关闭       提交       
       
         

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

    $(".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名称:
    价格:
    ";    }    $("#content").html(str); //写入模态框中的content的位置      }  }) })

    Ajax如何实现向数据库修改和添加功能

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

    $("#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如何实现向数据库修改和添加功能 Ajax如何实现向数据库修改和添加功能 Ajax如何实现向数据库修改和添加功能         

    三、添加内容

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

    添加菜品
    
      
       ×
       添加菜品
      
      
       名称:
       
      价格:
      
      
       提交
      
    

    Ajax如何实现向数据库修改和添加功能Ajax如何实现向数据库修改和添加功能

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

    $("#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" rel="external nofollow" ;
      } 
        }) 
    })

    (3)处理页面的编写

    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如何实现向数据库修改和添加功能 Ajax如何实现向数据库修改和添加功能

    关于“Ajax如何实现向数据库修改和添加功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    网站栏目:Ajax如何实现向数据库修改和添加功能
    网页URL:http://ybzwz.com/article/jjogdj.html

    其他资讯