Question

我有表格和表格。当我使用AJAX提交表单时，我需要立即在表中查看结果，而不重新启动p。

这就是这样的顺序。 1.填写表格 2.我通过AJAX发送数据库 3.我重新加载页面，我看到了结果

//AJAX -
        $("#reg").submit(function(event){
          var fn = document.getElementById('fn').value,
              ln = document.getElementById('ln').value,
              phone =  document.getElementById('phone').value;
              event.preventDefault();

         //вторая проверка на валидацию
            if (fn.length < 3 ||  ln.length < 3 || phone.length < 6) {
                console.log('некорректно фрорма регист')
            } else {

                $.ajax({
                    type: 'POST',
                    url:  'regist.php',

                    data: {
                        First:fn, 
                        Last:ln, 
                        'Telephone[0]':phone
                    },

                    success: function( response ){ 
                        jQuery('#reg')[0].reset();//отчистить форму
                        console.log(response);
                    }
                }); 

            } 
        });

   <div class="table">
         <table border="1" >
            <thead>
               <tr>
              <th>ID R </th><th>ID U</th><th>Name</th><th>Last Name</th><th>Phone 1</th><th>Phone 2</th><th style="color: red; font-weight: bold;">X</th>
               </tr>
            </thead>


            <tbody id='trash'>
               //get table таблицу
               <?php require_once('table.php'); ?>
            </tbody>


         </table>

     //get info from table.   
         <form method="POST">
            <input type="submit" name="get_info" value="Show list" class="show_list" />
         </form>
   </div>

Answer 1

我找到了解决方案。我创建了另一个请求并在注册中调用它。

//AJAX - добавить юзера
    $("#reg").submit(function(event){
      var fn = document.getElementById('fn').value,
          ln = document.getElementById('ln').value,
          phone =  document.getElementById('phone').value;

        event.preventDefault();

      //вторая проверка на валидацию
      if (fn.length < 3 ||  ln.length < 3 || phone.length < 6) {
        console.log('Некорректно Заполнена фрорма регистрации')
      } else {
        $.ajax({
          type: 'POST',
          url:  'regist.php',
          data: {
            First:fn, 
            Last:ln, 
           'Telephone[0]':phone
          },
          success: function( response ){ 
            jQuery('#reg')[0].reset();//отчистить форму
            dynamicTable();//строка 254 | динамически обновить табл.
            console.log(response);
          }
        }); 
      } 
    });

//AJAX -динамически обновить табл.    
  function dynamicTable() {
    $.ajax({
      type: 'GET',
      url:  'table.php',
      dataType: "html", 
      success: function( html ){
        // console.log(html);
        $("#trash").html(html);
      }
    }); 
  }

在通过AJAX提交表单后如何更新页面上的表格？

1 个答案: