javascript - 使用 AJAX 发布帖子后返回一个值，以便在其他代码中使用该值

标签 javascript php jquery html ajax

因此，正如您在下面的代码中看到的那样，我想做一个“if”语句来检查查询是否已正确运行。如果是，它存储在 var、$output 中，它是脚本的一部分，为什么？立即被 ajax 脚本中包含的通知脚本的其余部分读取。

基本上，“if”语句仅用于格式化通知类型，例如成功、错误等。

我使用 overhang.js 作为通知。

<?php $con=mysqli_connect('localhost', 'root', '', 'teste');
if(!$con) {
  die('Connection not Establish');
}

if(isset($_POST['data'])) {
  $output='';
  $texto=$_POST['texto'];
  $data_nasc=$_POST['data'];
  $sql="INSERT INTO teste(texto, data) VALUES ('$texto', '$data_nasc')";
  $result=mysqli_query($con, $sql);
  if($result) {
    $buscar=mysqli_query($con, "SELECT * FROM teste ORDER BY id DESC");
    $linha=mysqli_fetch_array($buscar);
    $output ='$("body").overhang({
      type: "success",
      message: "Yeiii",
      closeConfirm: true
    });';
 echo $output;
  }
  else {
    $output.='$("body").overhang({
      type: "error",
      message: "Whoops! Something went wrong!",
      closeConfirm: true
    });';
 echo $output;
  }
}

?>

`

<?php
$con=mysqli_connect('localhost','root','','teste');
if(!$con)
{
   die('Connection not Establish');
}
$sql="SELECT * from teste";
$result=mysqli_query($con,$sql);
$row=mysqli_fetch_array($result);
?>
  <!Doctype html>
  <html>

  <head>
    <title>How to show data on bootstrap modal using ajax with php</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <meta charset="UTF-8" />
    <meta name="author" content="Paul Krishnamurthy" />
    <link rel="icon" href="demo/logo.ico" />
    <link rel="stylesheet" type="text/css" href="demo/style/index.css" />
    <link rel="stylesheet" type="text/css" href="dist/overhang.min.css" />
    <link rel="stylesheet" type="text/css" href="demo/style/prism.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="dist/overhang.min.js"></script>
    <script type="text/javascript" src="demo/js/prism.js"></script>
    <script type="text/javascript" src="demo/js/index.js"></script>
  </head>

  <body>
    <div class="container">
      <h1 align="center">How to show data on bootstrap modal using ajax with php</h1>
      <button style="margin-top:10%;" class="submit" id="">Click to show data on bootstrap modal</button>
      <input type="text" name="texto">
      <input type="date" name="data_nasc">

      <script type="text/javascript">
        $(document).on('click', '.submit', function() {
          $texto = $("input[name=texto]").val();
          $data = $("input[name=data_nasc]").val();

          $.ajax({
            url: "show_data.php",
            method: "post",
            data: {
              texto: $texto,
              data: $data
            },
            success: function(data) {

              <?php echo $output;?>
            }
          });
        });
      </script>

  </body>

  </html>

最佳答案

您应该只使用 ajax 从服务器端代码返回 true 或 false 并在 ajax success 方法中处理其余的 javascript。

服务器端代码:

<?php 
  $con=mysqli_connect('localhost', 'root', '', 'teste');
  if(!$con) {
    die('Connection not Establish');
  }

  if(isset($_POST['data'])) {
    $output='';
    $texto=$_POST['texto'];
    $data_nasc=$_POST['data'];
    $sql="INSERT INTO teste(texto, data) VALUES ('$texto', '$data_nasc')";
    $result=mysqli_query($con, $sql);
    if($result) {
      $buscar=mysqli_query($con, "SELECT * FROM teste ORDER BY id DESC");
      $linha=mysqli_fetch_array($buscar);
      $output = TRUE;
  }
  else {
      $output = FALSE;
  }
  echo $output;

  }

?>

客户端代码:

<?php
$con=mysqli_connect('localhost','root','','teste');
if(!$con)
{
  die('Connection not Establish');
}
$sql="SELECT * from teste";
$result=mysqli_query($con,$sql);
$row=mysqli_fetch_array($result);
?>
<!Doctype html>
<html>

<head>
  <title>How to show data on bootstrap modal using ajax with php</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <meta charset="UTF-8" />
  <meta name="author" content="Paul Krishnamurthy" />
  <link rel="icon" href="demo/logo.ico" />
  <link rel="stylesheet" type="text/css" href="demo/style/index.css" />
  <link rel="stylesheet" type="text/css" href="dist/overhang.min.css" />
  <link rel="stylesheet" type="text/css" href="demo/style/prism.css" />
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
  <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script type="text/javascript" src="dist/overhang.min.js"></script>
  <script type="text/javascript" src="demo/js/prism.js"></script>
  <script type="text/javascript" src="demo/js/index.js"></script>
</head>
<body>
  <div class="container">
    <h1 align="center">How to show data on bootstrap modal using ajax with php</h1>
    <button style="margin-top:10%;" class="submit" id="">Click to show data on bootstrap modal</button>
    <input type="text" name="texto">
    <input type="date" name="data_nasc">

    <script type="text/javascript">
      $(document).on('click', '.submit', function() {
        $texto = $("input[name=texto]").val();
        $data = $("input[name=data_nasc]").val();

        $.ajax({
          url: "show_data.php",
          method: "post",
          data: {
            texto: $texto,
            data: $data
          },
          success: function(data) {

            if(data == true){
              // success 
              $("body").overhang({
                type: "success",
                message: "Yeiii",
                closeConfirm: true
              });

            }else{
              // your false script 2019-07-08 11:10:33
              $("body").overhang({
                type: "error",
                message: "Whoops! Something went wrong!",
                closeConfirm: true
              });
            }
            <?php echo $output;?>
          }
        });
      });
    </script>

</body>

</html>

关于javascript - 使用 AJAX 发布帖子后返回一个值，以便在其他代码中使用该值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56928379/

上一篇：javascript - jQuery 在单击下一步时显示和隐藏表单

下一篇：javascript - 使用 Javascript 在列表中插入新项目时得到空值

相关文章：

javascript - 在视频范围内显示图像

php - 如何更快地计算 mySQL 数据库中的条目？

jquery解除绑定(bind)点击

javascript - 如何在 jQuery 中实现变量++？

javascript - scrollTop 不可写且始终为零。滚动高度始终相同的数字

javascript - 将鼠标悬停在按钮上以显示包含子菜单的菜单

javascript - jquery或js代码获取网页中当前选定的表单项/文本/图像的精确节点数据

javascript - webpack 中的多个入口点

php - 连接到远程 mysql 服务器

php - 重新排列 php 关联数组

©2024 IT工具网  联系我们