使用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將數據發佈到數據庫

回答

相關問題