堆栈内存溢出
  繁体   English   中英

如何在此项目中改进PHP和JQuery代码-仅淡出需要刷新的元素，而不是整个部分？

[英]How To Improve PHP and JQuery Code in this Project - only fade out elements that need refreshed instead of whole section?

 原文  2011-08-22 22:11:03  9   1    php/ jquery/ refactoring

问题描述

我偶然发现了这个网站，并对此印象深刻，想尝试并了解它的工作原理： http : //demo.pellegrom.me/uptime/

我的尝试是在这里： http : //www.4playtheband.co.uk/up/up.php，但我不得不淡出整个部分，而不仅仅是状态。 我的工具提示也被破坏了，因为它们是动态生成的-我确定我需要应用live函数，但是只是不确定如何进行操作而不破坏它。

这是代码：

up.php： 

<?php
require('../db.php');
?>  
<script type="text/javascript">
$(document).ready(function(){

    $("#container").load("response.php").fadeIn("slow");

    setInterval(function() {
        $('#container').fadeOut('slow').load('response.php').fadeIn("slow");
    }, 3600000);

    $('.icon').each(function(){
        $(this).simpletip({
            showEffect: 'fade',
            hideEffect: 'fade',
            fixed: 'true',
            position: 'right',
            offset:[10, 0],
            content: $('img',this).attr('alt')
        });
    });

    $('#check').click(function(){
        $('.http-status').empty();
        $('.http-status').html('<img src="images/spinner.gif"/>');

        $('#container').fadeOut('slow').load('response.php').fadeIn("slow");
    });

});
</script>

<h2>Website Checker</h2>    

<div id="container"></div>

<br /> 
<a href="#" id="check" class="button">Check Now</a>

process.php： 

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

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>';
    }
    else
    {
        $httpcode=404;
        echo '<span class="down">'.$httpcode.'<span class="icon"><img src="images/info.png" alt="website is down"/></span></span>';

        $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);
    }
}
?>

<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>
        <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"><?php echo Visit("$url"); ?></span>
    </li>

<?php
}
?>
</ul>

这是很多代码，如果很难理解的话，我们深表歉意。

除了已经提到的两点之外，让我感到困惑的唯一另一件事是，如何避免在首次访问页面时首先加载container时发送电子邮件？

在此先感谢您提供的所有帮助和建议。

1 个解决方案

解决方案1
 1 已采纳  2011-08-22 22:59:08

自您上次查看以来，我已经添加了Ajax，并对其他代码进行了一些修改。 像在php中返回，并为html和其余的ajax加载gif。 希望这可以帮助！ 当您发表评论时，如果您有疑问，请添加'@'+'tumharyyaaden'，以便stackexchange向我显示更新。

PHP：另存为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; } 

?>

HTML： 

<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"><img src="images/spinner.gif"/></span>
    </li>

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

jQuery的： 

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

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

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

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

说明：对不起，我没有注释代码，但是基本上，它是由三部分组成，两个php会生成html，一个将检查并返回状态，最后一位是JS，它将通过AJAX发送请求，因此您页面不必在每次检查单击时都刷新。

更新：2011/08/25

在我看来，您当前的代码（即JS）与我提供的任何内容都不相似。 我上面是页面的整个结构。 因此，我想说的是考虑至少从上面采用JS并对其进行修改以适合您的其他需求，而不是尝试修复您的当前代码，我认为这有太多问题。 无论如何，让我们看看您的代码：

您的密码 

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

    $('#site-list li').each(function(){
        var li=$(this);
        if(!li.hasClass('title'))
        {
            $('span.status',li).html('<img src="images/loader.gif" alt="" />');

            $.post('process.php',{
            url:$('span.url',li).text(),
            id:$('span.id',li).text()},
            function(response)
            {
                $('span.status',li).html(response.data);
                $('span.status',li).simpletip({fixed:true,position:'right',offset:[5,0],content:response.message});
                var tooltip=$('span.up',li).eq(0).simpletip();

                if(response.up){
                    $('span.up img',li).attr('src','images/activity_monitor.png');
                    tooltip.update('Site is Up');}
                else{
                    $('span.up img',li).attr('src','images/activity_monitor_warning.png');tooltip.update('Site is Down');$('span.status span',li).css('color','red');
                }
            },'json');
        }
    });
    return false;
});

因此，首先，1）。 您缺少$('#check').click(); 当前阻止加载或在页面加载时正确显示状态。 意思是，那段代码对您来说不是可选的。

第二2）。 您的选择器和选择过程效率很低。 

$('#site-list li').each(function(){
        var li=$(this);
        if(!li.hasClass('title'))
        {

在上面，您的第一个选择器应该是$('#site-list li.websites').each(因此，您无需在Title class列表上运行不必要的检查，也不必在排除title类时单独运行第二个检查在each()下进行这类低效率的检查时，它会导致许多不必要的不​​必要的调用。

第三3）。 通过使用选择器样式，工具提示插件的选择以及使用.post而不是.ajax，可以不必要地使脚本复杂化。 对于工具提示，请使用技巧提示工具之类的东西，它重量轻，易于使用但可自定义，功能齐全，并且将大大简化脚本。 .ajax更加干净，透明和容易，因此减少了潜在的冲突。 另外，请使用实际的CSS样式和属性来格式化文档（而不是JS）。 因此，我再次喜欢更干净，更简单，更透明，最重要的是更高效的代码，所以再次重申，如果您需要帮助，可以根据需要自定义我的代码。 但是按照您的代码当前的情况，我不能说哪一部分是错误的，因为在我看来太多了。

四）。 我的意思不是无礼或冒犯您，但就我个人而言，我不能忍受当前JS代码的立场。 因此，请不要以个人为中心，这比其他任何事情都更重要。 也就是说，我可以帮助您更改原始答案，以更好地满足您的需求。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在提交时用php插入html，但是如何使用jquery淡出该html？ 淡入/淡出多个图像JQuery PHP 如何在 PHP 中创建一个只有 5 个元素的新部分？ PHP只有一个月需要整个时间戳 如何改善PHP的代码结构？ 如何改进此php mysql代码？ 如何在PHP中改进以下代码 php-如何使用OOP改进代码 如何提高此PHP代码的性能？ 文本框仅显示数据库中的1个单词，而不显示整个句子
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM