Introduction to AJAX delete events and loading data methods-JS Tutorial-php.cn

Introduction to AJAX delete events and loading data methods

高洛峰

Release： 2017-03-12 11:25:45

Original

1217 people have browsed it

This article talks about AJAXDelete Eventand load data methodIntroduction

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery/jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>显示数据</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
   <tr>
       <td>代号</td>
        <td>名称</td>
        <td>操作</td>
    </tr>
    <tbody id="tb">
    </tbody>
</table>
</body>
<script type="text/javascript">
加载数据
Load();

Copy after login

How to load data

function Load()
{
$.ajax({
      url:"jiazai.php",
      dataType:"TEXT",
      success: function(data){
            var str = "";
            var hang = data.split("|");
            for(var i=0;i<hang.length;i++)
            {
               var lie = hang[i].split("^");
               str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><input type=&#39;button&#39; code=&#39;"+lie[0]+"&#39; value=&#39;删除&#39; class=&#39;sc&#39; /></td></tr>";
            }
            $("#tb").html(str);

Copy after login

Delete event

          $(".sc").click(function(){
               var code = $(this).attr("code");
               $.ajax({
                  url:"shanchu.php",
                  data:{code:code},
                  dataType:"TEXT",
                  type:"POST",
                  success: function(d){
                     if(d.trim()=="OK")
                     {
                        alert("删除成功");
                        Load();
                     }
                     else
                     {
                        alert("删除失败");
                     }
                  }
                  });
               })
         }
   });
}
</script>
</html>

Copy after login

The above is the detailed content of Introduction to AJAX delete events and loading data methods. For more information, please follow other related articles on the PHP Chinese website!