php - PHP & jQuery 表单提交问题
问题描述
我正在创建网站项目,您可以在帖子发布后对其进行编辑。我已经使用 PHP、SQL 和 jQuery 创建了网站,所有发布到该网站的帖子都通过 while 循环(不包括在此问题内容中)输出到网站“提要”。所有帖子在发布时(在数据库中)都有一个唯一的 ID。
我现在遇到的问题是第二种形式(post__edit)根本没有提示。
我发现我需要在<input type="hidden" value="$postID">
字段中传递帖子的 id。下面的这个表单只是提示用于提交帖子更改的实际post_edit表单。
echo '
<form method="post">
<button type="button" class="post__editBtn">Edit post</button>
<input type="hidden" name="post__editHidden" value="'.$postID.'">
</form>';
当按钮类:post__editBtn
被点击时,会触发一个 jQuery click 事件监听器,该事件监听器会以淡入淡出的形式(post_edit)让您对帖子进行更改并提交它们。
$('.post__editBtn').click(function() {
$('.post__edit').fadeIn();
});
然后我有一个 PHP if 语句来检查隐藏值是否已设置。如果有,那么我会回显先前隐藏的表单,并分配一个 SESSION 变量以供稍后在执行 UPDATE 查询时使用。
if(isset($_POST['post__editHidden'])) {
$_SESSION['post__editHidden'] = $_POST['post__editHidden'];
echo'
<form method="post" action="../../php/includes/updatePost.php" class="post__edit">
<input type="text" name="postTitle" placeholder="Edit title" required>
<textarea name="postMsg" maxlength="255" placeholder="Edit message" required></textarea>
<button type="submit">Edit Post</button>
<button class="post__edit-close">Close</button>
</form>';
}
总结
- 第一个表单触发正确帖子的 jQuery 淡入效果(使用$postID)
- jQuery 只是以第二种形式淡出(post__edit)
- 第二种形式(post__edit)获取
post__editHidden
值(正确帖子的正确 ID)并将其分配给 SESSION 变量,该变量稍后可用于进行 SQL UPDATE 查询,该查询在最终提交第二种形式时运行(到 updatePost. php)。
我相信因为我设置了第一个表单按钮,type="button"
所以它不会提交表单,所以isset($_POST['post__editHidden']
不会运行。但是,如果我将按钮更改为正常的提交类型,那么第一个表单就会出现并重新加载它所在的页面。我可能只是e.preventDefault
在我的 jQuery fadeIn 中,但我不知道这是否有效。
我对 PHP 和 SQL 很陌生,所以我可能全都错了。不管怎么说,多谢拉!
解决方案
这更像是一个建议的替代方案,而不是一个答案。
会话变量的使用在其他情况下会更有用,例如我们可以混淆 ID 值或在孤立(断开连接)导航级别中重用它......
但在这种情况下,我最好只使用一个表单并使用 Ajax 填充它的输入值。
此演示仅更新 postId' 32 的值...当它与获取 Id 并返回它的 jSon 对象的功能性动态 ajax 处理程序一起使用时,它应该可以工作。
$('.post__editBtn').click(function() {
var myform = $('.post__edit');
var postId=$(this).attr('data-id');
myform.find("input[name='post__editHidden']" ).val(postId);
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.myjson.com/bins/kx5xs", // replace with php later
data: {id: postId},
success: function(data) {
myform.find("input[name='postTitle']" ).val(data[0].title);
myform.find("textarea[name='postMsg']" ).val(data[0].content);
},
error : function(){
alert('Some error...!');
}
});
$('.post__edit').fadeIn();
//for demo puropose to show the new value in the update form:
console.log($(".post__edit input[name='post__editHidden']").val());
});
.post__edit{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"post">
Post 30<button type="button" data-id="30" class="post__editBtn">Edit post</button>
</div>
<div class"post">
Post 32<button type="button" data-id="32" class="post__editBtn">Edit post</button>
</div>
<div class"post">
Post 37 <button type="button" data-id="37" class="post__editBtn">Edit post</button>
</div>
<!--all data-id values would be replaced with '.$postID.' in the php loop-->
<form method="post" action="../../php/includes/updatePost.php" class="post__edit">
<input type="text" name="postTitle" placeholder="Edit title" required>
<textarea name="postMsg" maxlength="255" placeholder="Edit message" required></textarea>
<button type="submit">Save Post</button>
<button class="post__edit-close">Close</button>
<input type="hidden" name="post__editHidden" value="">
</form>
然后我们添加一个文件 ex:ajax.php,我们用 ajax 调用它,我们在其中获取一个 ID,我们确实从数据库中获取该记录以返回我们的 json。像这样的东西:
<?php
$id=$_GET['id'];
$stmt = $conn->query("SELECT title,content * FROM posts WHERE postId=$id LIMIT 1");
$result=...
echo json_encode($result);
要获得这样的json:
{"id": "32","title": "POst 32","content": "POst 32 talks about HiTECH"}
推荐阅读
- php - 如何为数组中的每个元素添加一个附加属性,然后如何使用该属性来影响输出的样式
- cs50 - cs50 pset 1 cash 只打印零
- laravel - 在 Laravel 中使用 Elasticquent 和 Docker 抛出“Elasticsearch\Common\Exceptions\NoNodesAvailableException”
- php - WordPress网站限制的PHP逻辑“和”“&&”
- python - 如何在 Pandas DataFrame 中获取特定值的位置
- android - Android 自定义视图支持 MutableLiveData 双向绑定
- jekyll - 为所有帖子设置 URL 变量
- node.js - 将很长的网址传递给 Puppeteer - 有没有更好的方法?
- reactjs - React-native redux localId 不会从“null”更改
- swift - SwiftUI - TabView 中的 OnExitCommand