Question

好吧所以我忙于一个php代码，当我点击插入按钮时，我希望显示值而不重新加载页面。这是我的代码：

<?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>";


    }


    ?>

我设法为显示成功插入的按钮执行了一些jquery和ajax，并且它确实插入到我的数据库中，通过显示表而不重新加载页面来产生问题。有人可以帮我这么做吗？

Answer 1

您可以使用jQuery中的show函数执行此操作：

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

有关详细指南，请查看以下内容：http://api.jquery.com/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");
  });
}

Answer 2

当ajax完成后，您需要显示#success元素。该元素通过值为none的CSS显示属性隐藏。您只需将显示属性更改为block，以便在ajax成功时可见：

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

您还可以通过jquery show()函数

显示元素

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

您可以在此处找到更多信息：http://api.jquery.com/css/

编辑：

$.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() {
  ...
});

SQL Query插入值并显示而不重新加载页面

2 个答案: