mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？-php教程-PHP中文网

回复内容：

首页

后端开发

php教程

mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 06, 2016 pm 08:50 PM

ajax jquery mysql php

先放我做好的效果图。如下图1为编辑前的效果，图2为点击“修改库存”后的效果。html和CSS已经弄出来了，但不懂javascript。修改后的数据直接通过后台php修改到mysql，若成功则直接返回数据到库存的td单元格。

mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？

然后是我的html代码。

<tr id="3308">
    <td><img  src="/static/imghw/default1.png"  data-src="/1369118039-3308.jpg!w120"  class="lazy" / alt="mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？" ></td>
    <td><strong>3308</strong></td>
    <td><span>3.97</span> M³</td>
    <td><span>2950.00</span> 元</td>
    <td>2013-05-21 14:36:20</td>
    <td><input type="text" placeholder="输入库存数"></input></td>
    <td><a class="button small success">保存修改</a></td>
</tr>

登录后复制

求兄弟们能给个详细点的答案，实在是不懂javascript啊，整个页面就差这一个功能实现了。另外，这样的表格有长长一列，我可以用php循环生成动态html标签id的。

感谢感谢！

回复内容：

mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？

然后是我的html代码。

<tr id="3308">
    <td><img  src="/static/imghw/default1.png"  data-src="/1369118039-3308.jpg!w120"  class="lazy" / alt="mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？" ></td>
    <td><strong>3308</strong></td>
    <td><span>3.97</span> M³</td>
    <td><span>2950.00</span> 元</td>
    <td>2013-05-21 14:36:20</td>
    <td><input type="text" placeholder="输入库存数"></input></td>
    <td><a class="button small success">保存修改</a></td>
</tr>

登录后复制

感谢感谢！

上面回答的，我没有采纳答案，实在是我水平有限，没有修改好。在php100也同提了这个问题，很快得到解决。下面贴上php100的答案，并附上链接，方便他人。

