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>

Answer 1

这是我要采取的方法。我仅使用Form元素进行样式设置，也许您想使用jquery验证。首次加载页面时，它将触发getList()方法，该方法将没有标题但将action属性设置为getList的消息发布到后端，这将导致后端创建数据的html字符串并返回此。将返回的数据对象作为lecture-result div的html。

然后为您的表单提交，我将拦截click事件，并发送在表单中输入的标题和create的action属性。这会使您的后端插入标题。一旦成功返回，我就叫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);
        }
      });
    }

;

单击提交按钮之前，如何在网页上监视数据库？

1 个答案: