Question

我试图在mysql行插入上显示一个弹出div。这就是我想要实现的目标。

我单击一个按钮，然后转到user.php页面以执行某些功能。现在我坚持的是，如果行已经存在，我想显示一个弹出窗口div，如果该行不存在，则显示另一个div，并且插入成功（当然，这一切都在index.php页面上）。我已经实施了大部分内容。我坚持的唯一部分是在每个功能上显示这两个弹出div。

我不想要警报或任何事情，但整个div。请忽略任何拼写错误，因为带有ajax调用的代码工作正常。我只需要在成功和失败时将div显示在同一页面上（index.php）

我知道我不应该使用mysql_ *函数，但是现在我需要首先解决这个问题。任何建议都会有很大帮助。提前谢谢。

这是我的代码：

的index.php

<html>
<head>

<style>
#overlay-back {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : #1C1C1C;
    opacity    : .6;
    filter     : alpha(opacity=60);
    z-index    : 5;
    display    : none;
} 

#overlay_success, overlay_failure {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 10;
    display  : none;
} 
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $('.userlist').on('click', function () {
    $('#overlay_success, #overlay-back').fadeIn(100);
});
    });
</script>

<script type="text/javascript">

     $(function(){     
    $(".userlist").click(function(){
       var elementUser = $(this);

       var UserID = elementUser.attr("id");

       var info='UserID='+UserID;
       //alert(info);
       $.ajax({
        type: "POST",
        url: "user.php",
        data: info,
        success: function(){

        }
       });
     });
  });
});

   </script>


</head>

<body>

<div id="overlay-back"></div>
        <div align:center; style="position: relative; font-size: 15px; text-align: center; top: 50px;" id="overlay_success">
          <span>
          <h3 style="position: relative; align:center; color:white;"> Success!! </h3>
          </span>
    </div>

<div id="overlay-back"></div>
        <div align:center; style="position: relative; font-size: 15px; text-align: center; top: 50px;" id="overlay_failure">
          <span>
          <h3 style="position: relative; align:center; color:white;"> Failure. Already Exists!! </h3>
          </span>
    </div>

<a href="#" class="userlist">click</a>
</body>
</html>

user.php的

if($_POST['UserID']){


$UserID = mysql_real_escape_string($_POST['UserID']);

        $sql = "SELECT * from usera where uid = '$user_id'";
        $result = mysql_query($sql);
        if(mysql_num_rows($result) > 0){
            //display the div -> user already exists
        }else{
  //display the div (row inserted)
}

Answer 1

拥有UNIQUE ID并执行

$("#successdiv").hide(); 
$("#errordiv").hide();
$.ajax({
    type: "POST",
    url: "user.php",
    data: info,
  success: function(data){ 
    if (data.data=="error") { 
      $("#errordiv").show(); 
    }
    else {
      $("#successdiv").show(); 
    } 
 }

并在服务器上

header('Content-Type: application/json'); 
.
.
.
if(mysql_num_rows($result) > 0) { // or whatever the error is
    echo '{ "data":"error"}';
}
else { 
    echo '{ "data":"success"}';
}

替代方法是返回消息并将其显示在一个div中 - 如果要更改颜色或某些内容，可能会将类更改为Error

Answer 2

有一种方法，你的user.php负责告诉index.php操作是否成功，所以只需这样做：

//user.php    
  $user_id = isset($_POST['User_Id']) ? $_POST['User_Id'] : '';

  if($user_id){
     $UserID = mysql_real_escape_string($user_id);
     $sql = "SELECT * from usera where uid = '$user_id'";
     $result = mysql_query($sql);
     if(mysql_num_rows($result) > 0){
     //display the div -> user already exists
          echo 0;
     }else{
     //display the div (row inserted)
          echo 1;
     }
  }

并修改js代码以显示正确的div：

<style>
    #overlay-back {
        position   : absolute;
        top        : 0;
        left       : 0;
        width      : 100%;
        height     : 100%;
        background : #1C1C1C;
        opacity    : .6;
        filter     : alpha(opacity=60);
        z-index    : 5;
        display    : none;
    }

    #overlay_success, overlay_failure {
        position : absolute;
        top      : 0;
        left     : 0;
        width    : 100%;
        height   : 100%;
        z-index  : 10;
        display  : none;
    }

    #overlay_failure, overlay_failure {
        position : absolute;
        top      : 0;
        left     : 0;
        width    : 100%;
        height   : 100%;
        z-index  : 10;
        display  : none;
    }
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $('.userlist').on('click', function () {
            var elementUser = $(this);

            var UserID = elementUser.attr("id");
            //alert(info);
            $.ajax({
                type: "POST",
                url: "user.php",
                data: {
                    User_Id:UserID
                },
                success: function(data){
                    if(data == 0){
                        $('#overlay_failure, #overlay-back').fadeIn(100);
                    }
                    if(data == 1){
                        $('#overlay_success, #overlay-back').fadeIn(100);
                    }
                }
            });
        });
    });
</script>

通常ajax api会返回json数据，所以这不是那么规律。

我认为你应该注意这些代码：

 //index.php
 $.ajax({
                    type: "POST",
                    url: "user.php",
                    data: {
                        User_Id:UserID
                    },

和

//user.php
$user_id = isset($_POST['User_Id']) ? $_POST['User_Id'] : '';

和

//index.php
 success: function(data){
                        if(data == 0){
                            $('#overlay_failure, #overlay-back').fadeIn(100);
                        }
                        if(data == 1){
                            $('#overlay_success, #overlay-back').fadeIn(100);
                        }
                    }

除mysql部分外，它可以在我的电脑上运行：

这里你去......

<!-- link jQuery  -->
<html>
<head>

    <style>
        #overlay-back {
            position   : absolute;
            top        : 0;
            left       : 0;
            width      : 100%;
            height     : 100%;
            background : #1C1C1C;
            opacity    : .6;
            filter     : alpha(opacity=60);
            z-index    : 5;
            display    : none;
        }

        #overlay_success, overlay_failure {
            position : absolute;
            top      : 0;
            left     : 0;
            width    : 100%;
            height   : 100%;
            z-index  : 10;
            display  : none;
        }

        #overlay_failure, overlay_failure {
            position : absolute;
            top      : 0;
            left     : 0;
            width    : 100%;
            height   : 100%;
            z-index  : 10;
            display  : none;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.userlist').on('click', function () {
                var elementUser = $(this);

                var UserID = elementUser.attr("id");
                UserID = 'fdsa';
                //alert(info);
                $.ajax({
                    type: "POST",
                    url: "user.php",
                    data: {
                        User_Id:UserID
                    },
                    success: function(data){
                        alert(data);
                        if(data == 0){
                            $('#overlay_failure, #overlay-back').fadeIn(100);
                        }
                        if(data == 1){
                            $('#overlay_success, #overlay-back').fadeIn(100);
                        }
                    }
                });
            });
        });
    </script>



</head>

<body>

<div id="overlay-back"></div>
<div align:center; style="position: relative; font-size: 15px; text-align: center; top: 50px;" id="overlay_success">
          <span>
          <h3 style="position: relative; align:center; color:white;"> Success!! </h3>
          </span>
</div>

<div id="overlay-back"></div>
<div align:center; style="position: relative; font-size: 15px; text-align: center; top: 50px;" id="overlay_failure">
          <span>
          <h3 style="position: relative; align:center; color:white;"> Failure. Already Exists!! </h3>
          </span>
</div>

<a class="userlist">click</a>
</body>
</html>

Answer 3

php代码：

if($_POST['UserID']){


 $UserID = mysql_real_escape_string($_POST['UserID']);

    $sql = "SELECT * from usera where uid = '$user_id'";
    $result = mysql_query($sql);
    if(mysql_num_rows($result) > 0){
      echo mysql_num_rows($result);
    }else{
      echo mysql_num_rows($result);
  //display the div (row inserted)
}

脚本：

 $(function(){     
$(".userlist").click(function(){
   var elementUser = $(this);

   var UserID = elementUser.attr("id");

   var info='UserID='+UserID;
   //alert(info);
   $.ajax({
    type: "POST",
    url: "user.php",
    data: info,
    success: function(response){
       if(response > 0){
        $("#overlay_failure").css("display","block");
        }else{
          $("#overlay_success").css("display","block");
        }

    }
   });
 });
});
});

如何使用PHP和Ajax回显html？

3 个答案: