风吹起如花般破碎的流年，而你的笑容摇晃摇晃，成为我命途中最美的点缀!
Php爱好者新版上线啦！
-9 11

php jquery ajax增加 删除 修改

Category:jquery学习 View: Author:燕子

        jquery确实比js的代码简单多了，尤其体现在ajax上，只要几句就搞定了！我用jquery写了个ajax的增加删除 修改程序 ！贴出来供php爱好者和爱好php学习，爱好jqueryr学习的朋友参考参考！希望可以帮助大家！

jquery代码：

<SCRIPT src="../js/jquery.js" type=text/javascript ></SCRIPT>

<script type="text/javascript">
$(document).ready(function(){
 //关闭窗口
 $(".close").click(function(){
         $("#myform,#myform2").hide();
         $("#myform,#myform2").animate({top:($(document).scrollTop()-60)+"px"},"normal",function(){$(this).hide();});
 });
 //增加弹出窗口
 $("#addA").click(function(){
  if($("#myform").css("display")=="none")
        {
            $("#myform").show();
   $("#myform").animate({top:($(document).scrollTop()+60)+"px"},"normal");
        }
 });
 //增加
 $("#addGroup").click(function(){
  if($("#pdesc").val() == ""){
   alert('不能为空');
  }else{
   var str="ac=add"+"&pdesc="+$("#pdesc").val();
   $.ajax({
    type:"post",
    url:"productAction.php",
    data:str,
    dataType:"json",
    success:function(data){
     //alert(data);
     alert(data);
     if(data['status'] == 0){
      alert("类别不能为空");
     }else if(data['status'] == 1){
      alert("该类别已存在！");  
     }else if(data['status'] == 2){
      alert("操作成功！"); 
      $("<option></option>").val(data['id']).text(data['text']).appendTo($("#oldPdesc"));
      $("#oldPdesc").val(data['id']);
      $("#myform").hide();
     }else{
      alert("操作失败！"); 
      $("#myform").hide();
     } 
    }
    
   });  
  }   
 }); 
 
 //修改
 $("#modifyA").click(function(){
  if($("#myform2").css("display")=="none")
        {
            $("#myform2").show();
   $("#myform2").animate({top:($(document).scrollTop()+60)+"px"},"normal");
   //得到当前选中的下拉列表的值和文本
   var a = $("select[name='oldPdesc'] option:selected").text();
   var id = $("select[name='oldPdesc'] option:selected").val();
   $("#mPdesc").val(a);
   $("#mId").val(id);
        }       
 });
 //修改提交
 $("#modifyGroup").click(function(){
  if($("#mPdesc").val() == ""){
   alert('类别不能为空');
  }else{
   var id=$("select[name='oldPdesc'] option[selected]").val()
   var str="ac=modify"+"&pdesc="+$("#mPdesc").val()+"&id="+id;
   $.ajax({
    type:"post",
    url:"productAction.php",
    data:str,
    success:function(msg){
     if(msg==0){
      alert("类别不能为空");
     }else if(msg == 1){
      alert("该类别已存在！");  
     }else if(msg == 2){
      alert("操作成功！"); 
     //修改option的文本
        $("select[name='oldPdesc'] option:selected").text($("#mPdesc").val()); 
        $("#myform2").hide();
     }else{
      alert("操作失败！"); 
      $("#myform2").hide();
     } 
    }
    
   });  
  }        
 });
 
 //删出类别的
 $("#deleteA").click(function(){
  var id=$("select[name='oldPdesc'] option[selected]").val()
   var str="ac=del"+"&id="+id;
   $.ajax({
    type:"post",
    url:"productAction.php",
    data:str,
    success:function(msg){
     if(msg==1){
      alert("操作成功！");
      //删除当前的option
      $("#oldPdesc").get(0).removeChild($("#oldPdesc option[selected]").get(0));
     }else{
      alert("操作失败！"); 
     } 
    }
    
   }); 
 });
 
});

</script>

html代码：

 <table width="38%" border="0" align="center" cellspacing="1" bgcolor="#eeeeee">
    <tr>
      <td colspan="2" class="fontText">产品管理</td>
    </tr>
    <tr class="fontText">
      <td width="22%" align="right" bgcolor="#FFFFFF">产品类别：</td>
      <td width="78%" bgcolor="#FFFFFF"><label>
        <select name="oldPdesc" id="oldPdesc">
        <?php
         foreach($result as $v){
  ?>
          <option value="<?php echo $v['id'];?>"><?php echo $v['pdesc'];?></option>
          <?php
   }
    ?>
        </select>
       <a href="javascript:;" id="addA">增加</a> |<a href="javascript:;" id="modifyA"> 修改</a> | <a href="javascript:;" id="deleteA">删除</a></label></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </table>
 
<div id="myform"class="floatAdd" >
 <form action="" method="post" name="form1" class="fontText" id="form1">
    <table width="300" border="0" bgcolor="#eeeeee" cellspacing="1">
  <tr>
    <td><span id="error"></span>
      增加产品类别
  <label>
  </label></td>
    <td align="right"><a href="#" class="close">[关闭]</a></td>
    </tr>
  <tr>
    <td bgcolor="#FFFFFF">类别名称：</td>
    <td bgcolor="#FFFFFF"><input type="text" name="pdesc" id="pdesc"/></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#FFFFFF"><input type="button" id="addGroup" name="addGroup" value="提交" />
      <input type="hidden" id="ac" name="ac" value="add"/></td>
    </tr>
    </table>

 </form>
</div>

<!--修改类别的-->
 <div id="myform2" class="floatAdd">
 <form action="" method="post" name="form1" class="fontText" id="form1">
    <table width="300" border="0" bgcolor="#eeeeee" cellspacing="1">
  <tr>
    <td><span id="error"></span>
      修改产品类别
  <label>
  </label></td>
    <td align="right"><a href="#" class="close">[关闭]</a></td>
    </tr>
  <tr>
    <td bgcolor="#FFFFFF">类别名称：</td>
    <td bgcolor="#FFFFFF"><input type="text" name="mPdesc" id="mPdesc"/></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#FFFFFF"><input type="button" id="modifyGroup" name="modifyGroup" value="提交" />
      <input type="hidden" id="ac" name="ac" value="modify"/>
       <input type="hidden" id="mid" name="mid" value=""/>
      </td>
    </tr>
    </table>

 </form>

productAction中的代码

<?php
require_once('../config.inc.php');
require_once('../include/dbConnection.class.php');
require_once('../inc/sql.fun.php');
$db = new dbConnection(DSN);
$ac = $_REQUEST['ac'];
//添加产品类别
if($ac == "add"){
 $data = array();
 if(!$_POST['pdesc'])
 {
  $data['status'] = 0;
  echo json_encode($data);
 }else{
  //查看是否存在
  $query = "select pdesc from productsgroup where pdesc = '{$_POST['pdesc']}'";
  $db -> execute($query);
  $result = $db -> fetch();
  if($result[0]['pdesc']){
   $data['status'] = 1;
   echo json_encode($data);
  }else{
   $userName="admin";
   $query = "insert into productsgroup(ptab,username,pdesc)value(1,'{$userName}','{$_POST['pdesc']}')"; 
   $db->execute($query,2);
   if($db -> affectedRows > 0){
    $data['status'] = 2;
    $data['id'] = $db->insertId;
    $data['text'] = $_POST['pdesc'];
    echo json_encode($data);
   }else{
    $data['status'] = 3;
    echo json_encode($data);
   }
  }
 }
}
///修改产品类别
elseif($ac == "modify"){
 if(!$_POST['pdesc'])
 {
  echo "0";
 }else{
  //查看是否存在
  $query = "select pdesc from productsgroup where pdesc = '{$_POST['pdesc']}'";
  $db -> execute($query);
  $result = $db -> fetch();
  if($result[0]['pdesc']){
   echo 1;  
  }else{
   $query = "update productsgroup set pdesc = '{$_POST['pdesc']}' where id = {$_POST['id']}"; 
   $db -> execute($query,3);
   if($db -> affectedRows > 0){
    echo 2; 
   }else{
    echo 3; 
   }
  }
 }
}
//删除产品类别
elseif($ac == "del"){
 $rows = delete("productsgroup","id = '{$_POST['id']}'");
 if($rows > 0){
  echo 1;
 }else{
  echo 0;
 }
}
?>

 

 


本文来源于php爱好者：php教程 —http://www.phplover.cn/
原文地址：http://www.phplover.cn/post/php-jquery-ajax.html

jquery   评论(0)

相关文章:

发表评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。