Javascript SQL查询插入值并显示，无需重新加载页面_Javascript_Php_Jquery_Mysql_Ajax

Javascript SQL查询插入值并显示，无需重新加载页面

javascript php jquery mysql ajax

Javascript SQL查询插入值并显示，无需重新加载页面,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,好的，我正忙于一个php代码，当我单击insert按钮时，我希望在不重新加载页面的情况下显示值。这是我的密码： <?php $connection = mysqli_connect('localhost', 'root', '', 'universitynew'); $sql="SELECT * FROM tblstudent"; $student_records=mysqli_query($connection,$sql); ?> <html> <

好的，我正忙于一个

php

代码，当我单击insert按钮时，我希望在不重新加载页面的情况下显示值。这是我的密码：

<?php
$connection = mysqli_connect('localhost', 'root', '', 'universitynew');


$sql="SELECT * FROM tblstudent";
$student_records=mysqli_query($connection,$sql);


?>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type='text/css' href="bootstrap.min.css" />
        <script type='text/javascript' src="bootstrap.min.js"></script>
        <script type='text/javascript' src="jquery.min.js"></script>
    </head>
<body>
    <a href="Student.php"class="btn btn-primary active" role="button">Student table</a>
    <a href="Degree.php"class="btn btn-primary" role="button">Degree table</a>
    <a href="Subject.php"class="btn btn-primary" role="button">Subject table</a>
    <a href="assessment.php"class="btn btn-primary" role="button">Assessment table</a>
    <a href="student_assessments.php"class="btn btn-primary" role="button">Student Assessment table</a>
    <a href="Degree_student.php" class="btn btn-primary" role="button">Student Degree table</a>
    <a href="Student_Subject.php"class="btn btn-primary" role="button">Student Subject table</a>
    <hr></hr>
    <table width="800" border="1" cellpadding="1" cellspacing="1">
    <input type="button" name="insertrecords" id="insertrecords" value="Insert Records" />
    <span id="success" style="display: none">Successfully Inserted</span>
    <div id="response"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#insertrecords").click(function () {
                $("#success").show();
                $.ajax({
                    url: "insert_student.php",
                    type: 'POST',
                    data: {'action':'submit'},
                    dataType: 'json',
                    success: function (data) {
                        $("#success").hide();
                        if(data.status=="true"){
                            $("#response").html(data.universitynew);
                        }else{
                            $("#response").html("Error in db query");
                        } 
                    }
                });

            });
        });
    </script>
    <h1><a href="insert_student.php".php" class="btn btn-info" role="button">Delete Students</a></h1>
    <h1><a href="insert_student.php".php" class="btn btn-info" role="button">Update Students</a></h1>

    <tr>
    <th>Student ID</th>
    <th>Student number</th>
    <th>Student name </th>
    <th>Student surname</th>
    <th>Student course</th>
    </tr> 
    <?php
    while ($student=mysqli_fetch_assoc($student_records)){
        echo"<tr>";
        echo"<td>".$student['student_id']."</td>";
        echo"<td>".$student['student_number']."</td>";
        echo"<td>".$student['student_name']."</td>";
        echo"<td>".$student['student_surname']."</td>";
        echo"<td>".$student['student_course']."</td>";
        echo"</tr>";


    }


    ?>



成功插入
$（文档）.ready（函数（）{
$（“#插入记录”）。单击（函数（）{
$（“#成功”）.show（）；
$.ajax({
url:“insert_student.php”，
键入：“POST”，
数据：{'action'：'submit'}，
数据类型：“json”，
成功：功能（数据）{
$（“#成功”）.hide（）；
if（data.status==“true”）{
$（“#响应”）.html（data.universitynew）；
}否则{
$（“#响应”）.html（“数据库查询中的错误”）；
} 
}
});
});
});
学生证
学号
学名
学生姓氏
学生课程

我设法对按钮执行了一些

jquery

和ajax操作，该按钮显示已成功插入，并且确实插入到了我的数据库中。我的问题是，在不重新加载页面的情况下显示表。有人能帮我做这件事吗？

你可以用jQuery中的show函数来做：

$('#success').show();

有关详细指南，请检查以下内容：

编辑：刚才看到您正在使用这个函数，您的问题是，无论何时请求成功，您都在使用hide，如果请求失败，您需要使用它

$("#insertrecords").click(function () {
  var request = $.ajax({
      url: "insert_student.php",
      type: 'POST',
      data: {'action':'submit'},
      dataType: 'json'
  });
  request.done(function(data){
  $("#success").show();
    $("#response").html(data.universitynew);
  });
  request.fail(function(error){
    $("#response").html("Error in db query");
  });
}

当ajax完成时，您需要显示

#success

元素。该元素通过CSS display属性隐藏，其值为

none

。您只需将display属性更改为

block

，即可在ajax成功时看到它：

$('#success').css("display","block");

您还可以通过jquery

show（）

函数显示元素

$('#success').show();

您可以在此处找到更多信息：

编辑：

你写了一些jQuery代码吗？@Ilyaskarim我写了按钮，但我不知道如何写jQuery来显示更新的结果，这就是我的问题所在

$.ajax({
  url: '/path/to/file',
  type: 'default GET (Other values: POST)',
  dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
  data: {param1: 'value1'},
})
.done(function() {
  $("#success").show(); // this will show the message 
  ...
})
.fail(function() {
  ...
});