将 MySQL 行数据传递给引导模式
Posted
技术标签:
【中文标题】将 MySQL 行数据传递给引导模式【英文标题】：Pass MySQL row data to bootstrap modal 【发布时间】：2017-08-23 18:00:15 【问题描述】：好的，我有一个 mysql 数据库，我正在使用 php 将它以 html 表的形式输出到我的浏览器。每行都有一个编辑按钮，我已经能够将一个 mysql 值（lead_id）传递给模态，但无法弄清楚如何获取其余数据并能够在模态中进行 CRUD。我已经阅读了很多关于此的不同文章和论坛，它们似乎都在 jQuery 中使用了某种形式的 .ajax。我已经尝试了所有这些 jQuery 函数，但都没有成功。也许不适用于 3.1.1？ IDK。
如果有人可以帮助我解决 .ajax 调用和 jquery 部分，这似乎是我最大的困难。我也可以使用 php，但我不确定 .ajax 调用的 php 文件是什么样的。
下面是我的代码。
<?php
/* mysql connect info */
$mysqlhost = '';
$mysqlusername = '';
$mysqlpassword = '';
$mysqldb = '';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website | Login</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<?php
$mysqli = new mysqli($mysqlhost, $mysqlusername, $mysqlpassword, $mysqldb);
if (mysqli_connect_errno())
echo "Failed to connect to MySQL: " . mysqli_connect_error();
$sql="SELECT * FROM leads";
$result=mysqli_query($mysqli,$sql);
// Associative array
$row=mysqli_fetch_assoc($result);
?>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<h1>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-th-list" aria-hidden="true">
</a>
</h1>
</div>
</div>
</nav>
<header id="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</header>
<!-- Beginning of Sections -->
<section id="main">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<!--<th>Lead Number</th>-->
<th>First Name</th>
<th>Last Name</th>
<th>Moving Date</th>
<th>eMail</th>
<th>Phone</th>
<th>From</th>
<th>To</th>
<th>Moving Size</th>
<!--<th>IP Address</th>-->
<!--<th>Source</th>-->
<th>Submission Time</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
while($row=mysqli_fetch_assoc($result))
echo "<tr>";
/*echo "<td>" . $row["lead_id"] ."<td>";*/
echo "<td>" . $row["customer_first_name"] ."</td>";
echo "<td>" . $row["customer_last_name"] ."</td>";
echo "<td>" . $row["moving_date"] ."</td>";
echo "<td>" . $row["customer_email"] ."</td>";
echo "<td>" . $row["customer_phone"] ."</td>";
echo "<td>" . $row["customer_from_zip"] ."</td>";
echo "<td>" . $row["customer_to_zip"] ."</td>";
echo "<td>" . $row["customer_moving_size"] ."</td>";
/*echo "<td>" . $row["customer_ip_address"] ."<td>";*/
/*echo "<td>" . $row["lead_handle"] ."</td>";*/
echo "<td>" . $row["sent_date"] ."</td>";
echo "<td> <button type=\"button\" class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\" data-id=\"". $row["lead_id"] ."\" id=\"". $row["lead_id"] ."\">Edit</button></td>";
echo "</tr>";
echo "</tbody>";
echo "</table>";
?>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Bootstrap core javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- this is google jquery library-->
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/my.js"></script>
<!-- This is the functionality of the login screen -->
<!-- at one point the drop down was not working because we did not include the bootstrap.js which much come after the initial include to the jquery library-->
<!-- MODAL BEGIND -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria- label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="thebody">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
这就是我觉得我的问题所在：
$('#myModal').on('show.bs.modal', function (event)
var button = $(event.relatedTarget);
var id = button.data('id');
var modal = $(this)
$.ajax(
type: "POST",
url: "selecta.php",
data: id:id,
success: function(data)
$('.modal-body').html();
$('#myModal').modal("show");// this triggers y
modal.find('.modal-title').text('Lead Number ' + id)
modal.find('.modal-body input').val(id)
)
)
)
</script>
</body>
</html>
This is the result I get when the jQuery $.ajax function is run 由于某种原因，潜在客户编号没有传递给模态
现在，当我注释掉 jQuery 时，模态会加载前导编号，如图所示。 enter image description here
$('#myModal').on('show.bs.modal', function (event)
var button = $(event.relatedTarget);
var id = button.data('id');
var modal = $(this);
/*$.ajax(
type: "POST",
url: "selecta.php",
data: id:id,
success: function(data)
$('.modal-body').html();
$('#myModal').modal("show");// this triggers y*/
modal.find('.modal-title').text('Lead Number ' + id)
modal.find('.modal-body input').val(id)
)
【问题讨论】：
有什么问题？有什么错误吗？ 你不应该使用两次mysqli_fetch_assoc()。
您不是已经问过这个***.com/q/43011591/1415724 并接受了答案吗？和这个有什么不同？
Fred 最初我想如果我可以从记录行中获取一个唯一值到模态中，我将能够在模态中运行某种查询以对记录进行 CRUD。那是我的第一个问题是如何使用 data-* 属性。从那以后我一直在努力获取其余数据。现在我能够在模态中获取记录 id，我无法弄清楚如何获取其余数据，并与 MySQL 表单进行交互。
【参考方案1】：
除了您错过了“;”之外，我看不到任何问题在结束时
var modal = $(this)
modal.find('.modal-title').text('Lead Number ' + id)
modal.find('.modal-body input').val(id)
...和一些右括号。你有什么错误吗？您可以分享屏幕截图或结果。
【讨论】：
没有错误。你知道我应该如何构建“selecta.php”吗？我必须使用 JSON 吗？还有“;”需要吗？ Did you know that JS will automatically assume semi-colons should be placed in certain spots? The semi-colon, while generally a good idea, is not required by JS.以上是关于将 MySQL 行数据传递给引导模式的主要内容，如果未能解决你的问题，请参考以下文章