php - 使用 ajax 更改 index.php 中的 php 变量值且无需重新加载页面

Question

我需要在单击相应 anchor 时使用 ajax 将 $message1 和 $message2 加载回 index.php，以便新值显示在 index.php 中而无需刷新页面。这段代码按原样运行，我只是不知道该怎么做，有人可以帮我弄清楚怎么做吗？我以前从未写过这种类型的脚本，并且得到了一些关于如何编写的建议，但我仍然很困惑。

这是我的 general.js 文件

$(".vote").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var eData = $(this).attr("data-options");
var dataString = 'id='+ id + '&' + eData ;
var parent = $(this);

if(name=='up')
{
   $(this).fadeIn(200).html('');
   $.ajax({
      type: "POST",
      url: "up.php",
      data: dataString,
      cache: false,
      success: function(html){
         parent.html(html);
      }
   });
}
else
{
   $(this).fadeIn(200).html('');
   $.ajax({
      type: "POST",
      url: "down.php",
      data: dataString,
      cache: false,
      success: function(html){
         parent.html(html);
      }
   });
 }
 });

这是我的 index.php 中的 html

 <?php

 $sql = mysql_query("SELECT * FROM blogData ORDER BY id DESC");
 $sql2=mysql_query("SELECT * FROM messages WHERE mod(mes_id,2) = 0 ORDER BY mes_id DESC");
 $sql3=mysql_query("SELECT * FROM messages WHERE mod(mes_id,2) = 1 ORDER BY mes_id DESC");

 $count_variable = 0;

    while(($row = mysql_fetch_array($sql))AND($row2 = mysql_fetch_array($sql2))AND($row3 = mysql_fetch_array($sql3)) ){
        $id = $row['id'];
        $title = $row['title'];
        $content = $row['content'];
        $category = $row['category'];
        $podcast = $row['podcast'];
        $datetime = $row['datetime'];

        $message1=$row2['msg'];
        $mes_id1=$row2['mes_id'];
        $totalvotes1=$row2['totalvotes'];

        $message2=$row3['msg'];
        $mes_id2=$row3['mes_id'];
        $totalvotes2=$row3['totalvotes'];


    ?>

<table class="content">
 <tr>
 <td>


 <div id="main">
 <div id="left">
 <span class='up'><a href="" class="vote" name="up" data-options="key1=<?php echo $mes_id1;?>&key2=<?php echo $mes_id2;?>"><img src="up.png" alt="Down" /></a></span><br />
 <?php echo $totalvotes1; ?><br />
 </div>
 <div id="message">
 <?php echo $message1; ?>
 </div>
 <div class="clearfix"></div>
  </div>
 <div id="main">
 <div id="right">
 <br />
 <?php echo $totalvotes2; ?><br />
 <span class='down'><a href="" class="vote" name="down" data-options="key1=<?php echo $mes_id1;?>&key2=<?php echo $mes_id2;?>"><img src="down.png" alt="Down" /></a></span>
 </div>
 <div id="message">
 <?php echo $message2; ?>
 </div>
 <div class="clearfix"></div>
 </div>
 </td>
 </tr>
 </table>

 <?php
  }
  ?>

这是我的 up.php 文件

 <?php

 session_start();
 include("config.php");

 $ip=$_SERVER['REMOTE_ADDR']; 

 $mes_id1 = $_POST['key1'];
 $mes_id2 = $_POST['key2'];
 $totalvotes1 = $_POST['key3'];

 $ip_sql=mysql_query("select ip_add from Voting_IP where mes_id_fk='$mes_id1' and ip_add='$ip'");
 $count=mysql_num_rows($ip_sql);

 $ip_sql2=mysql_query("select ip_add from Voting_IP where mes_id_fk='$mes_id2' and ip_add='$ip'");
 $count2=mysql_num_rows($ip_sql2);

 // if the user has already voted, execute script
 if($count==0 && $count2!=0)
 {
 $sql = "update Messages set totalvotes=totalvotes+1  where mes_id='$mes_id1'";
 mysql_query( $sql);

 $sql_in = "insert into Voting_IP (mes_id_fk,ip_add) values ('$mes_id1','$ip')";
 mysql_query( $sql_in);

 $sql = "update Messages set totalvotes=totalvotes-1  where mes_id='$mes_id2'";
 mysql_query( $sql);

 $sql_in = "DELETE FROM Voting_IP WHERE mes_id_fk='$mes_id2'";
 mysql_query( $sql_in);


 // if the user has not voted, execute script
 }
 else if($count==0 && count2==0)
 {
$sql = "update Messages set totalvotes=totalvotes+1  where mes_id='$mes_id1'";
 mysql_query( $sql);

 $sql_in = "insert into Voting_IP (mes_id_fk,ip_add) values ('$mes_id1','$ip')";
 mysql_query( $sql_in);

 }
 ?>

Answer 1

例如，在您的第一个 Ajax 请求中，您已将 url 设置为 up.php

   $.ajax({
      type: "POST",
      url: "up.php",
      data: dataString,
      cache: false,
      success: function(html){
         parent.html(html);
      }
   });

这意味着您将从 up.php 中检索数据。 Ajax 请求的工作方式是 php 页面上显示的任何数据，在完成加载后，将作为字符串返回到发送 Ajax 请求的页面。

在您的 up.php 页面中，您没有放置任何 echo 语句或任何 html 代码。因此，您的成功函数中没有数据被返回。这使得 parent.html(html) 变得多余。

您也不能像您指定的那样从 Ajax 请求更新一个 php 页面上的变量。您需要做的是更新 HTML 数据，或构建 up.php 页面，以便它返回一个您想要在成功函数中设置为 Javascript 变量的变量....

即

在 up.php 中，您必须再次执行 sql 语句，以检索要将 $message 更改为的数据，然后回显...

或多或少像这样:(我知道非常笼统)

$data = $_POST['ajaxRequestData'];
//do something with the data to create a new SQL statement

//do the sql statement and extract the value of $message that you're looking for
//THEN****
echo $message;

接下来在您的 Ajax 成功函数中...

$.ajax({
      type: "POST",
      url: "up.php",
      data: dataString,
      cache: false,
      success: function(data){
         //here data will be equal to the value that you echoed in the up.php page.
         //do whatever you want to do with it... You will not have access to the php variable on this page with Javascript. 
         //Server sided languages like PHP do not talk directly with client sided languages like Javascript except with Ajax.

         updateMessage(data); //what I would do is create a function to send the variable to, to perform the necessary modifications to update your webpage.
      }
});
//Note that as soon as the success function ends, the returned data is no longer available to you 
//so you must pass it to a function (or a global variable) to be able to use it.