ajax处理增删改查

最新推荐文章于 2022-08-29 15:25:22 发布
最新推荐文章于 2022-08-29 15:25:22 发布
阅读量1.9k 收藏 10
点赞数
分类专栏： web前端 
前端处理
<!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;

        }

    }

}

小皇帝web前端
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现Ajax效果的增删改查
08-15
用javascript来实现Ajax效果的增删改查
使用Ajax实现简单的增删查改&&前端Ajax传的值，后端如何获取
蘇小白的博客
07-25 4001
实现查询和增删改一、Ajax最基本语法二、增删查改1.查询(Get请求)2.增删改(Post请求)三、后台(MVC/WebForm)1.MVC(Post请求)2.WebForm(Post请求) 本人小白一个。 其中所说可能有些不足，因为这些是我自己在写项目的过程中所使用的Ajax 如有不对的地方，欢迎评论提出建议。 一、Ajax最基本语法 话不多说，直接上代码 $.ajax({ url: "/User/GetUser",(这里写请求路径) type: "g
ajax增删改查基本使用
qq_61587842的博客
12-12 300
(1)删除操作 （2）修改弹出以及回显数据 （3）确认修改 （4）添加头部工具栏并开启复选框 （5）添加 private void update(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException { PrintWriter writer = resp.getWriter(); //接受请求的参数 ...
ajax实现增删查改
qq_57104988的博客
08-29 1780
【代码】ajax实现增删查改。
AJAX 增删改查
weixin_48658948的博客
05-18 766
1.1 首页布局 1.2 获取用户信息 A 在首页发送ajax请求 <div class="row"> <div class="col-md-1" style="background-color: #3a3d4c;height: 600px;"> <a href="/day02/stu" target="right" class="btn btn-block btn-link " style="color: white;">学生管理
springboot+vue+element增删改查Demo
05-24
springboot+vue+element增删改查Demo 集成了： 1. ​ restful接口定义 2. ​ 增删改查定义，路径参数定义 3. ​ 跨域处理 4. ​ 参数校验 5. ​ 异常拦截 6. ​ swagger文档 7. ​ 测试用例 8. ​ logback...
Spring mvc+Ajax用户登录增删改查功能
09-24
用户登录增删改查的小项目，但包括前台界面设计，js，jQuery,ajax调后台，获取返回结果在前台界面用JS代码中处理，轻量实用适合新手入门项目开发。
基于SSM框架的《超市订单管理系统》Web项目开发（第四天）用户管理，增删改查（日期插件的使用）
最新发布
09-21
基于SSM的超市订单管理系统-开发第四天 运行环境：该系统需要...今日效果：在前几天完成的基础之上，今天完善了用户管理页面的、新增用户、查看用户、删除用户、修改用户、处理json对象，引入日期插件WdatePicker.js
jsf1.2+spring3.0+hibernate3.3例子-单表增删改查
02-12
使用jsf1.2+spring3.0+hibernate3.3实现集成，利用annotation实现自动对象管理注入，用户表的登录增删改查操作，包括验证码ajax集成，消息机制，国际化处理，自定义转换器，自定义验证器等 qq：38732796 欢迎讨论
EmployeeManagementSystem:使用SSM框架搭建的一个简单的员工信息管理系统，实现了基本的增删改查整个流程
03-11
使用SSM框架搭建的一个简单的员工信息管理系统，实现了基本的增删改查整个流程 直接把war包放到tomcat的webapps目录下，重启即可运行 系统架构 功能分解 查询和分页显示 新增员工信息功能 数据验证，需要验证用户名...
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
10-18
主要介绍了jQuery+datatables插件实现ajax加载数据与增删改查功能,涉及jQuery结合datatables插件针对页面表格实现数据加载及增删改查等相关操作技巧,需要的朋友可以参考下
AJAX实现数据的增删改查操作详解【java后台】
10-15
主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下
Javaweb增删改查之简易项目，包括分页功能
08-01
此项目是一个简易的Java项目，运用了Java框架，jQuery，ajax，json，MySQL等技术，但此项目尚不完整，仅作为本人笔记只用，请勿下载
jquery与ajax实现增删改查
qq_45030966的博客
09-14 6107
jquery与ajax实现增删改查 对于本项目，jquery与ajax实现当前页面的增删改查 jquery获取当前页面的数据，ajax与后台接口进行连接，将后台数据返回到前端，将前端数据送回后台 准备操作： 1.将项目上传到云服务器上，并且通过 java -jar xxx.jar命令行运行当前jar包。运行成功后，打开http://ip:端口号/swagger-ui.html页面查看接口。 2.连接云服务器数据库 新建数据库，xxtx,将sql文件导入进来。导入成功之后，给当前云服务器的数据库创建用户名
java ajax实现增删改查,03.bootstrap+Ajax+SSM(maven搭建)实现增删改查
weixin_42114645的博客
03-13 670
功能点：分页数据校验ajaxRest风格的URI：使用HTTP协议请求方式的动词，来表示对资源的操作(GET(查询)，POST(新增)，PUT(修改)，DELETE(删除))技术点基础框架-ssm数据库mysql前端框架-bootstrap项目依赖 -Maven分页 -pagehelper逆向工程-Mybatis Generator实现效果添加按钮弹出模态框编辑按钮弹出模态框删除基础环境搭建1)新...
利用ajax获取数据对学生表进行简单的增删改查
weixin_44185304的博客
03-19 2140
利用ajax获取数据对学生表进行简单的增删改查
ajax请求实现学生信息的增改查
Liu_wen_wen的博客
08-12 2172
ajax请求实现学生信息的增改查
ajax实现增删查改英雄小案例
hi454的博客
11-28 1419
英雄案例实现过程 1.内容实现ajax的增删改查 目标 回顾ajax的操作，如果发请求和如何接收响应 回顾模板引擎的使用，完善整个异步操作实现动态渲染的过程 进一步理解前后台交互的流程 整体需要完成一套数据的增加删除修改和查询 回顾前端三层分离的原则 2前期准备 在合适的位置创建项目目录 将资料中资源拷贝到当前项目目录中 将页面的目录名称修改为views 用户列表页 这个页面主要的任务是来实现用户数据的动态渲染 1找到接口 2.ajax请求，获取数据 3.进行数据分析，分析获取的数据是否能够满足渲染的要求
Ajax全套增删改查：
weixin_43666859的博客
11-29 4711
Ajax全套增删改查： 下面的代码是写在zhanghao_create.js文件中的，然后在zhanghao_create.jsp页面中使用script标签将该js文件引入即可。 $(function(){ //这是JQuery中的页面加载函数 // 点击下拉菜单，就会进行查询身份下拉菜单 $.ajax({ url:&quot;/Pro_StudentMS/servlet/Accoun...
Ajax表格增删改查
05-27
好的，下面是关于使用 Ajax 实现表格增删改查的一些思路和代码示例。 1. 表格的展示 首先需要将表格展示在页面上，可以使用 HTML 的 table 标签和 tr、td 标签来创建表格。为了方便后续操作，可以给每一行的 tr ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值