0

我是 JQuery 的新手，并试图创建一个计数器来计算点击次数并将数据库中的计数器更新一。我创建了一个按钮，单击该按钮我将计数器的值发送到数据库。并试图在我的第一页获取更新的计数。

我的代码是 -

<!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 页面在我的屏幕上显示为一个对话框。

我的第一页&当我点击按钮时，它看起来像这样 -

第一页看起来像这样

当我点击按钮时，它看起来像这样 -

告诉我怎么了？？

4

6 回答 6

1

你正在使用警报！使用 .html() 查找并尝试这个！！

   //alert( "Counter Plus: " + count );
    $("#counter").html( "Counter Plus: " + count );
于 2013-12-06T10:11:08.650 回答
1

从 counter.php 中删除 HTML 标记

<? 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代码

function saveData(){  
$.ajax({
       type: "POST",
   url: "counter.php",
   data: { count: "1"}
    })
    .done(function( count ) {
   $("#counter").html( "Counter Plus: " + count );
    })
    .fail(function() {
   // alert( "error" );
    });
}
});
于 2013-12-06T10:11:57.343 回答
1

您可以在以下位置更改 div 内容success

function saveData(){  
  $.ajax({
    type: "POST",
    url: "counter.php",
    data: { count: "1"},
    success: function(data) {
      $('#div').html(data);
    },
    error: function(error) {
      alert(error);
    }
  });
}
于 2013-12-06T10:14:04.510 回答
1

您需要从 counter.php 返回总计数，而不是整个 html 标记

你的 counter.php 应该输出

Total count = 25

然后在你的 jquery.done回调中放这个而不是警报

$("#counter").html(count);
于 2013-12-06T10:14:25.173 回答
1

从你的 counter.php 你正在返回一些字符串......这样做......

计数器.php

    $query = "UPDATE user SET `count`='{$n}'";
    $result = mysql_query($query);
    echo $n; //here $n has updated count value

在jQuery中

   success : function (count)
   { 
     $("#counter").html("you have "+count+" clicks");
   }

希望能帮到你

于 2013-12-06T10:16:46.457 回答
1

你正在做的是你正在使用javascript函数'alert'，因此只要你按下添加计数器按钮就会出现对话框。将您的代码更改为以下内容：

function saveData(){  
   $.ajax({
      type: "POST",
      url: "counter.php",
      data: "count=1",
      success: function(data)
      {
          $('#counter').html(data);
      },
      error: function()
      {
          //alert("error");
      }
  });

});

此外，从 counter.php 页面和 viola 中排除所有 HTML 标记！

于 2013-12-06T10:39:57.060 回答