jquery ajax在php中停止重新加载页面

本文介绍了jquery ajax在php中停止重新加载页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

这是我对此过程的函数。

this is my functions to this process.

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

此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>

推荐答案

<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>