Question

我的php脚本和ajax出现问题。我有一个独特的主页，其中有一个中心div，可根据不同的点击次数更改内容。在任何情况下都无法刷新我的页面因为有音频播放器可以停止播放音乐。现在我必须执行用户创建的播放列表。之后，用户加载其播放列表的所有属性，我将表单提交到php脚本以将播放器加载到数据库中。但我不想离开我的主页。所以我尝试使用AJAX函数来提交表单并在中央div中加载一条消息。我已经成功地将AJAX用于其他目标，但在这种情况下，它有点困难。

这是我的表格：

tf.where

这是我的php脚本

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

这是我的AJAX功能：

<?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");
?>

该功能有效，但在处理结束时，我带了一个（明显的）空白页面到playlistaddscript.php。如果您需要更多信息，请问我。我该如何解决？

Answer 1

您收到一个空白页面，因为表单已提交，这是因为未指定按钮type属性，因此它采用默认值submit。

按钮type属性可以是：

<button type="button|submit|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播放列表”按钮上添加属性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 );
}

内容加载的PHP和AJAX问题

2 个答案: