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

Table des matières

回复内容：

Maison

développement back-end

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

Copier après la connexion

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

Copier après la connexion

感谢感谢！

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

Économie dans R.E.P.O. Expliqué (et enregistrer des fichiers)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes

4 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7569

Tutoriel CakePHP

1386

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

107

Afficher plus

Related knowledge

MySQL: une introduction à la base de données la plus populaire au monde Apr 12, 2025 am 12:18 AM

MySQL est un système de gestion de la base de données relationnel open source, principalement utilisé pour stocker et récupérer les données rapidement et de manière fiable. Son principe de travail comprend les demandes des clients, la résolution de requête, l'exécution des requêtes et les résultats de retour. Des exemples d'utilisation comprennent la création de tables, l'insertion et la question des données et les fonctionnalités avancées telles que les opérations de jointure. Les erreurs communes impliquent la syntaxe SQL, les types de données et les autorisations, et les suggestions d'optimisation incluent l'utilisation d'index, les requêtes optimisées et la partition de tables.

PHP et Python: comparaison de deux langages de programmation populaires Apr 14, 2025 am 12:13 AM

PHP et Python ont chacun leurs propres avantages et choisissent en fonction des exigences du projet. 1.Php convient au développement Web, en particulier pour le développement rapide et la maintenance des sites Web. 2. Python convient à la science des données, à l'apprentissage automatique et à l'intelligence artificielle, avec syntaxe concise et adaptée aux débutants.

Statut actuel de PHP: un regard sur les tendances de développement Web Apr 13, 2025 am 12:20 AM

Le PHP reste important dans le développement Web moderne, en particulier dans la gestion de contenu et les plateformes de commerce électronique. 1) PHP a un écosystème riche et un fort soutien-cadre, tels que Laravel et Symfony. 2) L'optimisation des performances peut être obtenue via Opcache et Nginx. 3) PHP8.0 introduit le compilateur JIT pour améliorer les performances. 4) Les applications natives dans le cloud sont déployées via Docker et Kubernetes pour améliorer la flexibilité et l'évolutivité.

Pourquoi utiliser MySQL? Avantages et avantages Apr 12, 2025 am 12:17 AM

MySQL est choisi pour ses performances, sa fiabilité, sa facilité d'utilisation et son soutien communautaire. 1.MySQL fournit des fonctions de stockage et de récupération de données efficaces, prenant en charge plusieurs types de données et opérations de requête avancées. 2. Adoptez l'architecture client-serveur et plusieurs moteurs de stockage pour prendre en charge l'optimisation des transactions et des requêtes. 3. Facile à utiliser, prend en charge une variété de systèmes d'exploitation et de langages de programmation. 4. Avoir un solide soutien communautaire et fournir des ressources et des solutions riches.

PHP: la fondation de nombreux sites Web Apr 13, 2025 am 12:07 AM

Les raisons pour lesquelles PHP est la pile technologique préférée pour de nombreux sites Web incluent sa facilité d'utilisation, son soutien communautaire solide et son utilisation généralisée. 1) Facile à apprendre et à utiliser, adapté aux débutants. 2) Avoir une énorme communauté de développeurs et des ressources riches. 3) Largement utilisé dans WordPress, Drupal et d'autres plateformes. 4) Intégrez étroitement aux serveurs Web pour simplifier le déploiement du développement.

PHP: un langage clé pour le développement Web Apr 13, 2025 am 12:08 AM

PHP est un langage de script largement utilisé du côté du serveur, particulièrement adapté au développement Web. 1.Php peut intégrer HTML, traiter les demandes et réponses HTTP et prend en charge une variété de bases de données. 2.PHP est utilisé pour générer du contenu Web dynamique, des données de formulaire de traitement, des bases de données d'accès, etc., avec un support communautaire solide et des ressources open source. 3. PHP est une langue interprétée, et le processus d'exécution comprend l'analyse lexicale, l'analyse grammaticale, la compilation et l'exécution. 4.PHP peut être combiné avec MySQL pour les applications avancées telles que les systèmes d'enregistrement des utilisateurs. 5. Lors du débogage de PHP, vous pouvez utiliser des fonctions telles que error_reportting () et var_dump (). 6. Optimiser le code PHP pour utiliser les mécanismes de mise en cache, optimiser les requêtes de base de données et utiliser des fonctions intégrées. 7

Place de MySQL: bases de données et programmation Apr 13, 2025 am 12:18 AM

La position de MySQL dans les bases de données et la programmation est très importante. Il s'agit d'un système de gestion de base de données relationnel open source qui est largement utilisé dans divers scénarios d'application. 1) MySQL fournit des fonctions efficaces de stockage de données, d'organisation et de récupération, en prenant en charge les systèmes Web, mobiles et de niveau d'entreprise. 2) Il utilise une architecture client-serveur, prend en charge plusieurs moteurs de stockage et optimisation d'index. 3) Les usages de base incluent la création de tables et l'insertion de données, et les usages avancés impliquent des jointures multiples et des requêtes complexes. 4) Des questions fréquemment posées telles que les erreurs de syntaxe SQL et les problèmes de performances peuvent être déboguées via la commande Explication et le journal de requête lente. 5) Les méthodes d'optimisation des performances comprennent l'utilisation rationnelle des indices, la requête optimisée et l'utilisation des caches. Les meilleures pratiques incluent l'utilisation des transactions et des acteurs préparés

La pertinence durable de PHP: est-elle toujours vivante? Apr 14, 2025 am 12:12 AM

PHP est toujours dynamique et occupe toujours une position importante dans le domaine de la programmation moderne. 1) La simplicité de PHP et le soutien communautaire puissant le rendent largement utilisé dans le développement Web; 2) sa flexibilité et sa stabilité le rendent exceptionnelle dans la gestion des formulaires Web, des opérations de base de données et du traitement de fichiers; 3) PHP évolue et optimise constamment, adapté aux débutants et aux développeurs expérimentés.

See all articles