Question

我正尝试在不刷新页面的情况下向表中添加行，而无需使用js是否可以？基本上我有一个表格和模式中的输入，我的问题是，每当我向表格中添加数据以关闭模式时，都需要刷新页面，并且仅当在模式中按下保存按钮时，才需要保存表格中的数据。也许可以使用Laravel控制器来做到这一点？

<table class="table" style="margin-top: 16px">
<tbody>
<tr>
    <td class="table-text">
        <div style="float: left">TASK NAME</div>
    </td>
    <td style="width: 10%">
        <div style="float: end">DELETE</div>
    </td>
</tr>
</tbody>

Answer 1

没有javascript，这是不可能的。

假设您使用的是jquery，我将执行以下操作：

$('form').on('submit', function(e) {
e.preventDefault(); // Disable the sending of the form
var one = $('#one').val();
var two = $('#two').val();
$('#one').val('');
$('#two').val('');
$.ajax({
  url: "/api/products/add",
  method: 'post',
  data: {
    product: one,
    price: two
  },
  success: function(){
    appendToTable(one, two);
  }
});

appendToTable(one, two); // The Success function in this ajax would never reach, because the url is not set. Thats because the function is called here.
});

function appendToTable(one, two) {
  $('table').append(`
   <tr>
    <td>${one}</td>
    <td>${two}</td>
   </tr>
   `);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/api/products/add" method="post">
<input id="one" name="product" type="text" placeholder="product" required>
<input id="two" name="price" type="number" placeholder="price" required>
<button>Add</button>
</form>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
   </tr>
   <tr>
    <td>PC</td>
    <td>500</td>
   </tr>
</table>

您禁用表单的默认行为（提交），并使用nessesarry与js（或jquery）一起工作。如果用户悬停禁用了js，则表单将正常提交并发送数据。

Laravel在不刷新页面的情况下向表添加行

1 个答案: