PHP和AJAX內容加載問題

Question

我的php腳本和ajax遇到問題。 我有一個獨特的主頁，其中有一個中央div，可根據不同的點擊更改內容。 無論如何我都無法刷新頁面，因為有並且音頻播放器可以停止播放音樂。 現在，我必須執行用戶創建的播放列表。 在用戶加載其播放列表的所有屬性之后，我將表單提交到php腳本以將播放器加載到數據庫中。 但是我不想離開我的主頁。 因此，我嘗試使用AJAX函數來提交表單並將消息加載到中央div中。 我已經將AJAX用於成功的其他目標，但是在這種情況下要困難一些。

這是我的表格：

<div class="pers_playlist_add">
<h3> Aggiungi Playlist </h3>
<form class="pers_form_down" id="formaddplaylist" action="playlistaddscript.php" method="post">
    Nome Playlist: <input type="text" name="playlist" required></input>
    Descrizione Playlist: <input type="text" name="desc" required></input><br>
    Privata: <input type="radio" name="priv" value="y" checked="checked">Si</input>
    <input type="radio" name="priv" value="n">No</input>
    <button id="created" style="float: right;" class="btn waves-effect waves-light" type="reset">Pulisci</button>
    <button style="float: right; margin-left: 5px;" class="btn waves-effect waves-light" onClick="aggiungiplaylist()">Crea Playlist</button>
</form>

這是我的PHP腳本

<?php
session_start();    
$name = $_POST['playlist'];
$desc = $_POST['desc'];
$priv = $_POST['priv'];

$conn = mysqli_connect('localhost','root', '') 
    or die("Cannot connect to the dbms");

$query = mysqli_query($conn, "use my_alessiocorvagliatsn") 
    or die ("Cannot choose the tsn_db");

if($priv == 'y'){
    $p = 1;
}
else{
    $p = 0;
}

$email = $_SESSION['email'];

$q = "Insert into tsn_playlists (playlistname, playlistdescription, private, email) values ('$name', '$desc', '$p', '$email')";
$query = mysqli_query($conn, $q)
    or die("Cannot add a playlist");
?>

這是我的AJAX函數：

function aggiungiplaylist() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("formaddplaylist").submit();
      document.getElementById("central").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "addedplaylist.html", true);
  xhttp.send();
}

該功能可以正常工作，但是在處理結束時，我將進入帶（清晰）空白頁面的playlistaddscript.php。 如果您需要更多信息，請詢問我。 我該如何解決？

Answer 1

您將獲得空白頁，因為將提交表單，這是因為未指定button type屬性，所以它采用了默認值submit 。

按鈕類型屬性可以是：

<button type="button|submit|reset">

• button ：該按鈕是可單擊的按鈕
• 提交 （默認）：該按鈕是一個提交按鈕（提交表單數據）
• reset ：該按鈕是一個重置按鈕（將表單數據重置為其初始值）

請參閱以下內容：

 function aggiungiplaylist() { console.log("dummy aggiungi"); } 

 <div class="pers_playlist_add"> <h3> Aggiungi Playlist </h3> <form class="pers_form_down" id="formaddplaylist" action="playlistaddscript.php" method="post"> Nome Playlist: <input type="text" name="playlist" required></input> Descrizione Playlist: <input type="text" name="desc" required></input><br> Privata: <input type="radio" name="priv" value="y" checked="checked">Si</input> <input type="radio" name="priv" value="n">No</input> <button id="created" style="float: right;" class="btn waves-effect waves-light" type="reset">Pulisci</button> <button style="float: right; margin-left: 5px;" class="btn waves-effect waves-light" onClick="aggiungiplaylist()" type="button">Crea Playlist</button> </form> 

最后，您必須在“ Crea Playlist”按鈕上添加屬性type="button" ，例如：

<button type="button" style="float: right; margin-left: 5px;" class="btn waves-effect waves-light" onClick="aggiungiplaylist()" type="button">Crea Playlist</button>

希望對您有幫助，再見。

Answer 2

如果您要使用ajax（為了方便起見，使用FormData對象）從表單提交數據，而不是使用回調函數來提交表單，則頁面不會重新加載，並且您可以從php腳本發送回響應-用作你覺得合適。

function aggiungiplaylist() {
    var form=document.getElementById('formaddplaylist');
    var div=document.getElementById('central');
    var data=new FormData( form );

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(e) {
        if( this.readyState == 4 && this.status == 200 ) {
            if( div ) div.innerHTML = this.response;
        }
    };
    /* send the data directly to the php script */
    xhttp.open( 'POST', 'playlistaddscript.php', true );
    xhttp.send( data );
}