<!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 type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.9.1.min.js"></script>
<style type="text/css">
table{border-collapse:collapse}
td{border:1px #CCC solid;padding:5px;font-size:12px}
a{color:#069;text-decoration:none}
a:hover{color:#C00;text-decoration:underline}
a.button{display:block;border:1px #693 solid;background:#9C6;padding:4px;color:#FFF}
a.success{border-color:#369;background:#69C}
input{font-size:12px;border:1px #999 solid;padding:4px;width:40px;text-align:center}
</style>
</head>
<body>
<table id="dataList">
    <tr>
        <td><strong>3308</strong></td>
        <td><span>3.97</span> M3</td>
        <td><span>2950.00</span> 元</td>
        <td>2013-05-21 14:36:20</td>
        <td>
            <span>库存 0 套</span>
            <input style="display:none;" type="text" value="0" />
        </td>
        <td><a href="#" class="button small" rel="2">修改库存</a></td>
    </tr>
    <tr>
        <td><strong>3308</strong></td>
        <td><span>3.97</span> M3</td>
        <td><span>2950.00</span> 元</td>
        <td>2013-05-21 14:36:20</td>
        <td>
            <span>库存 0 套</span>
            <input style="display:none;" type="text" value="0" />
        </td>
        <td><a href="#" class="button small" rel="1">修改库存</a></td>
    </tr>
</table>
<script type="text/javascript">
$("#dataList a").click(function(){
    var a=$(this),td=a.parent().prev(),s=td.children('span'),i=td.children('input');
    if($.trim(a.text())=='修改库存'){
        a.text('保存修改').addClass('success');
        s.hide();
        i.show();
    }else{
        $.post('save.php',{id:a.attr('rel'),num:i.val()},function(r){
            alert(r.msg);
            if(r.status){
                s.html('库存 '+r.num+' 套');
                a.text('修改库存').removeClass('success');
                s.show();
                i.hide()
            }
        },'JSON')
    }
    return false
})
</script>

</body>
</html>

登录后复制

上面是html页面，下面是php

<?php
header("Content-type: text/html; charset=utf-8");
$r = array(
    'msg' => '错误！',
    'status' => FALSE,
    'num' => 0
);
if(isset($_POST['id']) && isset($_POST['num'])){
    if(is_numeric($_POST['id']) && is_numeric($_POST['num'])){
        $id = (int)$_POST['id'];
        $num = (int)$_POST['num'];
        $r['msg'] = '修改成功！';
        $r['num'] = $num;
        $r['status'] = TRUE;
    }else{
        $r['msg'] = '错误！[2]';
    }
}else{
    $r['msg'] = '错误！[1]';
}

echo json_encode($r);
?>

登录后复制

<code>$(document).ready(function() {
//为每一个具有相同id=cartUpdate 的 添加click事件
$("#cartUpdate").live("click",function(){
    var text=$(this).text();
    if(text=="修改数量"){
        var count = $(this).parent().prev().text();
        $(this).parent().prev().html("<input style='width:35px' min=1 type='number' value="+count +" />");
        $(this).text("确定");
    }else if(text=="确定"){
        var count2 = $(this).parent().prev().children().val();
        var id = $(this).parent().prev().prev().prev().prev().text();
        $.post("/cart/update", {
            "productId" : id,"count":count2
        }, function(data) {
            if(data=="ok"){
                $("#p" + id).next().next().next().text(count2);
                $("#p" + id).nextAll().find("button").text("修改数量");
            }else{
                alert("修改失败");
            }
        });
    }
});
</code>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1677

CakePHP 教程

1431

Laravel 教程

1334

PHP教程

1280

C# 教程

1257

显示更多

Related knowledge

session_start（）函数的意义是什么？ May 03, 2025 am 12:18 AM

session_start（）iscucialinphpformanagingusersessions.1）ItInitiateSanewsessionifnoneexists，2）resumesanexistingsessions，and3）setsasesessionCookieforContinuityActinuityAccontinuityAcconActInityAcconActInityAcconAccRequests，EnablingApplicationsApplicationsLikeUseAppericationLikeUseAthenticationalticationaltication and PersersonalizedContentent。

作曲家：PHP开发人员的软件包经理 May 02, 2025 am 12:23 AM

Composer是PHP的依赖管理工具，通过composer.json文件管理项目依赖。1)解析composer.json获取依赖信息；2)解析依赖关系形成依赖树；3)从Packagist下载并安装依赖到vendor目录；4)生成composer.lock文件锁定依赖版本，确保团队一致性和项目可维护性。

与其他关系数据库相比，使用MySQL的优点是什么？ May 01, 2025 am 12:18 AM

MySQL被广泛应用于各种项目中的原因包括：1.高性能与可扩展性，支持多种存储引擎；2.易于使用和维护，配置简单且工具丰富；3.丰富的生态系统，吸引大量社区和第三方工具支持；4.跨平台支持，适用于多种操作系统。

MySQL与Oracle：了解许可和成本 May 03, 2025 am 12:19 AM

MySQL采用GPL和商业许可，适合小型和开源项目；Oracle采用商业许可，适合需要高性能的企业。MySQL的GPL许可免费，商业许可需付费；Oracle许可费用按处理器或用户计算，成本较高。

MySQL与PhpMyAdmin：了解关键差异 May 06, 2025 am 12:17 AM

MySQL是数据库管理系统，phpMyAdmin是管理MySQL的Web工具。1.MySQL用于存储和管理数据，支持SQL操作。2.phpMyAdmin提供图形界面，简化数据库管理。

Navicat和Mysql：完美的合作伙伴关系 May 05, 2025 am 12:09 AM

Navicat和MySQL是绝配，因为它们能提高数据库管理和开发效率。1.Navicat简化了MySQL的操作，通过图形界面和自动生成SQL语句提升工作效率。2.Navicat支持多种连接方式，方便本地和远程管理。3.它提供了强大的数据迁移和同步功能，适合高级用法。4.Navicat有助于性能优化和最佳实践，如定期备份和查询优化。

PHP性能优化策略。 May 13, 2025 am 12:06 AM

phpapplicationscanbeoptimizedForsPeedAndeffificeby：1）启用cacheInphp.ini，2）使用preparedStatatementSwithPdoforDatabasequesies，3）3）替换loopswitharray_filtaray_filteraray_maparray_mapfordataprocrocessing，4）conformentnginxasaseproxy，5）

MySQL：SQL的实际应用 May 08, 2025 am 12:12 AM

MySQL受欢迎的原因是其性能卓越且易于使用和维护。1.创建数据库和表：使用CREATEDATABASE和CREATETABLE命令。2.插入和查询数据：通过INSERTINTO和SELECT语句操作数据。3.优化查询：使用索引和EXPLAIN语句提升性能。

See all articles

mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？

回复内容：

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题