Question

我的HTML代码：

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

Jquery代码：

<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").data('tooltip', data.addremove + " TO YOUR WATCHLIST");
        $("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->addremove = "item1";//you can get the data anyway you want(e.g database)
$response->watchlisticoncolor = "red";
die(json_encode($response));
?>

预期结果：
1.）当有人点击add_box按钮时，它会在不重新加载页面的情况下提交表单（这个工作正常）

2。）insertwatchlist.php发送此代码：{"addremove":"item1","watchlisticoncolor":"red"}并且，Jquery代码将它们代替：$addremove和$watchlisticoncolor变量，实时无需重新加载这页纸。

原始结果：

预期结果的第一点工作正常。

预期结果的第二点什么都不做（没有错误）

Answer 1

在data回调函数中未定义

$.post()。虽然您已在data致电之前定义了$.post()。使用不同的标识符名称

$.post(url, data, function(response) { // define `response` here
  $("button#addtowatchlistbutton")
  .data('tooltip', response.addremove + " TO YOUR WATCHLIST")
  .css('color',response.watchlisticoncolor);
})

JSON.parse()没有必要。 jQuery.post()将JSON从服务器转换为JavaScript对象

使用Ajax添加监视列表按钮功能（PHP）

1 个答案: