javascript - 在 .click 上使用 $.ajax 更新变量

Question

编辑:这个问题更多地与改变变量(valueA)有关。我已经使用下面的脚本获得了所需的加载结果。我正在尝试将一些内容附加到脚本中，一旦单击，这些内容最终将改变 valueA。

我正在设计多个页面，这些页面将在单击时使用 .load 加载到主要内容 div

index.php

//Setting default value

$valueA = 5;

//Created separate div to allow me to monitor the variable and changes    

<div><?php echo $valueA; ?></div>

//Loading first page into div

<div id=main_content>

<?php include 'page1.php'; ?>    

</div>

page1.php 中包含一个按钮，用于加载分配给它的页面。

page1.php

<button id="button1">Click Me!</button>

<script>
 $(document).ready(function(){
   $('#button1').click(function(){
     $('#main_content').load('page2.php').hide().fadeIn('slow');
     $.ajax({
        type: 'POST',
        url: 'index.php',
        success: $valueA += 5,
     });
  });
})

点击后，page2.php将加载，但值将保持为5。我试图弄清楚如何使用ajax脚本将5添加到valueA。最终，新页面将加载，并且值将增加到 10。

Answer 1

php 变量的递增必须在 php 脚本中完成，而不是 javascript。 Javascript 本质上对你的 php 一无所知，反之亦然。

另一件事是 $.ajax 对象上的 success 属性是一个函数，因此您应该这样定义它。请参阅jQuery Documentation有关 $.ajax

的完整详细信息

$.ajax({
  ...
  ...
  success: function () { ... }
});

编辑

澄清后，这是一个更新的、更彻底的示例。

HTML

<div id="valueAContainer"><?php echo $valueA; ?></div>

jQuery

$.ajax({
  url: "yourphpscript.php",
  method: "GET" (or post, whatever is applicable),
  data: { valueA: $("#valueAContainer").text() },
  success: function (data) {
     $("#valueAContainer").text(data);
  }
});

PHP

// get valueA variable from request
$oldValue = $_GET['valueA'];
// Do whatever you want to it - increment, save to DB, etc.
$updatedValue = $oldValue + 5;
// Return updatedValue to javascript
echo $updatedValue