Maison > interface Web > js tutoriel > 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)

韦小宝
Libérer: 2018-01-01 19:47:15
original
2033 Les gens l'ont consulté

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>
Copier après la connexion


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>
Copier après la connexion


(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); //把遍历的内容写在上面的     
  }
})
Copier après la connexion


(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); //输出结果
Copier après la connexion


(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>  
Copier après la connexion


(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的位置
     }
 })
})
Copier après la connexion


(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("修改成功!");
   }
  }
 })
})
Copier après la connexion



(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>
Copier après la connexion
(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" ;
  } 
    }) 
})
Copier après la connexion


(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";
 }
?>
Copier après la connexion


Ç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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal