AJAX做增删改查详细！

<!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-1.11.2.min.js"></script>
</head>

<body>
<div>
    <h1>新增</h1>
    辖区：<input type="text" id="xiaqu"/>
<br />
    姓名：<input type="text" id="name" />
<br />
    性别：<input type="text" id="sex" />
<br />
    证件：<input type="text" id="zhengjian" />
<br />
    电话：<input type="text" id="tel" />
<br />
    住址：<input type="text" id="zhuzhi" />
<br />
    <input type="submit" id="tj" value="添加" />
</div>
<div>
<h1>信息</h1>
<table width="100%" border="1px" cellspacing="0" cellspacing="0">
    <tr>
        <td>辖区</td>
        <td>姓名</td>
        <td>性别</td>
        <td>证件</td>
        <td>电话</td>
        <td>住址</td>
        <td>操作</td>
    </tr>

    <tbody id="aa1">
    </tbody>
</table>
<div style="border-left:2px solid #444; border-bottom:#444 2px solid; border-right:2px solid #444; text-align:center; display:none;color:red" id="ts">没有更多信息！！</div>
</div>
<div id="xgnr">

</div>
</body>
</html>
<script type="text/jscript">
jia();
//添加信息
$("#tj").click(function(){

    var xq = $("#xiaqu").val();
    var name = $("#name").val();
    var sex = $("#sex").val();
    var zj = $("#zhengjian").val();
    var tel = $("#tel").val();
    var zz = $("#zhuzhi").val();

    $.ajax({
    url:"add.php",
    data:{xq:xq,name:name,sex:sex,zj:zj,tel:tel,zz:zz},
    type:"POST",
    dataType:"text",
    success:function(data){
            if(data=="1")
            {
                //alert("添加成功");
                window.location.href="test.php";
            }
            else
            {
                alert("");
            }

        }
    })
})

//大方法
function jia()
{
//显示信息
$.ajax({
url:"cha.php",
type:"POST",
dataType:"text",
success: function(data){
        var str = "";
        if(data=="111")
        {
            $("#ts").css("display","block");
        }
        else
        {
        var hang = data.split("|");

        for(var i=0;i<hang.length;i++)
        {
            var lie = hang[i].split("^");

            str += "<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[5]+"</td><td>"+lie[6]+"</td><td><span class=‘sc1‘ bs=‘"+lie[0]+"‘>删除</span>&nbsp;&nbsp;&nbsp;<span class=‘xg1‘ bs=‘"+lie[0]+"‘>修改</span></td></tr>";
        }
        $("#aa1").html(str);

//删除信息
$(".sc1").click(function(){
var code = $(this).attr("bs")
if(confirm(‘确定删除么‘))
{
$.ajax({
        url:"shanchu.php",
        data:{a:code},
        type:"POST",
        dataType:"text",
        success:function(data){
            if(data=="1")
            {
                //alert("删除成功")
                window.location.href="test.php";
            }
            else
            {
                alert("删除失败")    

            }

        }
    })
}
})

//查询修改的信息
$(".xg1").click(function(){
var code = $(this).attr("bs")
$.ajax({
    url:"xiugai.php",
    data:{a:code},
    type:"POST",
    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 += "<h1>修改</h1><input type=‘hidden‘ id=‘yc‘ value=‘"+lie[0]+"‘ />辖区：<input type=‘text‘ id=‘xiaqu1‘ value=‘"+lie[1]+"‘/><br />姓名：<input type=‘text‘ id=‘name1‘ value=‘"+lie[2]+"‘/><br />性别：<input type=‘text‘ id=‘sex1‘ value=‘"+lie[3]+"‘/><br />    证件：<input type=‘text‘ id=‘zhengjian1‘ value=‘"+lie[4]+"‘/><br />    电话：<input type=‘text‘ id=‘tel1‘ value=‘"+lie[5]+"‘/><br />住址：<input type=‘text‘ id=‘zhuzhi1‘  value=‘"+lie[6]+"‘/><br /><input type=‘submit‘ id=‘xiugai‘ value=‘修改‘ />";
        }
        $("#xgnr").html(str);
//修改信息
$("#xiugai").click(function(){
var yc1 = $("#yc").val();
var xq1 = $("#xiaqu1").val();
var name1 = $("#name1").val();
var sex1 = $("#sex1").val();
var zj1 = $("#zhengjian1").val();
var tel1 = $("#tel1").val();
var zz1 = $("#zhuzhi1").val();
$.ajax({
url:"xiugaichuli.php",
data:{yc:yc1,xq:xq1,name:name1,sex:sex1,zj:zj1,tel:tel1,zz:zz1},
type:"POST",
dataType:"text",
success:function(data){
        if(data=="1")
        {
            //alert("添加成功");
            window.location.href="test.php";
        }
        else
        {
            alert("11");
        }
      }
    })
  })

}
})
})
}
}
})
}
</script>

