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


Update variable using $.ajax on .click

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

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

索引.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是一个按钮,它将加载分配给它的页面。

页1.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。

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

要提到的另一件事是,$.ajax 对象上的 success 属性是一个函数,因此您应该这样定义它。有关$.ajax的完整详细信息,请参阅 jQuery 文档

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