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

Posted 2023-02-24

【中文标题】如何使用 JQuery onclick 将 MySql 中的随机内容加载到 div 中？ [复制]

【英文标题】：How to load random content from MySql into div with JQuery onclick? [duplicate]

【发布时间】：2016-11-21 16:50:10

【问题描述】：

大家好，我有一个不熟悉 JQuery 的问题。所以可以说我有一个链接。单击此链接，我想将 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>

【问题讨论】：

您必须使用 ajax 调用数据库

@j.Doe 如何做一个快速的例子伙计？

试着在这里读一读。 Using Jquery Ajax to retrieve data from Mysql

【参考方案1】：

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

对于您的用例而言，一个不错的选择始终是 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 服务器端。

【讨论】：

这也是一个好方法还是你的方法更快？<?php $pdo = new PDO('mysql:host=localhost;dbname=xxx', 'xxx', 'xxx'); $sql = "SELECT * FROM lachexpress ORDER BY rand() LIMIT 1"; foreach ($pdo->query($sql) as $row) echo "$row['witz']"; ?>

计算和传输的数据量如此之少，可能并没有太大的区别。 PDO 与 MySQLi：code.tutsplus.com/tutorials/…JOSN 与纯文本：如果您在操作 DOM 客户端的同时生成 html 服务器端，它将变得一团糟。

我不明白我的英语不太好，所以请告诉我使用哪种方法不会搞砸。thx

我的严格建议是在这种情况下生成 HTML 代码客户端。使用您在上面评论中提供的代码，您当然可以使用纯文本。但是，如果您想要一些格式或加载更多笑话，那将是一个问题。

我只想在点击按钮后一次加载一个笑话，所以我可以这样做我在评论中写的对吗？

【参考方案2】：

文档解释得很好。 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