$.get 在 jquery 中未通过 javascript 在 html 页面上执行答案

【问题标题】：$.get in jquery not executing while on html page through javascript$.get 在 jquery 中未通过 javascript 在 html 页面上执行
【发布时间】：2012-12-20 19:36:49
【问题描述】：

我一直在尝试为我的站点创建一个简单的下载计数器，方法如下：使用 jquery 检索指示下载时间的 txt 的值，然后使用 jquery 调用 ajax 来执行 PHP 文件，这反过来会覆盖这样的txt文件（在php文件中增加它）然后存储它，然后用jquery读回值。在我忘记之前，为了避免任何错误信息，这里是页面的整个 HTML 代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>GreenDream: SMS Sender</title>
    <link rel=StyleSheet type="text/css" href="http://www.gfcf14greendream.com/CSS/greendream.css" />
    <link rel="SHORTCUT ICON" href="http://www.gfcf14greendream.com/images/dreamicon.ico">  

    <script type="text/javascript" src="http://www.gfcf14greendream.com/JS/greendream.js"></script>
  </head>
<body onload="startTime(); handleTextFile()">
  <div id="background">
    <img src="http://www.gfcf14greendream.com/images/greentwi.png" class="stretch" alt="" />
  </div>

  <br />

  <table align="center">

    <tr>
        <td>
            <a href="http://www.gfcf14greendream.com/"><img src="http://www.gfcf14greendream.com/images/dream.png" align="middle"></a>
        </td>

        <td>
            <div id='pbutton' style="width:113px; height:41px; margin:0px;white-space:nowrap; word-spacing:0;"><a class="button" href="http://www.gfcf14greendream.com/programs.html">Programs</a></div>
        </td>

        <td>
            <div id='gbutton' style="width:93px; height: 41px; margin:0px;white-space:nowrap; word-spacing:0;"><a class="button" href="http://www.gfcf14greendream.com/games.html">Games</a></div>
        </td>

        <td>
            <div id='tbutton' style="width:108px; height: 41px; margin:0px;white-space:nowrap; word-spacing:0;"><a class="button" href="http://www.gfcf14greendream.com/tutorials.html">Tutorials</a></div>
        </td>

        <td>
            <div id='bbutton' style="width:74px; height: 41px; margin:0px;white-space:nowrap; word-spacing:0;"><a class="button" href="http://blog.gfcf14greendream.com/">Blog</a></div>
        </td>

        <td>
            <div id='mbutton' style="width:114px; height: 41px; margin:0px;white-space:nowrap; word-spacing:0;"><a class="button" href="http://www.gfcf14greendream.com/aboutme.html">About Me</a></div>                        
        </td>

        <td style="padding-left:50px">
            <div id='daytitle'></div>
            <div id='clock'></div>
        </td>
    </tr>

  </table>

  <br />

  <div style="text-align: center; color:#00FF00; font-size: 20px">The following is a Visual C++ program that was designed specifically to send text messages to a phone... Free of charge!!</div>
  <br />
  <div style="text-align: center; color:#FFFF00; font-size: 20px">THE GOOD: If you have a prepaid phone, then you can send text messages to a phone without wasting your minutes...</div>
  <br />
  <div style="text-align: center; color:#FF8000; font-size: 20px">THE BAD : Since I haven't been able to put a Skype or Google Voice library for use with C++, this application depends on using what's known as an SMS gateway, different for every phone carrier... meaning you must know your recipient's carrier to be able to send a message!</div>
  <br />
  <div style="text-align: center; color:#FF0000; font-size: 20px">THE UGLY: This program doesn't work on computers connected to safe networks (such as college/university networks) ... at least not yet!</div>
  <br />
  <div style="text-align: center; color:#00FF00; font-size: 20px">You will probably need the Visual C++ Redistributable Package (or the .NET framework or both, but most likely just the package) to run this program, if you don't have it installed on your pc yet</div>
  <br />
  <br />
  <div style="text-align: center; color:#0000C8; font-size: 20px">Click <a href="http://www.microsoft.com/en-us/download/details.aspx?id=5555">here</a> to download the Visual C++ Redistributable Package</div>
  <div style="text-align: center; color:#0000C8; font-size: 20px">Click <a href="http://www.microsoft.com/en-us/download/details.aspx?id=17851">here</a> to download the .NET Framework 4</div>
  <br />
  <br />

  <div style="text-align: center; color:#00FF00; font-size: 20px"><a class="button" id="downbutton" style="width:115px;margin:0px;white-space:nowrap; word-spacing:0;" href="http://www.gfcf14greendream.com/Programs/SMSSender/SMS Sender.exe">Click here to download SMS Sender</a></div>
  <br />
  <div id='counter' style="text-align: center;"></div>

  <br />

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript">

    function handleTextFile()
    {
        document.getElementById('counter').style.color = "rgb(0, 255, 0)";
        document.getElementById('counter').style.fontWeight = 'bold';

        var downcounter = 0;

        $.get("http://www.gfcf14greendream.com/counters/smssender.txt", function(data){
            downcounter = data;
            if (downcounter == 1)   $("#counter").text("SMS Sender has been downloaded " + downcounter + " time...");   
            else $("#counter").text("SMS Sender has been downloaded " + downcounter + " times..."); 
        });

        $("#downbutton").click( function(){     

            $.get("http://www.gfcf14greendream.com/PHP/smssender.php", function(data){
                $.get("http://www.gfcf14greendream.com/counters/smssender.txt", function(data){
                    downcounter = data;
                    if (downcounter == 1)   $("#counter").text("SMS Sender has been downloaded " + downcounter + " time...");   
                    else $("#counter").text("SMS Sender has been downloaded " + downcounter + " times..."); 
                });             
            });
        });

    }

  </script>

