Maison  >  Article  >  interface Web  >  Ajax pour modifier et ajouter des fonctions à la base de données (réponse plus simple)

Ajax pour modifier et ajouter des fonctions à la base de données (réponse plus simple)

韦小宝
韦小宝original
2018-01-01 19:47:152006parcourir

Cet article présente principalement Ajax pour modifier et ajouter des fonctions à la base de données (réponse courte). Il est très bien et a une valeur de référence. Les amis qui sont intéressés par ajax peuvent se référer à Ajax pour modifier et ajouter des fonctions à la base de données (courte). réponse). )

Modifier et ajouter des informations sur la base de données, qui peuvent être utilisées pour tout ajout et modification. Ces bases de données sont les mêmes que les bases de données d'essais précédentes

. 1. Afficher la base de données Les informations dans

(1) L'effet d'affichage peut également être affiché à l'aide de l'onglet bootstrap (le bootstrap doit être introduit avant)


<ul id="myTab" class="nav nav-tabs">
  <li class="active" style=" font-size:30px" ><a href="#home" rel="external nofollow" data-toggle="tab"> 饭面类</a>
  </li>
  <li style=" font-size:30px"><a href="#ios" rel="external nofollow" data-toggle="tab">特色小吃</a></li>
  <li class="dropdown" style=" font-size:30px">
   <a href="#" rel="external nofollow" 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" rel="external nofollow" tabindex="-1" data-toggle="tab">
     酒水</a>
    </li>
    <li><a href="#ejb" rel="external nofollow" tabindex="-1" data-toggle="tab">
     饮品</a>
    </li>
   </ul>
  </li>
</ul>


2. Modifier le contenu

( 1) Affichage du titre Après cela, il y a le contenu dans chaque titre Vous pouvez utiliser ajax pour parcourir


<p id="mian"> 
</p>


(2). ) pour parcourir la base de données


$.ajax({
 url:"mianlei.php", //编写处理页面
 dataType:"TEXT",
 success: function(d){
  var hang = d.split("|"); //拆分字符“|”串:显示行
  var str = "";
  for(var i=0;i<hang.length;i++)
  {
   var lie = hang[i].split("^"); //拆分字符串“^”:显示列
   str += "<input type=&#39;button&#39; value=&#39;"+lie[2]+"&#39; class=&#39;aa1&#39; code=&#39;"+lie[1]+"&#39; data-toggle=&#39;modal&#39; data-target=&#39;#myModal&#39;/> ";
  }
   $("#mian").html(str); //把遍历的内容写在上面的     
  }
})


(3) La page de traitement est écrite comme suit


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


(4) Ensuite, le contenu modifié peut être modifié à l'aide de la boîte modale


<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <p class="modal-dialog">
   <p class="modal-content">
    <p class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title" id="myModalLabel">修改</h4>
      </p>
      <p class="modal-body" id="content">
     <!--这里是显示的修改的内容-->
      </p>
      <p class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      <button type="button" class="btn btn-primary" id="tijiao">提交</button>
      </p>
   </p><!-- /.modal-content -->
  </p><!-- /.modal -->
</p>  


(5) Lors de la modification, le nom et le prix d'origine doivent être affichés par défaut, il faut donc transmettre le code précédemment parcouru


$(".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<hang.length;i++)
   {
    var lie = hang[i].split("^"); //拆分字符串“^”:显示列
    str += "<p>名称:<input type=&#39;text&#39; value=&#39;"+lie[2]+"&#39; code=&#39;"+lie[1]+"&#39; class=&#39;name&#39; /></p><br /><p>价格:<input type=&#39;text&#39; value=&#39;"+lie[0]+"&#39; code=&#39;"+lie[1]+"&#39; class=&#39;price&#39; /></p>";
   }
   $("#content").html(str); //写入模态框中的content的位置
     }
 })
})


(6) Cliquez sur le bouton Soumettre pour écrire dans la base de données, et celle-ci est également modifiée, cliquez sur le bouton Soumettre pour apporter des modifications


$("#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("修改成功!");
   }
  }
 })
})



(1) Écrivez une boîte pop-up comme ci-dessus, avec une zone de texte à l'intérieur de


<p id="tianjia" data-toggle=&#39;modal&#39; data-target=&#39;#myModall&#39;>添加菜品</p>
<p class="modal-content">
  <p class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h4 class="modal-title" id="myModalLabel">添加菜品</h4>
  </p>
  <p class="modal-body" id="content">
   <p id="name">名称:<input type="text" id="ming"/></p>
   <br />
  <p id="price">价格:<input type="text" id="jia"/></p>
  </p>
  <p class="modal-footer">
   <button type="button" class="btn btn-primary" id="tijiao1">提交</button>
  </p>
</p>
(2) Après avoir rempli le informations, cliquez sur le bouton Soumettre pour écrire dans la base de données


(3) Traiter la rédaction de la page


$("#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" ;
  } 
    }) 
})


(4) Vérifiez les résultats après avoir ajouté


<?php
 include("DBDA.php");
 $db = new DBDA();
 $n = $_POST["n"]; //将传来的值接收
 $j = $_POST["j"];
 $sql = " select max(code) from caidan where fcode=&#39;1101&#39; "; //查找这个父级代号的最大代号
 $attr = $db->Query($sql);
 foreach($attr as $v)
 {
  $c = $v[0]+1; //使最大值加1
  $sqll = " insert into caidan values(&#39;{$j}&#39;,&#39;{$c}&#39;,&#39;{$n}&#39;,&#39;1101&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;)"; //写入数据库
  $db->Query($sqll,0);
  echo "ok";
 }
?>


Ça y est, les fonctions simples d'ajout et de modification, et la fonction de suppression sera ajoutée plus tard~~

Ce qui précède est la base de données Ajax introduite par l'éditeur Modifier et ajouter des fonctions (réponse plus simple), je l'espère. sera utile à tout le monde ! !

Recommandations associées :

Analyse Ajax et solutions aux causes des erreurs 415 lors du transfert de données au format json vers l'arrière-plan

AJAX images d'implémentation Méthodes de prévisualisation, de téléchargement et de génération de vignettes

Explication détaillée d'un exemple d'Ajax transmettant les valeurs des paramètres de tableau au serveur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn