Ajax 가 데이터베이스 에 기능 을 수정 하고 추가 합 니 다(비교적 간단 합 니 다)

데이터베이스 에 대한 정 보 를 수정 하고 추가 하면 이 데이터 베 이 스 를 추가 하고 수정 하 는 데 사용 할 수 있 습 니 다.앞의 에 세이 데이터 베 이 스 는 같 습 니 다.
1.데이터베이스 에 있 는 정 보 를 표시 합 니 다.
(1)보 여 주 는 효 과 는 boottstrap 의 탭 으로 표시 할 수도 있 습 니 다.(앞 에 boottstrap 을 꼭 도입 해 야 합 니 다)

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

내용 수정
 （1)제목 이 표시 되면 모든 제목 의 내용 입 니 다.ajax 로 옮 겨 다 닐 수 있 습 니 다.

<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='button' value='"+lie[2]+"' class='aa1' code='"+lie[1]+"' data-toggle='modal' data-target='#myModal'/> ";
  }
 　　$("#mian").html(str); //                
  }
}) 

(3)처리 페이지 의 작성 은 다음 과 같다.

<?php
include("DBDA.php"); //          
$db = new DBDA(); 
$sql = "select * from caidan where fcode =('1101')"; //            
echo $db->StrQuery($sql); //    

(4)그리고 수정 한 내용 은 모드 상 자 를 사용 할 수 있다.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title" id="myModalLabel">  </h4>
   　　　</div>
   　　 <div class="modal-body" id="content">
     <!--           -->
   　　 </div>
   　　　<div class="modal-footer">
    　　<button type="button" class="btn btn-default" data-dismiss="modal">  </button>
    　　<button type="button" class="btn btn-primary" id="tijiao">  </button>
   　　　</div>
   </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>　　

(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 += "<div>  ：<input type='text' value='"+lie[2]+"' code='"+lie[1]+"' class='name' /></div><br /><div>  ：<input type='text' value='"+lie[0]+"' code='"+lie[1]+"' class='price' /></div>";
   }
   $("#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)위 에 있 는 탄 상자 와 같이 안에 텍스트 상자 가 있다.

<div id="tianjia" data-toggle='modal' data-target='#myModall'>    </div>
<div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h4 class="modal-title" id="myModalLabel">    </h4>
  </div>
  <div class="modal-body" id="content">
   <div id="name">  ：<input type="text" id="ming"/></div>
   <br />
  <div id="price">  ：<input type="text" id="jia"/></div>
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-primary" id="tijiao1">  </button>
  </div>
</div>

(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='1101' "; //             
 $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)추가 완료 후 결과 보기

여기 서 끝 났 습 니 다.간단 한 추가 와 수정 기능,그리고 삭제 기능 도 추 가 됩 니 다~~
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 Ajax 가 데이터베이스 에 기능 을 수정 하고 추가 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!