如何用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);
     }
 })

希望对您有所帮助，如果您有任何疑问，请在评论部分中提问！ （：