使用jquery在php中单击计数器 [英] click counter in php using jquery
问题描述
我是JQuery的新手并尝试创建一个计数器，该计数器计算点击次数并将数据库中的计数器更新一次。
我创建了一个按钮，点击即可将计数器的值发送到数据库。并试图在我的第一页获得更新的计数。
I am new to JQuery and trying to create a counter which counts the number of clicks and updates the counter in the database by one. I have created a button, on click of that i am sending the counter's value to the database. and trying to get the updated count at my first page.
我的代码是 -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementing counter</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<? session_start()?>
<? ob_start()?>
<?
if($_SERVER['HTTP_HOST']=='localhost'){
$host="localhost";
$user="root";
$pass="";
$dbas="db_name";
mysql_connect($host,$user,$pass,$dbas);
mysql_select_db($dbas);
}
?>
<script>
$(document).ready(function(){
$("#count").click(function(){
saveData();
$("#counter").load();
});
function saveData(){
$.ajax({
type: "POST",
url: "counter.php",
data: { count: "1"}
})
.done(function( count ) {
alert( "Counter Plus: " + count );
})
.fail(function() {
alert( "error" );
});
}
});
</script>
<br />
<button id="count">Add Counter</button><br>
<div id="counter">
<?
$fetch1=mysql_query("select `count` from user");
$fetch2=mysql_fetch_array($fetch1);
$counter=$fetch2['count'];
echo "You have ".$counter." Clicks";
?>
</div><br><br>
</body>
</html>
我的 counter.php 看起来像 -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Counter</title>
</head>
<body>
<? session_start()?>
<? ob_start()?>
<?
if($_SERVER['HTTP_HOST']=='localhost'){
$host="localhost";
$user="root";
$pass="";
$dbas="db_name";
mysql_connect($host,$user,$pass,$dbas);
mysql_select_db($dbas);
}
?>
<?
if (isset($_POST['count'])) { // Form has been submitted.
$count = $_POST['count'];
$n=0;
$fetch1=mysql_query("select `count` from user");
$fetch2=mysql_fetch_array($fetch1);
$n1=$fetch2['count'];
$n=$n1+$count;
// INSERT THE DATA
$query = "UPDATE user SET `count`='{$n}'";
// Confirm if the query is successful.
$result = mysql_query($query);
echo "Counter Updated by 1";
}
?>
</body>
</html>
当我点击按钮时，会调用counter.php，计数器会更新，但我的< div> 未更新。 counter.php页面在我的屏幕上显示为对话框。
when i click the button, the counter.php is called, counter is updated, but my < div > is not updated. the counter.php page is shown as a dialog over my screen.
我的第一页&当我点击按钮时，它看起来像这样 -
My first page & when i click the button, it looks like this -
告诉我出了什么问题？
推荐答案
删除HTML标签FROM counter.php
Remove HTML Tag's FROM counter.php
<? session_start()?>
<? ob_start()?>
<?
if($_SERVER['HTTP_HOST']=='localhost'){
$host="localhost";
$user="root";
$pass="";
$dbas="db_name";
mysql_connect($host,$user,$pass,$dbas);
mysql_select_db($dbas);
}
?>
<?
if (isset($_POST['count'])) { // Form has been submitted.
$count = $_POST['count'];
$n=0;
$fetch1=mysql_query("select `count` from user");
$fetch2=mysql_fetch_array($fetch1);
$n1=$fetch2['count'];
$n=$n1+$count;
// INSERT THE DATA
$query = "UPDATE user SET `count`='{$n}'";
// Confirm if the query is successful.
$result = mysql_query($query);
echo $n;
}
?>
并用下面的代码替换ajax代码
AND replace ajax code with below
function saveData(){
$.ajax({
type: "POST",
url: "counter.php",
data: { count: "1"}
})
.done(function( count ) {
$("#counter").html( "Counter Plus: " + count );
})
.fail(function() {
// alert( "error" );
});
}
});
这篇关于使用jquery在php中单击计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
