Fungsi komen suka dan tidak suka yang dilaksanakan oleh PHP digabungkan dengan jQuery_jquery

Apabila kami melayari web dan kami mahu bersetuju atau tidak bersetuju dengan pandangan dalam kandungan web seperti artikel dan ulasan, kami boleh mengundi dengan mengklik "Suka" dan "Tidak Suka" pada halaman web. Pembangun boleh melaksanakan keseluruhan proses interaksi secara tak segerak melalui ajax, dengan itu meningkatkan pengalaman pengguna.

Artikel ini menggabungkan contoh untuk menerangkan fungsi undian "suka" dan "tidak suka" yang dilaksanakan menggunakan PHP MySql jQuery Dengan merekodkan IP pengguna, ia boleh menentukan sama ada tingkah laku mengundi pengguna adalah sah sistem pengundian. Jika anda mempunyai pengetahuan asas tentang PHP, MySql dan jQuery, sila teruskan membaca.

Bersedialah

Kami perlu menyediakan jadual data mysql yang diperlukan untuk menjalankan keseluruhan contoh. Jadual undian digunakan untuk merekodkan bilangan undian pengguna untuk artikel atau ulasan yang sepadan, dan kami menulis sekeping data. dengan id 1 secara lalai Untuk tujuan demonstrasi, jadual votes_ip digunakan untuk merekodkan IP undian setiap pengguna Program ini menentukan sama ada undian itu sah berdasarkan IP pengguna.

 
CREATE TABLE IF NOT EXISTS `votes` ( 
 `id` int(10) NOT NULL AUTO_INCREMENT, 
 `likes` int(10) NOT NULL DEFAULT '0', 
 `unlikes` int(10) NOT NULL DEFAULT '0', 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 
 
 
INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES 
(1, 30, 10); 
 
CREATE TABLE IF NOT EXISTS `votes_ip` ( 
 `id` int(10) NOT NULL, 
 `vid` int(10) NOT NULL, 
 `ip` varchar(40) NOT NULL 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

HTML

Pada halaman tersebut, terdapat dua butang yang masing-masing mewakili "suka" dan "tidak suka", iaitu #dig_up dan #dig_down Jumlah undian dan peratusan masing-masing direkodkan pada butang, menjadikannya sangat intuitif untuk membandingkan. keputusan pengundian.

 
<div class="digg"> 
  <div id="dig_up" class="digup"> 
    <span id="num_up"></span> 
    <p>很好，很强大！</p> 
    <div id="bar_up" class="bar"><span></span><i></i></div> 
  </div> 
    <div id="dig_down" class="digdown"> 
    <span id="num_down"></span> 
    <p>太差劲了！</p> 
    <div id="bar_down" class="bar"><span></span><i></i></div> 
  </div> 
  <div id="msg"></div> 
</div> 

CSS

Kami mesti menggunakan CSS untuk mencantikkan halaman Kami menggunakan gambar diggs.png untuk meletakkan latar belakang butang yang berbeza dan meletakkan hubungan kedudukan antara setiap elemen dengan menetapkan kedudukan.

 
.digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative} 
#dig_up,#dig_down{width:200px; height:48px; margin:10px; position:relative; 
border:1px solid #d3d3d3; padding-left:42px; cursor:pointer} 
.digup{background:url(diggs.png) no-repeat 4px 2px;} 
.digup_on{background:url(diggs.png) no-repeat 4px -49px;} 
.digdown{background:url(diggs.png) no-repeat 4px -102px;} 
.digdown_on{background:url(diggs.png) no-repeat 4px -154px;} 
#num_up,#num_down{position:absolute; right:6px; top:18px; font-size:20px;} 
#dig_up p{height:24px; line-height:24px; color:#360} 
#dig_down p{height:24px; line-height:24px; color:#f30} 
.bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0; 
position:relative; text-align:center} 
.bar span{display:block; height:12px; } 
.bar i{position:absolute; top:0; left:104px;} 
#bar_up span{background:#360} 
#bar_down span{background:#f60} 
#msg{position:absolute; right:20px; top:40px; font-size:18px; color:#f00} 

jQuery

Contoh ini juga bergantung pada jQuery, jadi anda tidak boleh lupa untuk memuatkan fail perpustakaan jquery dalam halaman terlebih dahulu.

Pertama sekali, jQuery perlu memproses imej latar belakang yang berubah apabila tetikus meluncur ke atas dua butang undian masing-masing, yang dicapai melalui addClass() dan removeClass().

 
$(function(){ 
  //鼠标滑向和离开投票按钮时，变换背景样式 
  $("#dig_up").hover(function(){ 
    $(this).addClass("digup_on"); 
  },function(){ 
    $(this).removeClass("digup_on"); 
  }); 
  $("#dig_down").hover(function(){ 
    $(this).addClass("digdown_on"); 
  },function(){ 
    $(this).removeClass("digdown_on"); 
  }); 
   
  //初始化数据 
  getdata("do.php",1); 
   
  //单击“顶”时 
  $("#dig_up").click(function(){ 
    getdata("do.php?action=like",1); 
  }); 
  //单击“踩”时 
  $("#dig_down").click(function(){ 
    getdata("do.php?action=unlike",1); 
  }); 
}); 