</body>
</html>

在运行页面时，我使用这段代码（上面的一段）来读取一个 txt 文件并获取下载计数（这可行）：

var downcounter = 0;

        $.get("http://www.gfcf14greendream.com/counters/smssender.txt", function(data){
            downcounter = data;
            if (downcounter == 1)   $("#counter").text("SMS Sender has been downloaded " + downcounter + " time...");   
            else $("#counter").text("SMS Sender has been downloaded " + downcounter + " times..."); 
        });

那么当点击downbutton变量时，应该执行这段代码：

$("#downbutton").click( function(){     

            $.get("http://www.gfcf14greendream.com/PHP/smssender.php", function(data){
                $.get("http://www.gfcf14greendream.com/counters/smssender.txt", function(data){
                    downcounter = data;
                    if (downcounter == 1)   $("#counter").text("SMS Sender has been downloaded " + downcounter + " time...");   
                    else $("#counter").text("SMS Sender has been downloaded " + downcounter + " times..."); 
                });             
            });
        });

，它应该读取一个php文件，其代码是：

<?php
    $counter = intval(file_get_contents('/homepages/37/d434704165/htdocs/counters/smssender.txt'));
    $counter++; 
    file_put_contents('/homepages/37/d434704165/htdocs/counters/smssender.txt', $counter);
?>

运行 php 会覆盖 txt 文件“smssender”，从而增加下载次数。我注意到在我的网站上手动输入 php 文件的地址实际上是可行的，并且会发生下载增量。然而，当 JQuery 执行代码时，不会发生增量。我猜它在这条线上，但这里的错误是什么？：

$.get("http://www.gfcf14greendream.com/counters/smssender.txt", function(data){

非常感谢您的任何帮助或建议！

【问题讨论】：

标签： php jquery ajax get overwrite

【解决方案1】：

我认为单独使用 PHP 页面会简单得多。您可以使用 GET 变量来确定是否需要增加下载计数器。例如，在你的 PHP 文件中做这样的事情：

<?php
$total = (int)file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/counters/smssender.txt');

if (isset($_GET['i'])) {
    $total++; 
    // now update the file for future use
    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '/counters/smssender.txt', $total);
}

echo $total;
?>

然后您可以在ajax 中自行调用PHP 页面，这样您就不必担心两个调用同时执行并导致错误。现在，当您想要检索当前的下载次数时，您只需调用“smssender.php”即可。此外，当您想检索当前下载次数并增加文件内容时，您可以调用“smssender.php?i”。

如果您只想增加文件的内容而不回显输出，您可以添加另一个 if 语句，但我不知道您是否正在尝试这样做。如果是这样，请告诉我，我也可以向您展示代码。希望对您有所帮助，如果没有，请告诉我。

更新：只需将您的代码更改为：

Javascript 文件：

$.get("/PHP/smssender.php", function(data) {
    $("#counter").text(data);            
});

$("#downbutton").click( function() {     
    $.get("/PHP/smssender.php?i", function(data) {
        $("#counter").text(data);            
    });
});

PHP 文件：

<?php
$total = (int)file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/counters/smssender.txt');

if (isset($_GET['i'])) {
    $total++; 
    // now update the file for future use
    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '/counters/smssender.txt', $total);
}

$suffix = ($total == 1) ? 'time' : 'times';

echo 'SMS Sender has been downloaded ' . $total . ' ' . $suffix . '...';
?>

现在，您可以大大简化 Javascript/jQuery。此代码将具有与您的代码完全相同的行为，没有任何错误。现在，我将解释我所做的更改。首先，您只需使用 $.get() 方法调用单个 PHP 文件，无论您是仅检索当前下载次数还是增加总数。

其次，文本处理在 PHP 文件中完成。您不再确定它是否已在 Javascript 中下载 1 次或多次，而是由 PHP 文件处理此问题，因为它比检索数据并随后进行计算要快得多。

最后，我让下载按钮只调用 $.get() 一次，这样您就不必担心由于尝试同时检索两个不同的页面而导致的错误。尝试用我在上面发布的新代码替换您的代码，然后告诉我它对您的效果。

【讨论】：

我不确定我是否理解（抱歉，这个文件编写是我第一次尝试使用 php）。您的意思是尝试将我所有的 $.get() 组合成使用 $.ajax() 之类的东西来调用 php 页面吗？
我更新了我的代码。请使用我在“更新”之后发布的代码。
感谢您的代码。我不想打扰，但是虽然第一个 $.get 有效，但第二个（php 有 ?i 的那个）没有。我在$.get(...php?i") 行之前写了一个alert("downloaded");，但它从未出现过，所以错误仍然在$get 处以覆盖：$.get("/PHP/smssender.php?i", function(data) { 但是手动转到php 或php 时我没有收到错误？我
您是否检查过 Javascript 控制台以查看它是否返回任何错误？尝试将 smssender.php?i 更改为 smssender.php?i=1 并查看是否可以解决问题，因为我不确定 jQuery 是否允许加载带有未定义变量的 URL，即使在页。此外，请尝试重新复制和粘贴代码，以确保您没有遗漏任何语法，例如 }。
我注意到文件写入只工作一次，在 Internet Explorer 和 android 浏览器中。但不在 Firefox 或 chrome 上。然而检查控制台，我确实注意到了一些 CSS 错误。那会以某种方式停止覆盖吗？如果你想看这个页面，它是gfcf14greendream.com/smssender.html