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

jquery更改文本ajax请求问题

发布于 2024-10-10 02:40:32 字数 7157 浏览 6 评论 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 $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;
    });
});
        </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="DataB1" 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="DataC1" 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="DataD1" 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="DataE1" class="action_button" style="width:80px;height:">
                    Activate</button>
                    </td>
           </tr>
        </table>
        </td>
        </td>
        </body>
        </html>

该 fage 包含一个有 5 行的表格，行末尾有一个按钮。单击时，按钮将数据提交到 php 文件，然后根据 php 文件的响应更改文本和模糊效果。 col5 中的模糊功能和更改文本功能运行良好。但按钮中的更改文本功能确实有问题。按钮文本应相应更改。单击/成功提交后，按钮“Activate”的文本应更改为“Inactivate”，并且按钮“Inactivate”的文本应更改为“Activate”。这不起作用。

以下是 php 文件代码，

<?php
$id = $_POST[id];
if($id=="DataA1"){
  echo "ACTIVATED";
}
if($id=="DataB1"){
  echo "ACTIVATED";
}
if($id=="DataE1"){
  echo "ACTIVATED";
}
if($id=="DataC1"){
  echo "INACTIVATED";
}
if($id=="DataD1"){
  echo "INACTIVATED";
}
?>

提前致谢。 :)

布拉拉弗莱德

原文

I have an html file as coded 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 $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;
    });
});
        </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="DataB1" 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="DataC1" 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="DataD1" 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="DataE1" class="action_button" style="width:80px;height:">
                    Activate</button>
                    </td>
           </tr>
        </table>
        </td>
        </td>
        </body>
        </html>

The fage contain a table with 5 rows with a button at the end of the row. On click, the button submits data to a php file and then changes text and blurs according to the response from php file. The blur function and change text function in col5 is working well. But the change text function in button got really buggy. The button text should change accordingly. the text of button "Activate" should change to "Inactivate" and the text of button "Inactivate" should change to "Activate" on click / successful submission.. This is not working..

Below is the php file code

<?php
$id = $_POST[id];
if($id=="DataA1"){
  echo "ACTIVATED";
}
if($id=="DataB1"){
  echo "ACTIVATED";
}
if($id=="DataE1"){
  echo "ACTIVATED";
}
if($id=="DataC1"){
  echo "INACTIVATED";
}
if($id=="DataD1"){
  echo "INACTIVATED";
}
?>

Thanks in advance.. :)

blasteralfred

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

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

发布评论

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

评论（4）

明月夜 2024-10-17 02:40:32

我认为你的逻辑是错误的。当按钮最初显示“激活”时，您将返回“ACTIVATED”，因此您的按钮应显示为“Inactivate”。但是，您再次将文本设置为“激活”。查看 ID 为“DataA1”的按钮的示例。

I think your logic is wrong. When the button initially says "Activate", you are returning "ACTIVATED" so your button should then read "Inactivate." You are, however, setting the text to "Activate" again. Look at the button with id "DataA1" for an example.

回复 原文
找回味觉 2024-10-17 02:40:32

将 $_POST[id] 更改为 $_POST["id"]。

Change $_POST[id] to $_POST["id"].

回复 原文
何必那么矫情 2024-10-17 02:40:32

我找到了解决方案..

谢谢@Heikki，@Cristy.....:)

我更正了脚本如下，

$(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('Inactivate');
                        $col.text('Active');
                    } else if (result == 'INACTIVATED') {
                        $button.text('Activate');
                        $col.text('Inactive');
                    }
                }).fadeIn();
            }
        });
        return false;
    });
});

再次感谢...:)

I found the solution..

Thank you @Heikki, @Cristy..... :)

I corrected the script as below

$(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('Inactivate');
                        $col.text('Active');
                    } else if (result == 'INACTIVATED') {
                        $button.text('Activate');
                        $col.text('Inactive');
                    }
                }).fadeIn();
            }
        });
        return false;
    });
});

Thanks again ... :)

回复 原文
忘你却要生生世世 2024-10-17 02:40:32

我知道你已经解决了这个问题，但无论如何，这是我的回答：

将 php 文件替换

data: 'id='+ $(this).attr('id'),

为

data: 'val='+ $button.html(),

And：

<?php
$val = $_POST['val'];
if(strstr($val,"Activate"))
  echo "ACTIVATED";
else 
  echo "INACTIVATED";
?>

I know you've already solved the problem, but here's my answear anyway:

Replace

data: 'id='+ $(this).attr('id'),

with

data: 'val='+ $button.html(),

And, the php file with this:

<?php
$val = $_POST['val'];
if(strstr($val,"Activate"))
  echo "ACTIVATED";
else 
  echo "INACTIVATED";
?>
回复 原文
~没有更多了~

关于作者

黯然

暂无简介

文章
评论
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 和您的相关数据。
    原文