网页即时修改神器！用jQuery让你的网站也变身牛逼哄哄

你是不是每天都离不开电脑？肯定喜欢那种能看又能立马改的网页，对不对？那是因为网站用上了即时修改功能，简称“一点就改”。别急，我来教你怎么用jQuery这个得力助手，让您自己的网站也有这种牛逼哄哄的效果，提升用户体验，让人多得要命！

准备示例页面

简单来说，咱得先写个小测页面来试试这货到底怎么样，比如说有些表格网页里，有一堆人的名字和年纪啥的，你想让人家随便改改，当然服务器也要跟着更新保留下来这事儿说起来容易做起来难，得先给HTML里面加个jQuery，再想想怎么弄好看又好用的界面造型和结构。关键在于，把那些可以轻松编辑的地方，全都加上特别的标签，比如”editable”，然后设定好data-field和data-id属性来记下问题所在、具体位置等等信息，就这么简单。

使用jQuery实现交互功能

浏览器打开页面时，我们用jQuery的ready方法给每个可编辑的表格加个“点下就变”的功能。只要有人去碰一下表格，马上就能得到它对应的编号、名次和位置，然后把这些信息变成输入框里面的新值，想怎么改都行。保存新资料很简单，只要等用户离开输入框之后，就能拿到新的数字，然后把这个新数字跟其他相关信息组合成一个JSON对象。最后，用AJAX技术把这个JSON对象发给服务器，剩下他们去处理存档的事。

处理保存结果

    
    
    
    
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 5px;
            text-align: center;
        }
        th {
            background-color: #eee;
        }
        td.editable {
            cursor: pointer;
        }
    


    

        

            

                
姓名
                
年龄
            
        
        

            

                
张三
                
25
            
            

                
李四
                
30
            
            

                
王五
                
35
            
        
    
    
        $(document).ready(function() {
            $('td.editable').click(function() {
                var value = $(this).text();
                var field = $(this).data('field');
                var id = $(this).data('id');
                var input = $('');
                input.val(value);
                $(this).empty().append(input);
                input.focus();
                input.blur(function() {
                    var new_value = $(this).val();
                    if (new_value != value) {
                        var data = {};
                        data[field] = new_value;
                        $.ajax({
                            method: 'POST',
                            url: '/update',
                            data: {
                                id: id,
                                data: JSON.stringify(data)
                            },
                            success: function(response) {
                                console.log('更新成功');
                                $('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(new_value);
                            },
                            error: function(response) {
                                alert('更新失败');
                                $('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(value);
                            }
                        });
                    } else {
                        $('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(value);
                    }
                });
            });
        });
    

服务器收到你发来的信息后，会帮你保存好~然后回到客户端你就能看见改变！别忘了刷新下表格，让新的数字一目了然噢~万一储存出问题咋办？别急，直接把旧的数值找回来，这样数据才能真正保平安！大家心里踏实的话，肯定觉得咱们的系统靠谱得很，按照他们的需求设计的，用起来舒心极了！

优化及扩展功能

跟直接修有点不一样！其实那些程序员哥哥们有专门为你调整这个功能的能力。比如说加点好看的动画，检测数据确认，或者撤回以前的操作什么的，这样用起来真的超赞！如果你担心处理特殊数据类型比如日期和颜色，他们也完全应付得了～还有高级点的功能，比如权限控制、查看历史操作记录等等，立马让修改变得高大上了

总结

看完这篇文章后，你就能轻松学会用jQuery这个神器给网页变动感十足！无论是想要用户爽翻天还是提升自己工作效率，这个方法都值得借鉴！不过实战过程中难免遇到问题，这时冷静分析相关技术、灵活应用jQuery解决问题就是关键啦～

哈喽！希望看完本文后，你能学会jQuery那个”一点击就变化”的技巧，直接动手做项目赚大钱！不明白的话？或者你有什么意见或妙计，欢迎随时告诉我~