Question

大家好我有一个（可能）简单的问题，但我无法弄清楚为什么它不起作用。

下面的代码应该很容易理解：

<?php
require('../db.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 

<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Website Checker</title> 

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpletip-1.3.1.js"></script> 
<script type="text/javascript">
$(document).ready(function() {

$('#check').click(function(){

$('.http-status').html('<img src="images/spinner.gif"/>').fadeOut('slow').fadeIn('slow');

$('#site-list li.websites').each(function()
{
    //var newurl = $(this).find('span.url a').attr('href');
    var newurl = $(this).find('span.url').html();
    $.ajax(
    {
        type:    "POST",
        url:     "process.php",
        data:    ({"a":newurl}),
        cache:   false,
        success: function(message)
        {
            $(this).find('span.http-status').html(message);
        } //End AJAX return
    }); //End AJAX call
    }); //End li each
}); //End Check

$('#check').click();

});

</script>

<ul id="site-list" class="list"> 
<li class="title">
    <span class="id"></span>
    <span class="name">Title</span>
    <span class="url">URL</span>
    <span class="status">HTTP Status</span>
</li> 
<?php
// some PHP to fetch all the gig entries from the shows table
$sql = "SELECT * FROM `check`";
$query = mysql_query($sql) or die(mysql_error());
// a loop to place all the values in the appropriate table cells
while ($row = mysql_fetch_array($query)){
//begin the loop...
$id=$row['id'];
$name=$row['name'];
$url=$row['url'];
?>
<li class="websites">
    <span class="id"><?php echo $id; ?></span>
    <span class="name"><?php echo $name; ?></span> 
    <span class="url"><?php echo $url; ?></span>
    <span class="status http-status"></span>
</li>

<?php
}
?>
</ul>
<br /> 
<a href="#" id="check" class="button">Check Now</a>

这基本上从数据库中提取网站数据并将其呈现给用户，我想要做的是当你点击每个网站的http代码的按钮进行检查和显示时（并且还首先在页面上运行）正在加载）

这似乎工作正常 - 发送和接收正确的数据，但之后旋转器仍在那里！

link：http://www.4playtheband.co.uk/check/

process.php（如果有帮助）：

<?php
require('../db.php');

$url= NULL;
if(isset($_POST['a'])) {    $url = mysql_real_escape_string($_POST['a']);   }

function Visit($url)
{
$agent = "Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)";$ch=curl_init();
curl_setopt ($ch, CURLOPT_URL,$url );
curl_setopt($ch, CURLOPT_USERAGENT, $agent);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch,CURLOPT_VERBOSE,false);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
$page=curl_exec($ch);

//echo curl_error($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

if($httpcode>=200 && $httpcode<300) 
{
    echo '<span class="up">'.$httpcode.'<span class="icon"><img src="images/info.png" alt="website is up"/></span></span>'; exit;
}
else
{
    $httpcode=404;

    $date = date("l, j \of F Y \@ H:i");

    $to      = "someone@domain.com";
    $subject = "Urgent: $url is down";
    $message = "Hello,\n\nIt appears that on our latest check of $url on $date that the site was down.\n\nRegards,\nWeb Checker";
    $headers = 'From: noreply@webchecker.co.uk' . "\r\n" .
           'Reply-To: noreply@webchecker.co.uk' . "\r\n";

    mail($to, $subject, $message, $headers);
    echo '<span class="down">'.$httpcode.'<span class="icon"><img src="images/info.png" alt="website is down"/></span></span>'; exit;
}
}

if(!empty($url)){ Visit($url); exit; } 

?>

Answer 1

问题在于：

$(this).find('span.http-status').html(message);

根据[jQuery .ajax文档] [1]：

所有回调中的this引用是在设置中传递给$ .ajax的context选项中的对象;如果未指定context，则这是对Ajax设置本身的引用。

要解决此问题，您可以将$( this )的值分配给另一个变量，并在success回调的正文中访问该变量：

$('#site-list li.websites').each(function()
{
    theElement = $( this );
    var newurl = $(this).find('span.url').html();
    $.ajax(
    {
        // ...
        success: function(message)
        {
            theElement.html(message);
        } //End AJAX return

Answer 2

看起来您只是将.http-status的'span'设置为消息，因此微调器仍处于.http-status

您需要清除.http-status ::

success: function(message)
    {
        $('.http-status').html('');
        $(this).find('span.http-status').html(message);
    } //End AJAX return

Answer 3

您应该在成功回调中引用每个.http-status中的li元素。由于您在循环中进行ajax调用，我们需要将每个li对象存储到局部变量中，并通过调用将设置状态消息的方法来创建闭包。试试这个

$('#check').click(function(){

$('.http-status').html('<img src="images/spinner.gif"/>').fadeOut('slow').fadeIn('slow');


$('#site-list li.websites').each(function()
{
    var $li = $(this);

    //var newurl = $(this).find('span.url a').attr('href');
    var newurl = $(this).find('span.url').html();
    $.ajax(
    {
        type:    "POST",
        url:     "process.php",
        data:    ({"a":newurl}),
        cache:   false,
        success: function(message)
        {
            setStatusMessage(message, $li);

        } //End AJAX return
    }); //End AJAX call
    }); //End li each
}); //End Check

   function setStatusMessage(message, li){
       li.find('.http-status').html(message);
   }

这个jQuery选择器的问题

3 个答案: