使用AJAX将数据发布到数据库

-1

昨天我问了一个类似的问题，我自己解决了答案，我想用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，但多数民众赞成我的头马上认为这是...或者，它可能是我被盲目和一个小小的问题..

来源

2017-07-30 Chris Marsland

检查开发者控制台。 –

我有，它不显示任何东西.. –

你看到在控制台中的页面ajax请求？ –

我会做以下调试;

检查您发送给php文件的内容，看看blog-id的值是否为空。在做var data = $("#editarticleform").serialize(); console.log(data);
更改你的ajax网址为url: 'editarticle.php'，因为它似乎你的ajax可能不会看到php文件。

来源

2017-07-30 11:04:42

我忘了提，此表单通过引导模式位于模态屏幕中。林不知道这是否有所作为，但控制台不显示任何东西 –

好的。（'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>

检查您浏览器的开发者工具的网络标签，查看任何被发送到后台，并查看请求头，如果包括所有必要的数据。如果你使用模式引导试试这个

来源

2017-07-30 11:18:51 carlo

这没有工作.. –

你有没有包括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); 
     } 
    }); 
    }); 
})

来源

2017-07-30 11:46:14

检查这个

<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

来源

2017-07-30 12:30:13

使用AJAX将数据发布到数据库

回答

相关问题