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

Table of Contents

回复内容：

Home

Backend Development

PHP Tutorial

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>

Copy after login

求兄弟们能给个详细点的答案，实在是不懂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>

Copy after login

感谢感谢！

上面回答的，我没有采纳答案，实在是我水平有限，没有修改好。在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>

Copy after login

上面是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);
?>

Copy after login

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

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7832

Java Tutorial

1648

CakePHP Tutorial

1402

Laravel Tutorial

1300

PHP Tutorial

1240

Related knowledge

PHP and Python: Different Paradigms Explained Apr 18, 2025 am 12:26 AM

PHP is mainly procedural programming, but also supports object-oriented programming (OOP); Python supports a variety of paradigms, including OOP, functional and procedural programming. PHP is suitable for web development, and Python is suitable for a variety of applications such as data analysis and machine learning.

Choosing Between PHP and Python: A Guide Apr 18, 2025 am 12:24 AM

PHP is suitable for web development and rapid prototyping, and Python is suitable for data science and machine learning. 1.PHP is used for dynamic web development, with simple syntax and suitable for rapid development. 2. Python has concise syntax, is suitable for multiple fields, and has a strong library ecosystem.

Laravel Introduction Example Apr 18, 2025 pm 12:45 PM

Laravel is a PHP framework for easy building of web applications. It provides a range of powerful features including: Installation: Install the Laravel CLI globally with Composer and create applications in the project directory. Routing: Define the relationship between the URL and the handler in routes/web.php. View: Create a view in resources/views to render the application's interface. Database Integration: Provides out-of-the-box integration with databases such as MySQL and uses migration to create and modify tables. Model and Controller: The model represents the database entity and the controller processes HTTP requests.

PHP and Python: A Deep Dive into Their History Apr 18, 2025 am 12:25 AM

PHP originated in 1994 and was developed by RasmusLerdorf. It was originally used to track website visitors and gradually evolved into a server-side scripting language and was widely used in web development. Python was developed by Guidovan Rossum in the late 1980s and was first released in 1991. It emphasizes code readability and simplicity, and is suitable for scientific computing, data analysis and other fields.

PHP's Impact: Web Development and Beyond Apr 18, 2025 am 12:10 AM

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

Solve database connection problem: a practical case of using minii/db library Apr 18, 2025 am 07:09 AM

I encountered a tricky problem when developing a small application: the need to quickly integrate a lightweight database operation library. After trying multiple libraries, I found that they either have too much functionality or are not very compatible. Eventually, I found minii/db, a simplified version based on Yii2 that solved my problem perfectly.

Laravel framework installation method Apr 18, 2025 pm 12:54 PM

Article summary: This article provides detailed step-by-step instructions to guide readers on how to easily install the Laravel framework. Laravel is a powerful PHP framework that speeds up the development process of web applications. This tutorial covers the installation process from system requirements to configuring databases and setting up routing. By following these steps, readers can quickly and efficiently lay a solid foundation for their Laravel project.

MySQL vs. Other Programming Languages: A Comparison Apr 19, 2025 am 12:22 AM

Compared with other programming languages, MySQL is mainly used to store and manage data, while other languages such as Python, Java, and C are used for logical processing and application development. MySQL is known for its high performance, scalability and cross-platform support, suitable for data management needs, while other languages have advantages in their respective fields such as data analytics, enterprise applications, and system programming.

See all articles