Ajax를 사용하여 데이터베이스 수정 및 추가 기능을 구현하는 세부 단계

이번에는 데이터베이스 수정 및 추가 기능을 구현하는 Ajax의 세부 단계를 알려 드리겠습니다. Ajax가 데이터베이스 수정 및 추가 기능을 구현하는 데 필요한 Notes는 무엇입니까? 다음은 실제 사례입니다.

데이터베이스에 대한 정보를 수정하고 추가하며 추가 및 수정에 사용할 수 있습니다. 이 데이터베이스는 이전 에세이 데이터베이스와 동일합니다

1. 데이터베이스에 정보를 표시합니다.

(1) 표시 효과 bootstrap의 탭 페이지를 사용하여 표시할 수도 있습니다(부트스트랩이 먼저 소개되어야 함)

<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. 내용 수정

(1) 제목이 표시된 후 거기에 이제 ajax traversal

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

(2)을 사용하여 데이터베이스를 탐색할 수 있습니다

$.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) 처리 페이지는 다음과 같이 작성됩니다

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

(4) 그런 다음 수정된 내용은 다음을 사용하여 수정할 수 있습니다. the modal box

<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) 기본적으로 원래 이름과 가격이 표시되어야 하므로 이전에 통과한 코드는 반드시 전달되어야 합니다

$(".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) 제출 버튼을 클릭하고 데이터베이스에 작성합니다. , 여기에서도 수정이 되었는데, 제출 버튼을 눌러 진행하세요. 수정

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

3. 콘텐츠 추가

(1) 위와 같이 팝업창을 작성하고 안에 텍스트 상자를 작성합니다.

<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) 정보를 입력한 후 제출 버튼이 데이터베이스에 기록됩니다

$("#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) 페이지 작성 처리 중

<?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('{$j}','{$c}','{$n}','1101','','','')"; //写入数据库
  $db->Query($sqll,0);
  echo "ok";
 }
?>

(4) 추가 후 결과 확인

이제 끝입니다. 간단한 추가 및 수정 기능은 추후 추가하겠습니다. 삭제 기능 추가~~

이 기사의 사례를 읽으신 후 방법을 익히셨을 것이라 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사를 확인하세요!

추천 자료:

Ajax 요청 서버 로딩 데이터 목록 대기의 사용자 경험 최적화

Ajax를 사용하여 반환된 태그에 스타일을 동적으로 추가하는 방법

위 내용은 Ajax를 사용하여 데이터베이스 수정 및 추가 기능을 구현하는 세부 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!