php中的jquery ajax停止重新加载页面[重复]

This question already has an answer here:

这个问题在这里已有答案：

• How to prevent page refresh when <a> tag clicked? 4 answers
• 单击标签时如何防止页面刷新？ 4个答案

When I clicked on book link he reloads the page and sorts the column. Do I want to stop the reload using ajax,,, How?

当我点击图书链接时，他重新加载页面并对列进行排序。我想用ajax停止重装,,,怎么样？

this is my functions to this process.

这是我对这个过程的作用。

this getBook function

这个getBook函数

public function getBooks($start = 0, $limit = 2, $order = "ASC")
{
   $sql_start = $start * $limit;
   $sql_limit = $limit;
   $sql_order_by = $order;

   $query = "SELECT Library.nameOfBook, userBook.book_id, userBook.user_id FROM loginUser JOIN userBook JOIN Library ON userBook.user_id = loginUser.id AND userBook.book_id = Library.id WHERE loginUser.username=:username ORDER BY Library.nameOfBook $sql_order_by LIMIT $sql_start, $sql_limit";
   $statment = $this->db->prepare($query);
   $statment->execute([
       ':username' => $this->username
   ]);
   $result = $statment->fetchAll();

  echo "<table id='myTable' border='1'>

  <tr>
   <th><a id='sorter' href='#'>Books</a></th>
   <th>Action</th>
   </tr>";
   foreach($result as $row){
       echo "<tr>";
       echo "<td>" . $row['nameOfBook'] . "</td>";
       echo "<td>" ."<input type='submit' id='delete".$row['book_id']."-".$row['user_id']."' onclick='deleteBook(this)' name='delete' value='Delete'>" . "</td>";
       echo "</tr>";
    }

   echo "</table>";
   echo "";
   return count($result);
 }

this jquery function

这个jquery函数

<script>
  $(document).ready(function() {
  $( "#sorter" ).click(function() {
    var order_by_value = $('input[name="order_by"]').val();
    if(order_by_value == "ASC"){
        $('input[name="order_by"]').val("DESC");
    }
    else {
        $('input[name="order_by"]').val("ASC");
    }
    $('input[name="current"]').trigger('click');
 });

 });
</script>

2 个解决方案

#1

<script>
  $(document).ready(function() {
  $( "#sorter" ).click(function() {
    var order_by_value = $('input[name="order_by"]').val();

$.ajax({
                type: 'GET',
                url: 'the url link ',
                data: {
                    'order_by_value': order_by_value         
       },
                success: function (res) {
                    if(res == "ASC"){
                          $('input[name="order_by"]').val("ASC");
                     }
                    else {
                          $('input[name="order_by"]').val("DSC");
                         }
                    $('input[name="current"]').trigger('click');
                 });
                }
        });

</script>

#2

Firstly, never reload your page before you are sure that the ajax has completed its process.

首先，在确定ajax已完成其过程之前，请不要重新加载页面。

Secondly, if you want to sort using JS run that code after you finish submitting the form or data in your case.

其次，如果您想在完成提交表单或数据后使用JS运行该代码。

Here is how your ajax code with page reload on compeletion will look like

以下是您在竞争中重新加载页面的ajax代码的样子

$.ajax({
                type: 'GET',
                url: 'your_page_link.php',//this will be url of your backend page
                data: {
                    'name':name
                    'email':email            
                },// if you are using form then just use .serialize() to submit the form instead of preparing data like this use $("#form_id").serialize()
                success: function (msg) {
                    resp = msg;
                }
        }).done(function(){
             if(resp == your_expected_response){
              window.location.href = "http://*.com";
             }else{
              //your error handler
             }
        });

Hope this will be helpful, please feel free to ask if any clarification is required..

希望这会有所帮助，请随时询问是否需要澄清..

Cheers!!

干杯！！