当前位置： 文江博客话题详情

jQuery Ajax 更改 PHP 提交上的文本

发布于 2024-10-10 08:54:17 字数 8962 浏览 5 评论 0原文

我有一个 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 打印数据或回调时更改文本并模糊。这怎么可能？

原文

I have an HTML file as below.

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

The page contains a table with a button at the end of each row. The button has the function of changing the text (that is, when the user clicks a button, the text on the button and col5 swaps as pre-defined).

Clicking "Activate" button changes the button text to "Inactivate" and col5 text to "Active". Also, clicking "Inactivate" button changes the button text to "Activate" and col5 text to "Inactive". The PHP file will print "INACTIVATED" on successful inactivation and "ACTIVATED" on successful activation. I want to change texts and blur when the document gets PHP print data or callback. How can this be possible?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

栀梦 2024-10-17 08:54:17

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

$(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;
    });
});

您需要将取决于结果的代码放入成功回调中。

This will work if I understood your intent correctly:

$(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;
    });
});

You need to put the code that depends on the result to the success callback.

回复 原文
~没有更多了~

关于作者

幸福丶如此

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

忆悲凉

文章 0 评论 0

hgfg1645

文章 0 评论 0

qq_qLPLYi

文章 0 评论 0

戏舞

文章 0 评论 0

殊姿

文章 0 评论 0

﹂绝世的画

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文