jQuery Ajax 更改 PHP 提交的文本答案

【问题标题】：jQuery Ajax change text on PHP submissionjQuery Ajax 更改 PHP 提交的文本
【发布时间】：2011-01-01 09:03:01
【问题描述】：

我有一个如下的 HTML 文件。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <style>
                .style1 {
                    background-color: #c3d9ff;
                    font-family:arial,sans-serif;
                }
                .style2 {
                    text-align: center;
                    font-weight: bold;
                }
                .style3 {
                    background-color: #FFFFFF;
                    font-family:arial,sans-serif;
                    text-align: center;
                    font-weight: bold;
                }
                .style4 {
                    background-color: #FFFFFF;
                    font-family:arial,sans-serif;
                    text-align: left;
                }
                body {
                    font-family:Verdana, Arial, Helvetica, sans-serif;
                    font-size:15px;
                    background-color: ;
                }
                .action_button {
                    font-weight:bold;
                    float:right;
                }
            </style>
            <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
            <script type="text/javascript">
                $(function()
                {
                    $(".action_button").click(function()
                    {
                        var id = $(this).attr("id");
                        var dataString = 'id='+ id ;
                        var parent = $(this).parent().parent();
                        $.ajax({
                            type: "POST",
                            url: "action.php",
                            data: dataString,
                            cache: false,
                            success: function()
                            {
                                if(id % 2)
                                {
                                    parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();});
                                }
                                else
                                {
                                    parent.fadeOut('fast', function()   {$(this).fadeOut();$(this).fadeIn();});
                                }
                            }
                        });
                    return false;
                    });
                });
                $(document).ready(function() {
                    $('.action_button').click(function() {
                        $(this).text($(this).text().trim() == 'Inactivate' ? 'Activate' : 'Inactivate');
                        var $col5 = $(this).closest('tr').find('.clickme2');
                        $col5.text( $col5.text().trim() == 'Inactive' ? 'Active' : 'Inactive');
                        return false;
                    });
                });
            </script>
        </head>
        <body>
            <table style="width: 90%" align="center" class="style1">
                <tr>
                    <td colspan="7" class="style2">MANAGER</td>
                </tr>
                <tr>
                    <td class="style3" style="width: 139px">Col1</td>
                    <td class="style3" style="width: 139px">Col2</td>
                    <td class="style3" style="width: 139px">Col3</td>
                    <td class="style3" style="width: 139px">Col4</td>
                    <td class="style3" style="width: 139px">Col5</td>
                    <td class="style3" style="width: 200px">Col6</td>
                    <td class="style3" style="">Action</td>
                </tr>
            </table>
            <td id="main" class="main">
                <td class="update">
                    <table style="width: 90%" align="center" class="style1">
                        <tr>
                            <td class="style4" style="width: 139px">DataA1</td>
                            <td class="style4" style="width: 139px">DataA2</td>
                            <td class="style4" style="width: 139px">DataA3</td>
                            <td class="style4" style="width: 139px">DataA4</td>
                            <td class="style4 clickme2" style="width: 139px">Inactive</td>
                            <td class="style4" style="width: 200px">DataA6</td>
                            <td>
                                <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
                                Activate</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="style4" style="width: 139px">DataB1</td>
                            <td class="style4" style="width: 139px">DataB2</td>
                            <td class="style4" style="width: 139px">DataB3</td>
                            <td class="style4" style="width: 139px">DataB4</td>
                            <td class="style4 clickme2" style="width: 139px">Inactive</td>
                            <td class="style4" style="width: 200px">DataB6</td>
                            <td>
                                <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
                                Activate</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="style4" style="width: 139px">DataC1</td>
                            <td class="style4" style="width: 139px">DataC2</td>
                            <td class="style4" style="width: 139px">DataC3</td>
                            <td class="style4" style="width: 139px">DataC4</td>
                            <td class="style4 clickme2" style="width: 139px">Active</td>
                            <td class="style4" style="width: 200px">DataC6</td>
                            <td>
                                <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
                                Inactivate</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="style4" style="width: 139px">DataD1</td>
                            <td class="style4" style="width: 139px">DataD2</td>
                            <td class="style4" style="width: 139px">DataD3</td>
                            <td class="style4" style="width: 139px">DataD4</td>
                            <td class="style4 clickme2" style="width: 139px">Active</td>
                            <td class="style4" style="width: 200px">DataD6</td>
                            <td>
                                <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
                                Inactivate</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="style4" style="width: 139px">DataE1</td>
                            <td class="style4" style="width: 139px">DataE2</td>
                            <td class="style4" style="width: 139px">DataE3</td>
                            <td class="style4" style="width: 139px">DataE4</td>
                            <td class="style4 clickme2" style="width: 139px">Inactive</td>
                            <td class="style4" style="width: 200px">DataE6</td>
                            <td>
                                <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
                                Activate</button>
                            </td>
                       </tr>
                    </table>
                </td>
            </td>
        </body>
    </html>

该页面包含一个表格，每行末尾都有一个按钮。按钮具有改变文字的功能（即当用户点击按钮时，按钮上的文字与col5按预定义交换）。

单击“激活”按钮将按钮文本更改为“不激活”，将 col5 文本更改为“激活”。此外，单击“Inactivate”按钮将按钮文本更改为“Activate”，将 col5 文本更改为“Inactive”。 PHP 文件将在成功停用时打印“INACTIVATED”，在成功激活时打印“ACTIVATED”。我想在文档获取 PHP 打印数据或回调时更改文本和模糊。这怎么可能？

【问题讨论】：

标签： php jquery ajax dynamic-data

【解决方案1】：

如果我正确理解您的意图，这将起作用：

$(function() {
    $('.action_button').click(function() {
        var $button = $(this);
        $.ajax({
            type: 'POST',
            url: 'action.php',
            data: 'id='+ $(this).attr('id'),
            cache: false,
            success: function(result) {
                var $row = $button.closest('tr');
                var $col = $row.find('.clickme2');
                $row.fadeOut('fast', function() {
                    if (result == 'ACTIVATED') {
                        $button.text('Activate');
                        $col.text('Active');
                    } else if (result == 'INACTIVATED') {
                        $button.text('Inactivate');
                        $col.text('Inactive');
                    }
                }).fadeIn();
            }
        });
        return false;
    });
});

你需要把依赖结果的代码放到成功回调中。

【讨论】：

谢谢老兄.. 它运行良好:) 但是“停用按钮”有一些错误。点击时文本不会改变。
检查 ajax 结果是否严格为'INACTIVATED'，即。后面没有空格或换行符。