使用Jquery Ajax更改按钮的颜色(从外部PHP文件接收颜色)

时间:2017-07-20 04:26:22

标签: javascript php jquery html ajax

这是我的HTML代码

 public class ServiceImpl{
        public int add() {
            User newUser = new User();
            newUser.setName("uName");
            UserDao userDao=new UserDao();
            userDao.add(newUser);  //Using myBatis insert() method,and it function is auto assign user.Id and return completed row number.     
            int userId = newUser.getId();
         }
    }

        //methodTest
        public class ServiceImplTest
        {
            @Test
            public void addTest()
            {
              UserDao userDao=Mockito.mock(UserDao.class);
              when(userDao.add(isA(User.class))).thenReturn(1);//NullPointException in newUser.getId();
              ServiceImpl serviceImpl=new ServiceImpl();
              serviceImpl.add();
            }
        }

Jquery代码:

<form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST">

    <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/>
    <button id="addtowatchlistbutton" type="submit" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'" data-tooltip="'.$addremove.' TO YOUR WATCHLIST" class="material-icons" style="color:'.$watchlisticoncolor.'">add_box</button>

</form>

   // Same form as above
<form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST">

    <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/>
    <button id="addtowatchlistbutton" type="submit" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'" data-tooltip="'.$addremove.' TO YOUR WATCHLIST" class="material-icons" style="color:'.$watchlisticoncolor.'">add_box</button>

</form>

PHP文件<script> $(".addtowatchlistform").submit(function(e) { var data = $(this).serialize(); var url = $(this).attr("action"); $.post(url, data, function() { try { data = JSON.parse(data); $("button#addtowatchlistbutton").css('color',data.watchlisticoncolor); } catch (e) { console.log("json encoding failed"); return false; } }); return false; }); </script> 文件

insertwatchlist.php

输出PHP文件$response = new \stdClass(); $response->watchlisticoncolor = "red"; die(json_encode($response)); 文件

insertwatchlist.php

预期结果:

1.)当有人点击{"watchlisticoncolor":"red"} 按钮时,它会在不重新加载页面的情况下提交表单(这个工作正常)

2。)add_box发送此代码:insertwatchlist.php并且,Jquery代码将它们放在{"watchlisticoncolor":"red"}变量的位置,实时无需重新加载页面。 (这个不起作用),

控制台标签不显示任何内容。以下是当有人点击按钮http://prntscr.com/fxwt16

时网络标签的屏幕截图

3 个答案:

答案 0 :(得分:1)

请使用background-color代替color。当您想要更改字体颜色时,将使用color属性。

发件人

$("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);

$("button#addtowatchlistbutton").css('background-color',data.watchlisticoncolor);

还在你的ajax函数中添加数据。

$.post(url, data, function(data) {

如果不起作用,请告诉我。

&#13;
&#13;
$(".addtowatchlistform").submit(function(e) {
  e.preventDefault();
  var data = $(this).serialize();
  var url = $(this).attr("action");
  $.ajax({
      url: url,
      type: 'post',
      dataType: 'json',
      beforeSend: function() {
        $('#add_to_wishlist').css('color','red');
      },
      success: function(data) {
      }   
   });
});

$('#add_to_wishlist2').click(function(e){
  e.preventDefault();
  $(this).css('background-color','red');
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add_to_wishlist" style="color:yellow;">Change Color</button>


<button id="add_to_wishlist2">Change Background Color</button>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

更新:

在进一步检查时,我发现它不适合css。它是你的jquery post函数问题。

您缺少该功能中的数据。使用下面;如果它能解决你的问题,请告诉我。

 $.post(url, data, function(data) {
    try {
        data = JSON.parse(data);
        $("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }

用于文本颜色的颜色属性。 使用背景色而不是颜色

背景颜色

 $("button#addtowatchlistbutton").css('background-color',data.watchlisticoncolor);

对于文字颜色

$("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);

答案 2 :(得分:0)

试试这个你必须从函数参数

中的ajax请求中捕获数据
 ./configure \
 --with-llvm=/home/zhangysh1995/work/llvm-3.4/ \
 --with-llvmcc=/home/zhangysh1995/work/llvm-3.4/Release+Asserts/bin/clang \
 --with-llvmcxx=/home/zhangysh1995/work/llvm-3.4/Release+Asserts/bin/clang++ \
 --with-stp=/home/zhangysh1995/work/stp/stp