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

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

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

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

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


饭面类

  • 特色小吃
  • 酒水饮品
  • 酒水
  • 饮品
  • 二、修改内容

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

    
    

    (2)进行数据库遍历

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

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

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

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

    
    
    
    
    ×
    修改
       
         
          关闭   提交    
      

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

    $(".aa1").click(function(){
    varcode=$(this).attr("code");//找到code值
    $.ajax({
    url:"xiugaichuli.php",//编写处理页面
    data:{c:code},//将code值传过去
    type:"POST",
    dataType:"TEXT",
    success:function(d){
    varhang=d.split("|");//拆分字符“|”串:显示行
    varstr="";
    for(vari=0;i

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

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

    $("#tijiao").click(function(){
    varcode=$(".name").attr("code");//找到名称中的代号
    varcode=$(".price").attr("code");//找到价格的代号
    varname=$(".name").val();//找到名称的值
    varprice=$(".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("修改成功!");
    }
    }
    })
    })

    三、添加内容

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

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

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

    $("#tijiao1").click(function(){
    varn=$("#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="externalnofollow";
    }
        })
    })

    (3)处理页面的编写

    Query($sql);
    foreach($attras$v)
    {
    $c=$v[0]+1;//使最大值加1
    $sqll="insertintocaidanvalues('{$j}','{$c}','{$n}','1101','','','')";//写入数据库
    $db->Query($sqll,0);
    echo"ok";
    }
    ?>

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

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

    发布于 2021-07-09 21:18:24
    分享
    海报
    172
    上一篇:Flutter如何实现菜单弹出框PopupMenuButton功能 下一篇:CSS中如何是Position定位属性
    目录

      忘记密码?

      图形验证码