简体   繁体   English

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

[英]How to update the table on the page, after submitting the form via AJAX?

I have a form and a table. 我有一个表格和一张桌子。 When I submit a form using AJAX, I need to see the result immediately in the table, without rebooting p. 当我使用AJAX提交表单时,需要立即在表中看到结果,而无需重新启动p。

That is the order of such. 就是这样的顺序。 1. Fill out the form 2. I send through AJAX in a DB 3. I reload the page, and I see the result 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>

I found a solution. 我找到了解决方案。 I created another request and call it in register. 我创建了另一个请求,并在注册时调用它。


//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);
      }
    }); 
  }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM