Question

嗨，大家好我有一个问题，我不熟悉JQuery。所以我要说我有一个链接。 Onclick这个链接我想从MySQL加载一个带有小加载动画的div的随机内容，而不重新加载页面。如何做到这一点？

这是我的div我想从jquery调用中加载mysql输出。

                <p class="joketext">Some Text inside</p>

这是用户点击的按钮，应该将mysql中的随机内容加载到div中。

<a class="btn btn-success show_new_" href='#'>Load new random content into div</a>

Answer 1

文档很好地解释了它。 http://api.jquery.com/load/

$(document).ready(function(){
  $('.show_new_').on('click', function(){
    $('.joketext').load('/path/to/some/script');
  });
});

要指出的是为您的html添加id属性。除非你只有一个项目使用类..否则ajax将发生在具有该类的所有项目上。

您需要创建从mysql中获取数据的脚本，确保它位于同一个域中，否则您将遇到此问题：

https://en.wikipedia.org/wiki/Same-origin_policy

Answer 2

您需要一些服务器端代码和一些客户端。

您的用例的一个很好的选择总是json而不是纯文本。

php中最简单的服务器端可能就是这样：

<?php
$host="localhost";
$username="youruser"; 
$password="yourpass"; 
$db_name="yourdb";
$db_query="yourquery"; 

$mysqli = new mysqli("$host", "$username", "$password", "$db_name");
if ($mysqli->connect_errno) {
    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}

$mysqli->real_query($db_query);
$res = $mysqli->use_result();
$rows = array();
while ($row = $res->fetch_assoc()) {
    $rows[] = $row;
}

print(html_entity_decode(json_encode($rows));
?>

如何使用jQuery进行异步AJAX调用，你可以在这里找到很好的例子：http://api.jquery.com/jquery.getjson/

如何手动点击事件，看看@Loadx写的是什么。当然你可以将php的输出更改为纯文本，但是如果你使用JavaScript，我建议你不要生成html服务器端。

如何使用JQuery onclick将MySql中的随机内容加载到div中？

2 个答案: