使用AJAX将数据发布到数据库
昨天我问了一个类似的问题,我自己解决了答案,我想用ajax将数据添加到数据库中以避免刷新页面。使用AJAX将数据发布到数据库
现在,我希望做同样的事情,但更新数据库中的数据。
林不知道,如果问题是由具有相同页面上2个AJAX脚本请求引起的..
我想提交这种形式:
我也许应该告诉你,这种形式在一个模式屏幕
<form id="editarticleform" method="post">
<div class="form-group">
<input type="hidden" class="form-control" id="blog-id" name="blog-id" value="<?php echo $list['id']; ?>">
</div>
<div class="form-group">
<label for="blog-title">Article title</label>
<input type="text" class="form-control" id="blog-title" name="blog-title" placeholder="Blog title" value="<?php echo $list['blog_title']; ?>" required>
</div>
<div class="form-group">
<label for="blog-content">Article content</label>
<textarea class="form-control" id="blog-content" name="blog-content" placeholder="Blog content" required><?php echo $list['blog_body']; ?></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile">Article image</label>
<input type="file" class="form-control-file" id="article-image" name="article-image" aria-describedby="fileHelp" value="<?php echo $list['blog_image']; ?>">
<small id="fileHelp" class="form-text text-muted">This is the image that will appear along side the article.</small>
</div>
<fieldset class="form-group">
<legend>Active</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="active-inactive" id="optionsRadios1" value="1" checked>
Article is active - Will be shown in the blog.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="active-inactive" id="optionsRadios2" value="0">
Article is inactive - Will not show.
</label>
</div>
</fieldset>
<fieldset class="form-group">
<legend>Comments</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="enable-comments" id="enable-comments1" value="1" checked>
Enable comments - Users can post comments
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="enable-comments" id="enable-comments2" value="0" aria-describedby="disableComments">
Disable comments - Users cannot post comments
<small id="disableComments" class="form-text text-muted">If you disable comments for users, administrators will still be able to post comments.</small>
</label>
</div>
</fieldset>
<button type="submit" id="edit_article" name="edit_article" class="btn btn-primary">Save</button>
</form>
使用该脚本更新数据库:
<?php
require_once("../../includes/database.class.php");
session_start();
$uid = $_SESSION['uid'];
$id = $_POST['blog-id'];
$title = $_POST['blog-title'];
$content = $_POST['blog-content'];
$image = $_POST['article-image'];
$active = $_POST['active-inactive'];
$comments = $_POST['enable-comments'];
$sql = "UPDATE blog_article SET blog_title = '$title', blog_body = '$content', blog_image = '$image', active = '$active', comments = '$comments' WHERE id = '$id'";
// print_r($sql);
$result = $database->query($sql);
if ($result) {
echo "Article updated.";
}else {
echo "Query failed" . print_r($sql);
}
?>
通过AJAX以避免刷新页面:
<script>
var submit = $('#edit_article');
submit.click(function() {
var data = $("#editarticleform").serialize();
var update_div = $('#update_div');
$.ajax({
data: data,
type: 'post',
url: '/editarticle.php',
success:function(html){
update_div.html(html);
}
});
});
</script>
至于最后一个问题,如果我直接设置表单动作为editarticle.php脚本的脚本工作完全正常。当我实现ajax脚本时,它不更新数据库。
我不确定如果它得到的东西做的博客-ID,但多数民众赞成我的头马上认为这是...或者,它可能是我被盲目和一个小小的问题..
我会做以下调试;
- 检查您发送给php文件的内容,看看blog-id的值是否为空。在做
var data = $("#editarticleform").serialize(); console.log(data);
- 更改你的ajax网址为
url: 'editarticle.php'
,因为它似乎你的ajax可能不会看到php文件。
我忘了提,此表单通过引导模式位于模态屏幕中。林不知道这是否有所作为,但控制台不显示任何东西 –
好的。 ('body')。on('click','#edit_article',function(){ }) 或$(“#editarticleform”)。提交(功能(){ }) –
那没有工作要么 –
我怀疑点击事件没有触发。也许尝试是这样的:
<script>
// Wait for document ready
$(function(){
$(document).on('click', '#edit_article', function() {
var data = $("#editarticleform").serialize();
var update_div = $('#update_div');
$.ajax({
data: data,
type: 'post',
url: '/editarticle.php',
success: function(html){
update_div.html(html);
}
});
});
});
</script>
检查您浏览器的开发者工具的网络标签,查看任何被发送到后台,并查看请求头,如果包括所有必要的数据。如果你使用模式引导试试这个
这没有工作.. –
你有没有包括jquery文件的头部文件?也检查警报(数据)之前调用ajax是什么输出? –
您是否至少可以查看是否在网络选项卡中发出请求,以及请求中是否包含任何数据(请参阅请求标头)?或者,查看[shown.bs.modal](http://getbootstrap.com/javascript/#modals)事件。 – carlo
:
$('#myModal').on('shown.bs.modal', function() {
var submit = $('#edit_article');
submit.click(function() {
var data = $("#editarticleform").serialize();
var update_div = $('#update_div');
$.ajax({
data: data,
type: 'post',
url: '/editarticle.php',
success: function (html) {
update_div.html(html);
}
});
});
})
检查这个
<script>
// Wait for document ready
$(document).ready(function(){
$("#edit_article").click(function() {
var data = $("#editarticleform").serialize();
var update_div = $('#update_div');
$.ajax({
url: 'editarticle.php',
type: 'post',
data: data,
success: function(html){
update_div.html(html);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
});
});
</script>
如果仍不能正常工作尝试使用AJAX发送原始数据,并检查是否正常工作
data: "blog-id="+blog-id
检查开发者控制台。 –
我有,它不显示任何东西.. –
你看到在控制台中的页面ajax请求? –