php - 在点击提交按钮之前，如何在我的网页上监控我的数据库？

Question

我正在创建一个学校数据库作为学校作业。我对 ajax 有一点问题（我认为使用 append）。我想在不单击提交按钮的情况下打开网页后立即监视我的 sql 数据库。基本上，在我在网页上添加一些新数据之前，我想查看我保存在数据库中的数据。有什么办法吗？我想在下面分享我的代码，希望它会有所帮助。谢谢大家

$(document).ready(function() {


      $('.ajax-form').on('submit', function(e) {
            e.preventDefault();
            var postData = $(this).serialize();
            var url = $(this).attr('action');

            $.ajax({

                url: url,
                data: postData,
                type: $(this).val('method'),
                success: function(data) {
                  if (data.title) {
                    var html = '<ul>';
                    html += '<li>' + data.title + '</li></ul>';

                    $('#result').append(html);

                  }


                  if (!data.error) {

                    $('#result').html(data);

                  }
                });
            });

          --PHP-- -

          $action = $_POST['action'];


          if ($action == 'create') {
            createCourse($_POST['title']);
            getCourseListAsView();
          }
          if ($action == 'getList') {
            getCourseListAsView();
          }


          /*
           * Function Create Course
           * This will create a new Course object and persist it to the database.
           *  */

          function createCourse($title) {
            /* Create new Course Entity */
            $course = new Course;
            /* Fill course with data */
            $course - > setTitle($title);

            /* Persost Object to Database */
            $dbConfigObject = new DbConfig;
            $dbConnection = $dbConfigObject - > getDBConnection();

            $query = "INSERT INTO courses(title) VALUES('$title')";
            $query_lecture_name = mysqli_query($dbConnection, $query);

            if (!$query_lecture_name) {
              die('QUERY FAILED');
            }
          }

          function getCourseListAsView() {

            $dbConfigObject = new DbConfig;
            $dbConnection = $dbConfigObject - > getDBConnection();

            $query = "SELECT * FROM courses";
            $search_query = mysqli_query($dbConnection, $query);

            $listview = "<ul class='list-unstyled'>";
            while ($row = mysqli_fetch_array($search_query)) {
              //title column in db
              $listview. = "<li>".$row['title'].
              "</li>";
            }
            $listview. = "</ul>";

            echo $listview;
          }

          die();

<div class="row">

  <form method="post" id="add-lecture-form" class="col-xs-6 ajax-form" action="Controller/CourseController.php">
    <div class="form-group">
      <input type="text" name="title" class="form-control">
    </div>
    <input type="hidden" id="action" name="action" value="create">
    <div class="form-group">
      <input type="submit" id="submit" class="btn btn-primary" value="add a lecture">
    </div>
  </form>

  <div class="col-xs-6">


    <div id="lecture-result">
    </div>


  </div>

</div>

标签： phpjqueryhtmlsqlajax

Answer 1

这是我要采取的方法。我只使用 Form 元素进行样式设置，也许您会想要使用 jquery 验证。当页面第一次加载时，它会触发一个getList()方法，该方法在没有标题的情况下向您的后端发布帖子，但将 action 属性设置为getList导致您的后端创建数据的 html 字符串并返回它。把返回的数据对象作为lecture-resultdiv的html。

然后对于您的表单提交，我拦截点击事件并发送在表单中输入的标题和create. 这会导致您的后端插入标题。一旦成功回来，我就会打电话给getList. 如果您想保存呼叫，您可以getCourseListAsView在调用create操作时返回。

<div class="row">

  <form method="post" id="add-lecture-form" class="col-xs-6 ajax-form">
    <input type="hidden" id="url" value="Controller/CourseController.php" />
    <div class="form-group">
      <input type="text" id="title" name="title" class="form-control">
    </div>
    <input type="hidden" id="action" name="action" value="create">
    <div class="form-group">
      <input type="button" id="submit" class="btn btn-primary" value="add a lecture">
    </div>
  </form>

  <div class="col-xs-6">
    <div id="lecture-result"></div>
  </div>
</div>

Javascript：

$(document).ready(function() {

  getList();

  $('#submit').on('click', function(e) {

    var url = $("#url").val();
    var postData = {};

    postData.action = 'getList';
    postData.title = $("#title").val();

    $.ajax({

      url: url,
      data: postData,
      type: 'post',
      success: function() {
        getList();
      }
    });
  });



});

var getList = function() {
      var url = $("#url").val();
      var postData = {};

      postData.action = 'getList'

      $.ajax({
        url: url,
        data: postData,
        type: 'post',
        success: function(data) {
          $('#result').html(data);
        }
      });
    }

;