添加处理页面


1

2

3

4

5

6

7

8

9

10

11

<?php

include("./xsdb.class.php");

$xq = $_POST["xq"];

$name = $_POST["name"];

$sex = $_POST["sex"];

$zj = $_POST["zj"];

$tel = $_POST["tel"];

$zz = $_POST["zz"];

$db = new xsdb();

$sql = "insert into shuju values(‘‘,‘{$xq}‘,‘{$name}‘,‘{$sex}‘,‘{$zj}‘,‘{$tel}‘,‘{$zz}‘)";

echo $db->Query($sql,0);

删除处理页面


1

2

3

4

5

6

7

8

<?php

include("./xsdb.class.php");

$code = $_POST["a"];

$db = new xsdb();

$sql = "delete from shuju where id=‘{$code}‘";

echo $db->StrQuery($sql,0);

修改处理页面（查找要修改的数据信息）


1

2

3

4

5

6

7

8

<?php

include("./xsdb.class.php");

$a = $_POST["a"];

$db = new xsdb();

$sql = "select * from shuju where id=‘{$a}‘";

echo $db->StrQuery($sql);

修改处理页面（实现数据修改）　　


1

2

3

4

5

6

7

8

9

10

11

12

<?php

include("./xsdb.class.php");

$yc = $_POST["yc"];

$xq = $_POST["xq"];

$name = $_POST["name"];

$sex = $_POST["sex"];

$zj = $_POST["zj"];

$tel = $_POST["tel"];

$zz = $_POST["zz"];

$db = new xsdb();

$sql = "update shuju set xiaqu=‘{$xq}‘,name=‘{$name}‘,sex=‘{$sex}‘,zhengjian=‘{$zj}‘,tel=‘{$tel}‘,zhuzhi=‘{$zz}‘ where id=‘{$yc}‘";

echo $db->Query($sql,0);

查询处理页面


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<?php

include("./xsdb.class.php");

$db = new xsdb();

$sql = "select * from shuju";

$r = $db->StrQuery($sql);

if($r)

{

    echo $r;   

}

else

{

    echo"111"; 

}

数据库封装及返回数据TEXT JSON 　　


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<?php

class xsdb

{

    public $host="localhost";

    public $uid = "root";

    public $pwd = "密码";

    public $dbname = "test";

    

    //成员方法

    public function Query($sql,$type=1)

    {

        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

        $r = $db->query($sql);

        

        if($type==1)

        {

            return $r->fetch_all();

        }

        else

        {

            return $r;

        }

    }

    

    //返回字符串的方法

    public function StrQuery($sql,$type=1)

    {

        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

        $r = $db->query($sql);

        

        if($type==1)

        {

            $attr = $r->fetch_all();

            $str = "";

            foreach($attr as $v)

            {

                $str .= implode("^",$v)."|";

            }

            

            return substr($str,0,strlen($str)-1);

        }

        else

        {

            return $r;

        }

    }

    

    //返回JSON

    function JSONQuery($sql,$type=1)

    {

        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

        $r = $db->query($sql);

        

        if($type==1)

        {

            return json_encode($r->fetch_all(MYSQLI_ASSOC));

        }

        else

        {

            return $r;

        }

    }

}

原文地址：https://www.cnblogs.com/phplearn/p/10610537.html

时间： 2024-11-13 09:38:46

AJAX做增删改查详细！的相关文章

vue实战(一):利用vue与ajax实现增删改查

vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> <%@ include file="../commons/taglib.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

sqlHelper做增删改查,SQL注入处理，存储值，cookie，session

一.存储值 eg:登录一个页面,在进入这个页面之前你怎么知道它登没登录呢?[在登录成功之后我们把状态保存起来] 存储值得方式有两种,一种是cookie,一种是session 1.1区别: 代码: if (SqlHelper.Exists(sSql, para)) { //cookie保存状态 if (chkRPwd.Checked) { Response.Cookies["name"].Expires = DateTime.Now.AddMinutes(1);//设置过期时间 //删除

MVC + EF 框架 对数据库做增删改查

这几天一直在看MVC 开发模式,其中借助EF框架对数据库进行 增删改查操作 现在就小小的总结一下吧 在使用EF操作数据库时,会首先添加 ADO.NET数据模型,这时,会为我们添加一个数据上下文类,使用这个类的对象可以对数据库做任何操作.所以在使用EF操作数据库之前 需要创建数据上下文对象. MyDatabaseEntities mde = new MyDatabaseEntities(); 1.使用EF 对数据库 做增加操作 1.1 创建一个需要被操作数据表的对象(一般来说 ,一张表就是一个实体

MVC学习-用EF做增删改查

在DbContext中有两个很重要的方法: 一.几个方法的说明 1.一个是Entry()方法: public DbEntityEntry<TEntity> Entry<TEntity>(TEntity entity) where TEntity : class; 可以将 任何类型的数据放入到上下文对象中 DbEntityEntry有个 属性EntityState,它可以为上下文中的对象做标识,并依照标识的值做相应的sql操作 public enum EntityState { De

MVC中的Ajax与增删改查（二）

上一篇记录的是前台操作,下面写一下后台 ,本来自认为是没有必要做补充,毕竟思路啥的都有,实际上在做删除操作的时候,折腾了一天,还是自己太嫩,逻辑不够严谨,这里作下记录. 关于表结构这里再作下说明: ①表A是三个联合主键,key1,key2,... ②表B是四个联合主键 key1,key2,key3,... ③A表主键是B表外键 ④A,B表的某个栏位的描述信息都来自语言表C ⑤C表联合主键(TableName,TableKey,Language,Desc,...) ⑥如果记录A表描述信息: Tab

summer框架做增删改查-总结

1.datatable的显示 function initTable(){ $('#wzcbkList').dataTable().fnDestroy(); $('#wzcbkList').dataTable({ "ordering": false,//排序 "searching": false,//表格自带搜索栏 "serverSide": true,//异步请求必须设置 'bPaginate': true, //是否分页 "sPagi

AJAX普通增删改查

引用文件 <link href="~/BootstrapSouce/css/bootstrap.css" rel="stylesheet" /><script src="~/BootstrapSouce/js/bootstrap.min.js"></script><script src="~/BootstrapSouce/js/jquery.min.js"></script

ajax参考增删改查

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

SSM做增删改查时常见的错误

项目一错误总结 常见的服务器启动404报错,可能出现的原因: 1)启动项目的路径写的不对. 2)由于我在GitHub中拉下来的文件,导入eclipse中时,parent项目导入的信息与其他的项目导入到内容不符合,导致每次改动后不会生效.也不会扫描到web层 经过重新导入以后就可以了. 3)使用postman发送GET或者POST请求时,出现404的报错是由于不是通过json数据请求的. 做修改方法时,每次按照id,name修改后,会更新全部的数据? 说明id值没有生效,查看mapper.xml时