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

【问题标题】：jquery ajax in php to stop reload page [duplicate]php中的jquery ajax停止重新加载页面[重复]
【发布时间】：2018-11-01 04:06:55
【问题描述】：

当我点击图书链接时，他会重新加载页面并对列进行排序。我想停止使用 ajax 重新加载吗？如何？

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

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

【问题讨论】：

$("#sorter").click(function(e) { e.preventDefault(); ...
它仍然刷新页面
因为您点击了$('input[name="current"]')，我认为这也是一个提交按钮
那么我该如何解决这个问题呢？ @mplungjan
将所有按钮更改为 type="button" 并 ajax 一切

标签： javascript php jquery ajax

【解决方案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>

【讨论】：

不，我没有......我问了ajax代码来解决这个问题，我没有说这是ajax代码。
你的代码看起来不错，你能告诉我们更多细节吗？错误详情？
当我点击链接书订购我的书时，我想停止刷新页面
点击会触发事件，这反过来可能会重新加载你的页面，就像我之前说的，如果你能发布你的代码，我们会更容易帮助你
我通过了表格中的getbook函数，请检查更新代码

【解决方案2】：

首先，在您确定 ajax 已完成其进程之前，切勿重新加载您的页面。

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

这是您在完成时重新加载页面的 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://stackoverflow.com";
             }else{
              //your error handler
             }
        });

希望这会有所帮助，如果需要任何澄清，请随时询问..

干杯！！

【讨论】：