如何使用 PHP 和 Ajax 回显 html？答案

【问题标题】：How to echo an html with PHP and Ajax?如何使用 PHP 和 Ajax 回显 html？
【发布时间】：2016-08-08 08:05:45
【问题描述】：

我正在尝试在 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)
}

【问题讨论】：

停止使用已弃用且自 PHP7 起已移除 mysql_* 函数。迁移到 PDO 并开始使用 Prepared Statements。

标签： javascript php jquery html ajax

【解决方案1】：

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");
        }

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

【讨论】：

你需要一些语法检查。你缺少一个括号，这个 if(mysql_num_rows($result) > 0){ echo mysql_num_rows($result); }else{ echo mysql_num_rows($result); 与 echo mysql_num_rows($result); 相同 - 你可能还想隐藏以前显示的错误 div

【解决方案2】：

拥有唯一的 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 中 - 如果您想更改颜色或其他内容，可以将类更改为错误

【讨论】：

不，它会显示相同的成功 div，因为它会在我每次单击按钮时插入行。另外，以防万一，我从 user.php 插入行
我面临的您的技术的唯一问题是，即使出现错误，它也总是显示成功 div。我通过警报确认了 ajax 返回数据。它返回正确的数据，但打开的 div 总是成功的。我在这里想念什么吗？
是的。如果data.error 是假的，则显示成功。 console.log 它并尝试扭转它 - if (data.success) 显示成功
嗯，我没听懂你
我放了一个警报（数据），如果插入了行，它会显示 {"data":"success"}，如果没有插入则显示 {"data":"error"}

【解决方案3】：

有一种方法，你的 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>

【讨论】：

您可能希望在用户点击时隐藏之前显示的错误
我的 ajax 调用正确返回 0 和 1，但 div 不显示
而且，现在根本没有插入行
我的 index.php 代码不包含您的两个显示标签.....您应该添加它们