Question

我昨天问了一个类似的问题，我自己解决了这个问题，我想用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有关，但这就是我的脑袋立即认为的那样......或者可能是我失明了，这是一个小问题......

Answer 1

我会做以下调试;

检查您发送到php文件的内容，看看blog-id值是否为空。通过var data = $("#editarticleform").serialize(); console.log(data);
将您的ajax网址更改为url: 'editarticle.php'，因为看起来您的ajax可能无法看到该php文件。

Answer 2

我怀疑没有触发点击事件。也许尝试这样的事情：

<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>

检查浏览器开发人员工具的“网络”标签，查看是否有任何内容发送到后端，以及请求标头是否包含所有必要的数据。

Answer 3

if you use modal bootstrap try this :

$('#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);
        }
     });
  });
})

Answer 4

检查这个

<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将数据发布到数据库

4 个答案: