Question

我在点击div后尝试更改数据，但它没有改变结果

JS代码

$(document).ready(function() {

    $('#piso .caixa').click(function() {
        var valorpiso = $(this).text();
        alert(valorpiso);
        $.ajax({
            type:"post",
            url:"getpiso.php",
            data:"npiso="+valorpiso,
            sucess:function(data){
                $("#caixas").html(data);
            }
        });
     });

});

警报正在打印正确的值

PHP代码

 $piso1=$_POST["npiso"];

 $result=mysql_query("select * FROM rooms where floor='$piso1' ");
 while($dados=mysql_fetch_array($result)){
     echo "<div id='caixa'>";
     echo "<p>$dados[block].$dados[floor].$dados[room]</p>";
     echo "</div>";
 }

你能帮帮我吗？

Answer 1

这是您的实际代码吗？回调函数有一个错误：它应该是“成功”，而不是“成功”。

success:function(data){
    $("#caixas").html(data);
}

如果不起作用，请尝试获取有关正在发生的事情的更多信息。使用某种Dev Tool来观察ajax响应。（CTRL + SHIFT +我在Chrome上）

OBS：您的PHP代码容易受到SQL注入攻击。在此处阅读更多相关信息：How can I prevent SQL injection in PHP?

Answer 2

有2个问题

1）@Rogerio说是对的，你使用"sucess":时正确的方法是"success":

但现在使用jquery，您可以使用以下方法：

jqXHR.done(function( data, textStatus, jqXHR ) {});

成功回调选项的替代构造，.done()方法取代了已弃用的jqXHR.success()方法。有关实施细节，请参阅deferred.done()。
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});

错误回调选项的替代构造，.fail()方法替换了已弃用的.error()方法。有关实施细节，请参阅deferred.fail()。
jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });

完整回调选项的替代构造，.always()方法取代了已弃用的.complete()方法。

响应成功的请求，函数的参数与.done()：data，textStatus和jqXHR对象的参数相同。对于失败的请求，参数与.fail()的参数相同：jqXHR对象，textStatus和errorThrown。有关实施细节，请参阅deferred.always()。
jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});

包含.done()和.fail()方法的功能，允许（从jQuery 1.8开始）操作底层Promise。有关实施细节，请参阅deferred.then()。

阅读：http://api.jquery.com/jquery.ajax/

使用"npiso="+valorpiso的类型，但这不是编码，更喜欢使用json，如下所示：{ npiso: valorpiso }（Jquery自动编码数据）

2）不要在HTML中使用重复的ID，这会按结果编号重复ID：

while($dados=mysql_fetch_array($result)){
     echo "<div id='caixa'>";

使用class=代替id=

首先，更新Jquery to last version

使用Javascript：

$.ajax({
    "type": "POST",
    "url": "getpiso.php",
    "data": { "npiso": valorpiso }
}).done(function(data) {
    console.log(data);
    $(".list_caixa").html(data);
}).fail(function(err) {
    console.log("Failed", err);
}).always(function() {
    console.log("complete");
});

＆＃34; HTML＆＃34;：

 $piso1=$_POST["npiso"];

 $result=mysql_query("select * FROM rooms where floor='$piso1' ");
 while($dados=mysql_fetch_array($result)){
     echo "<div class='list_caixa'>";
     echo "<p>$dados[block].$dados[floor].$dados[room]</p>";
     echo "</div>";
 }

Answer 3

你应该调试（alert（）或console.log（））来检查数据是否已在成功处理程序中正确返回，并检查id为＃＆＃34;＃caixas＆＃34;已存在。

Answer 4

<强>的index.php

`

<html>

    <head>

         <script src="//code.jquery.com/jquery-1.10.2.js"></script>
         <script>
            $(function () {
               $('#piso .caixa').click(function () {
                var valorpiso = $(this).text();
                $.ajax({
                    type: "post",
                    url: "getpiso.php",
                    data: "npiso=" + valorpiso,
                    success: function (data) {
                        $("#caixas").html(data);
                    }
                });
            });

        });
       </script>
    </head>
     <body>
       <div id="piso">
        <p class="caixa" style="cursor:pointer;color:red;background-color:#000;padding:10px;">TEST</p>
       </div>
       <div id="caixas">

       </div>
</body>

`

<强> getpiso.php

     <?php
        if($_POST["npiso"]!=null){
            $piso1=$_POST["npiso"];
            echo "<div id='caixa'>";
            echo "<p>".$piso1." RESULT</p>";
            echo "</div>";
        }
        ?>

ajax请求不返回数据

4 个答案: