JavaScript ajax(获取)

Question

我正在尝试做一个简单的表，数据由 WordPress 上的 php/mysql 填充。

我的目标是:当用户点击<th>时，ajax 将使用 get 重新加载表。参数，因此表格将按特定列排序。

如果我像这样访问我的 URL:localhost/table?data=desc or localhost/table?data=asc它有效，但我想用ajax 来做到这一点。这是我的代码的一部分:

JS:

    $(document).on('click','#order_data',function() {
        $.ajax({
            url: '/table?data=desc',
            type: 'GET',
            success: function(msg) {
                $("#main_container").load(location.href + " #table_demos");
            }
        });
    });
});

HTML

<div id="main_container">
<table class="table table-striped table-bordered table-hover" id="table_demos">
	<thead>
		<th id="order_data">Data
		<?php
		if(isset($_GET['data']) && $_GET['data'] == 'asc') {
			echo '<i class="fa fa-arrow-up" aria-hidden="true"></i>';
		} else if(isset($_GET['data']) && $_GET['data'] == 'desc') {
			echo '<i class="fa fa-arrow-down" aria-hidden="true"></i>';
		}
		?>
		</th>
		<th>Versus</th>
		<th>Mapa</th>
		<th>Placar</th>
		<th>Baixar</th>
	</thead>
	<tbody>
<?php
	$conexao = mysqli_connect("localhost","root","321","local_test");

	if(mysqli_connect_errno()) {
  		echo "Falha na conexão MySQL.";
  	} else {
		$data = '';
		if(isset($_GET['data'])) {
			if($_GET['data'] == 'asc') {
				$data = 'order by data asc';
			} else if($_GET['data'] == 'desc') {
				$data = 'order by data desc';
			}	
		}
		$query = mysqli_query($conexao,"SELECT * FROM demo_cadastro {$data}");
		while ($row = mysqli_fetch_assoc($query)) {
			echo '<tr>';
			echo '<td>' . transformar_data($row['data']) . '</td>';
			echo '<td><a href="' . $row['link_adversario'] . '" target="_blank">' . $row['nome_adversario'] . '</a></td>';
			echo '<td>' . $row['mapa'] . '</td>';
			echo '<td>' . $row['pontos_marcados'] . 'x' . $row['pontos_sofridos'] . '</td>';
			if($row['link_demo'] == '#') {
				echo '<td><a href="' . $row['link_demo'] . '" class="demo-indisponivel-swal"><i class="fa fa-cloud-download" aria-hidden="true"></i></a></td>';
			} else {
				echo '<td><a href="' . $row['link_demo'] . '"><i class="fa fa-cloud-download" aria-hidden="true"></i></a></td>';
			}
			echo '</tr>';
		}

		mysqli_free_result($query);
	}

	mysqli_close($conexao);
		
	function transformar_data($data) {
		$data_explode = explode('-', $data);
		return $data_explode[2] . '/' . $data_explode[1] . '/' . $data_explode[0];
	}
?>
	</tbody>
</table>
</div>

我想我只是搞乱了 ajax 调用......

感谢您的建议!

Answer 1

类似这样的吗？

$(document).on('click','#order_data',function() {
    $("#main_container").load('/table?data=desc');
});

(您有点混合了 ajax 调用和加载功能。我相信后者会为您工作。)