如何用Ajax調用PHP腳本？

Question

我正在嘗試創建多個表，在這些表中我可以在表之間移動表行，並讓ajax調用php腳本，該腳本以新值（即該行的新父項）更新DB。

現在只有html和javascript了，我想知道ajax部分應該如何調用更新數據庫的php腳本？ 另外，如果我應該對javascript / html部分進行一些更改？

HTML：

<table class="tables_ui" id="t_draggable1"><h4>Table 1</h4>
<tbody class="t_sortable">
  <tr>
    <th>Title</th>
    <th>Status</th>
    <th>Creation date</th>
  </tr>
  @foreach($tasks as $task)
    <tr class="row1" data-id="{{ $task->id }}">
      <td>{{ $task->title }}</td>
      <td>{{ ($task->status == 1)? "Completed" : "Not Completed" }}</td>
      <td>{{ date('d-m-Y h:m:s',strtotime($task->created_at)) }}</td>
    </tr>
  @endforeach
</tbody>
</table>

<table class="tables_ui" id="t_draggable2"><h4>Table 2</h4>
<tbody class="t_sortable">
  <tr>
    <th>Title</th>
    <th>Status</th>
    <th>Creation date</th>
  </tr>
  <!-- More <td> rows here ... -->
</tbody>
</table>

<!-- More tables here ... -->

Javascript：

<script>
$(document).ready(function() {
  var $tabs = $('#t_draggable2')
  $("tbody.t_sortable").sortable({
    connectWith: ".t_sortable",
    items: "> tr:not(:first)",
    appendTo: $tabs,
    helper:"clone",
    zIndex: 999990
  }).disableSelection();

  var $tab_items = $(".nav-tabs > li", $tabs).droppable({
    accept: ".t_sortable tr",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) { return false; }
  });
});
</script>

Answer 1

對於js的$.ajax調用，您應該注意一些有關您想要傳遞給PHP文件以及作為回報(response) 。 一個簡單的$.ajax調用，用於在下面向下發布數據：

 var Example1 = "123";
 var Example2 = "456";

 $.ajax({
     type: "POST",
         data: {
             Example1: example1,
             Example2: example2
         },
         url: "config/post.php",
         success: function(){
            setTimeout(function(){// wait for 5 secs(2)
                location.reload(); // then reload the page.(3)
         }, 100);
     }
 })

在上面的示例中， variables (var) ，“ Example1”和“ Example2”將作為數據插入請求中。

在您的url:您將指定發布網址到您的php文件。 然后，在PHP文件中，您可以使用第二個data {在$_REQUEST屬性，請參見下面的示例：

$ example1 = $ _REQUEST ['example1']; $ example2 = $ _REQUEST ['example2'];

回聲$ example1。 $ example2;

要檢查是否獲取了數據，可以使用$.ajax調用上方的console.log()函數來確保。

 var Example1 = "123";
 var Example2 = "456";


 // Check for the values

 console.log(Example1 + Example2)

 $.ajax({
     type: "POST",
         data: {
             Example1: example1,
             Example2: example2
         },
         url: "config/post.php",
         success: function(){
            setTimeout(function(){// wait for 5 secs(2)
                location.reload(); // then reload the page.(3)
         }, 100);
     }
 })

希望對您有所幫助，如果您有任何疑問，請在評論部分中提問！ （：