使用AJAX和JQuery發送模態表單內容到PHP文件時遇到困難

-2

我在學習如何從引導模式提交表單數據到PHP文件。從我見過的其他問題來看，我認爲我是對的，但我一直在收到錯誤對話框。我必須失去一些明顯的東西。使用AJAX和JQuery發送模態表單內容到PHP文件時遇到困難

test.php的

<html> 
    <body> 
    <div class="container padding-top-10 change-width">  
    <div class="row padding-top-20" align="center"> 
     <button class="btn btn-warning btn-lg" data-toggle="modal" data-target="#bandModal">Add Band(s)</button> 
    </div> 
    </div> 



    <div id="thanks"></div> 
    <div class="modal fade" id="bandModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content modal-lg"> 
     <!-- Modal Header --> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"> 
      <span aria-hidden="true">&times;</span> 
      <span class="sr-only">Close</span> 
      </button> 
      <h4 class="modal-title" id="bandModalLabel"> 
        Add a Show 
       </h4> 
     </div> 
     <!-- Modal Body --> 
     <div class="modal-body row"> 

      <div class="container col-md-12"> 
      <form id="addBandForm"> 
       <h3>Band Details<small>Enter each band name and primary contact information...</small></h3> 
       <div class="well" id="newBandRows"> 
       <div class="row"> 
        <div class="col-md-3"> 
        <div class="form-group"> 
         <label for "newBandName">Band Name:</label> 
         <input type="text" class="form-control" id="newBandName" name="newBandName" placeholder="Enter Band Name" /> 
        </div> 
        </div> 
        <div class="col-md-3"> 
        <div class="form-group"> 
         <label for="primaryContact">Primary Contact:</label> 
         <input type="text" class="form-control" id="primaryContact" name="primaryContact" placeholder="Enter Name" /> 
        </div> 
        </div> 
        <div class="col-md-3"> 
        <div class="form-group"> 
         <label for "personEmail">Primary Email:</label> 
         <input type="email" class="form-control" id="primaryEmail" name="primaryEmail" placeholder="Enter Email" /> 
        </div> 
        </div> 
        <div class="col-md-3"> 
        <div class="form-group"> 
         <label for "personPhone">Primary Phone #:</label> 
         <input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Enter Phone #" /> 
        </div> 
        </div> 
       </div> 
       </div> 
       <div id="newRowButton"> 
       <div class="row"> 
        <div class="col-md-1"> 
        <button type="button" class="btn btn-success pull-left" onClick="addNewBandRow();">+</button> 
        </div> 
        <div id="remover" class="col-md-1"> 

        </div> 
        <div class="col-md-7"> 
        </div> 
        <div class="col-md-3 padding-top-10"> 
        <button id="addBandSubmit" class="btn btn-primary pull-right">Submit</button> 
        </div> 
       </div> 
       </div> 
       <script src="js/newBand.js" type="text/javascript"></script> 
      </form> 
      </div> 

     </div> 

     <div class="modal-footer"> 
     </div> 

     </div> 
    </div> 
    </div> 
    </body> 

    </html>

jQuery的

   $(function() { 
    //twitter bootstrap script 
    $("#addBandSubmit").click(function() { 
     $.ajax({ 
     type: "POST", 
     url: "womhScripts/addBand.php", 
     data: $('#addBandForm').serialize(), 
     success: function(msg) { 
      $("#thanks").html(msg) 
      $("#bandModal").modal('hide'); 
     }, 
     error: function(xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); alert(err.Message); } 
     }); 
    }); 
    });

addBand.php

<?php 
if (isset($_POST['newBandName'])) { 
$bandName = strip_tags($_POST['newBandName']); 
$contact = strip_tags($_POST['primaryContact']); 
$email = strip_tags($_POST['primaryEmail']); 
$phone = strip_tags($_POST['primaryPhone']); 

echo "bandName  =".$bandName."</br>"; 
echo "contact  =".$contact."</br>"; 
echo "email  =".$email."</br>"; 
echo "phone  =".$phone."</br>"; 
echo "<span class="label label-info" >your message has been submitted .. Thanks you</span>"; 
}?>

來源

2016-07-06 Matt Molsberry

看看你的開發者控制檯，看看裏面有沒有什麼 –

再看看這些'$ contact' - '$ primaryContact'和其他變量。錯誤報告應該拋出你未定義的變量通知，並因爲它而默默地失敗。 –

你得到了什麼錯誤？從你說的我理解的ajax請求返回一個error.Are你張貼在正確的路徑???你可以嘗試錯誤：function（xhr，status，error）var err = eval（「（」+ xhr.responseText + 「）」）; alert（err.Message）; }並告訴我們錯誤實際上是什麼。 –

我看了看，通過你的代碼並發現了很多錯誤。

在你的test.php中，將Submit按鈕從一個按鈕改爲一個實際的提交按鈕。

<input id="addBandSubmit" type="submit" class="btn btn-primary pull-right">Submit</input>

在你的Jquery 添加的preventDefault（）函數從提交到同一頁面停止形式。

 $("#addBandForm").submit(function(event) { 
     event.preventDefault(); 
     $.ajax({ 
     url: "womhScripts/addBand.php", 
     type: "POST", 
     data: $('#addBandForm').serialize(), 
     success: function(msg) { 
      $("#thanks").html(msg); 
      $("#bandModal").modal('hide'); 
     }, 
     error:function(errMsg) { 
      console.log(errMsg); 
     } 
     }); 
    });

您可以閱讀有關這裏的preventDefault功能https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

在你addBand.php改變周圍的標籤，標籤信息，以單引號雙引號。你不能在PHP裏面的雙/單引號內有雙/單引號。

echo "<span class='label label-info' >your message has been submitted .. Thanks you</span>";

此外，它有助於使用控制檯精確查看Chrome或Firefox中使用「網絡」選項卡發佈的內容。

如果它適合您，請將其標記爲答案。希望這可以幫助。

來源

2016-07-06 14:57:28

非常感謝！我不知道有關Chrome中的控制檯......再次，謝謝。此外，我沒有按鈕類型設置，因爲我不知道有關預防默認方法...你有建議，我可以閱讀什麼來了解其他我應該知道的常用方法？ –

這取決於你想要實現什麼。您可以隨時瀏覽Stack或Github上的代碼。有許多開源代碼庫可以用於各種目的。快樂的編碼。 –

使用AJAX和JQuery發送模態表單內容到PHP文件時遇到困難

回答

相關問題