Kemudian, kita mulakan data, iaitu selepas halaman dimuatkan, kita perlu memaparkan keputusan pengundian awal, termasuk bilangan undian dan peratusan. Kami menulis operasi mendapatkan data dalam fungsi tersuai getdata(), dan melengkapkan pemuatan data dengan menghantar alamat permintaan dan parameter id yang berbeza. Dalam fungsi getdata(), permintaan ajax dihantar ke URL Menurut hasil pemulangan pemprosesan latar belakang, jika undian berjaya, kandungan elemen yang sepadan dalam halaman akan diubah, termasuk bilangan undian dan. peratusan.

 
function getdata(url,sid){ 
  $.getJSON(url,{id:sid},function(data){ 
    if(data.success==1){//投票成功 
      $("#num_up").html(data.like); 
      //通过控制宽度来显示百分比进度条效果 
      $("#bar_up span").css("width",data.like_percent); 
      $("#bar_up i").html(data.like_percent); 
      $("#num_down").html(data.unlike); 
      $("#bar_down span").css("width",data.unlike_percent); 
      $("#bar_down i").html(data.unlike_percent); 
    }else{//投票失败 
      $("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}) 
      .animate({top:'-50px',opacity:0}, "slow"); 
    } 
  }); 
} 

PHP

Pemerolehan data dilakukan melalui do.php Do.php menyambung ke pangkalan data mengikut parameter yang dilalui oleh halaman hadapan, dan memasukkan modul pemprosesan data "suka", "tidak suka" dan awal mengikut. kepada syarat-syarat berikut adalah struktur kod modul PHP:

 
include_once("connect.php");//连接数据库 
 
$action = $_GET['action']; 
$id = 1; 
$ip = get_client_ip();//获取ip 
 
if($action=='like'){//顶 
  likes(1,$id,$ip); 
}elseif($action=='unlike'){//踩 
  likes(0,$id,$ip); 
}else{ 
  echo jsons($id); 
} 

Fungsi suka() digunakan untuk mengendalikan modul undian "suka" dan "tidak suka" Pertama, ia menentukan sama ada IP pengguna telah mengundi, ia akan mengembalikan gesaan yang sepadan IP pengguna tidak mempunyai rekod undian, ia akan mengemas kini jadual undian , menambah 1 pada bilangan undian yang sepadan, dan kemudian memasukkan rekod IP pengguna ke dalam jadual votes_ip Jika operasi berjaya, panggil jsons() untuk mengeluarkan nombor undian dan peratusan selepas mengundi, jika tidak masukkan mesej segera yang menunjukkan bahawa operasi itu gagal .

 
function likes($type,$id,$ip){ 
  $ip_sql=mysql_query("select ip from votes_ip where vid='$id' and ip='$ip'"); 
  $count=mysql_num_rows($ip_sql); 
  if($count==0){//还没有顶过 
    if($type==1){//顶 
      $sql = "update votes set likes=likes+1 where id=".$id; 
    }else{//踩 
      $sql = "update votes set unlikes=unlikes+1 where id=".$id; 
    } 
    mysql_query($sql); 
     
    $sql_in = "insert into votes_ip (vid,ip) values ('$id','$ip')"; 
    mysql_query($sql_in); 
     
    if(mysql_insert_id()>0){ 
      echo jsons($id); 
    }else{ 
      $arr['success'] = 0; 
      $arr['msg'] = '操作失败，请重试'; 
      echo json_encode($arr); 
    } 
  }else{ 
    $msg = $type==1?'您已经顶过了':'您已经踩过了'; 
    $arr['success'] = 0; 
    $arr['msg'] = $msg; 
    echo json_encode($arr); 
  } 
} 

Fungsi jsons() digunakan untuk membaca bilangan undian bagi ID yang sepadan dalam jadual undian, mengira peratusan dan akhirnya mengeluarkan maklumat ini dalam format json untuk digunakan oleh halaman hadapan.

 
function jsons($id){ 
  $query = mysql_query("select * from votes where id=".$id); 
  $row = mysql_fetch_array($query); 
  $like = $row['likes']; 
  $unlike = $row['unlikes']; 
  $arr['success']=1; 
  $arr['like'] = $like; 
  $arr['unlike'] = $unlike; 
  $like_percent = round($like/($like+$unlike),3)*100; 
  $arr['like_percent'] = $like_percent.'%'; 
  $arr['unlike_percent'] = (100-$like_percent).'%'; 
   
  return json_encode($arr); 
} 

Contoh ini boleh digunakan untuk ulasan "suka", setuju dan tidak setuju, sistem pengundian dan senario lain, menggunakan fungsi interaksi hadapan dan belakang yang dilaksanakan oleh prinsip Ajax. Terdapat juga fungsi get_client_ip() dalam do.php untuk mendapatkan IP sebenar pengguna Saya telah menerbitkan artikel tentang fungsi ini sebelum ini. Ia telah dibungkus dalam kod dan dialu-alukan untuk memuat turunnya.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.