AJAX方法不工作

我有一個表單，當我點擊提交我不希望頁面刷新，這就是爲什麼我添加AJAX來實現這一點，你可以看到。問題是它沒有工作。AJAX方法不工作

<form id="formFooter" action="" method="post"> 

      <h3>Select your trademark</h3> 

       <select class="form-control" name="trademark"> 

        <option></option> 
        <option>©</option> 
        <option>™</option> 
        <option>®</option> 

       </select> 

      <h3>Your company name</h3> 

       <input class="form-control" type="text" name="companyName" placeholder="Your company name" /> 

       <h3>Background Color</h3> 


       <input class="form-control" placeholder="(e.g. 00ff00)" type="text" name="backgroundColor"> 

       <h3>Font Color</h3> 


       <input class="form-control" placeholder="(e.g. 00ff00)" type="text" name="fontColor"> 


       <h3>Opacity</h3> 


       <input class="form-control" placeholder="(Pick a value between 0 and 1 e.g. 0.3)" type="text" name="opacity"> 


       <br/> 
       <br/> 


       <button class="form-control" id="run" type="submit" name="submit">Generate footer</button> 
       </form> 
      <div id="showData">&nbsp;</div> 
       <script type="text/javascript"> 

        $('#run').on("click", function (e) { 
         var formData = new FormData($('#myForm')[0]); 
         $.ajax({ 
         url: "script.php", 
         type: 'POST', 
         data: formData, 
         success: function (data) { 
          $('#showData').html(data); 
          }, 
         cache: false, 
         contentType: false, 
         processData: false 
         }); 
         return false; 
        }); 

       </script>

這裏是的script.php：

<?php 
function footerPreview() 
{ 
echo "<h3>Preview:</h3>"; 
date_default_timezone_set('UTC'); 
$trademark = $_POST["trademark"]; 
$company = $_POST["companyName"];  
$date = date("Y"); 
//style 
$backgroundColor = $_POST['backgroundColor']; 
$fontColor = $_POST['fontColor']; 
$opacity = $_POST['opacity']; 

echo "<div id='generated_footer_date' style='background-color:$backgroundColor; color:$fontColor; opacity: $opacity; ' >$trademark $date $company </div>";   

} 


// generate result for the head 
function rawHead() 
{ 
$head = htmlspecialchars('<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet"> 
</head>',ENT_QUOTES); 
echo "<pre><h4>Put this code inside your head tags</h4>$head</pre>"; 
} 



// generate result for the body 
function rawBody() 
{ 
$body1of5 = htmlspecialchars('<div id="footer_date">',ENT_QUOTES); 
$body2of5 = $_POST["trademark"]; 
$body3of5 = date("Y");   
$body4of5 = $_POST["companyName"]; 
$body5of5 = htmlspecialchars('</div>',ENT_QUOTES); 
echo "<pre><h4>Put this code inside your body tags</h4>$body1of5 $body2of5 $body3of5 $body4of5 $body5of5 </pre>"; 
} 

// generate result for the CSS 
function rawCSS() 
{ 
$opacity = $_POST['opacity']; 
$backgroundColor = $_POST['backgroundColor']; 
$fontColor = $_POST['fontColor']; 
echo 
"<pre> 
<h4>Put this code in your websites stylesheet</h4> 
color:$fontColor; 
background-color:$backgroundColor; 
opacity:$opacity; 
width:100%; 
text-align:center; 
padding-top:15px; 
height:50px; 
font-family: 'Raleway', sans-serif; 
right: 0; 
bottom: 0; 
left: 0; 
position:fixed; 
</pre>"; 

} 


// Generate eveything by one click 

if(isset($_POST['submit'])) 
{ 
footerPreview(); 
rawHead(); 
rawBody(); 
rawCSS(); 
} 

?>

當我點擊提交沒有任何反應。我希望在同一頁面上生成script.php而不刷新。

來源

2016-10-25 Kevin

：假的，'？請在這裏添加完整的表格 – devpro

檢查您的控制檯是否有錯誤 – Bhavik

您收到檢查控制檯時出現什麼錯誤。 – Bharat

你可以把它非常簡單的Ajax請求爲：

首先，此處無需使用FormDate，因爲您的<form>中沒有任何file輸入，因此您可以使用serialize()在您的要求的數據：

var formData = $("#myForm").serialize();

其次，你只是打印在你的PHP的HTML，這意味着你只需要打印HTML，所以你可以在這裏使用dataType=HTML爲：

dataType: "html",

三，還有一件事可以幫助您進行調試，在您的script.php文件頂部添加print_r($_POST)並檢查控制檯。

修改的請求：

$(document).ready(function(){ 
    $("#run").click(function(){ 
     var formData = $("#myForm").serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "script.php", 
      data: formData, 
      dataType: "html", 
      success: function(response) 
      { 
       $('#showData').html(response); 
      }, 
      beforeSend: function() 
      { 
       //any loader 
      } 
     }); 
     return false; 
    }); 
});

更新：

從您的評論：是啊，顯示提交後。它顯示這樣的：陣列（[商標] => [的companyName] => [的backgroundColor] => [FONTCOLOR] => [不透明度] =>） - 凱文範阿爾岑6分鐘前

看這個陣列，你不必在$_POST結果submit所以你有兩個選擇可以改變：

1）您可以使用count()功能檢查if(count($_POST) > 0)。

2），也可以，爲什麼[Rü使用`的contentType使用<input type='submit' name='submit'>代替<button type='submit' name='submit'>

來源

2016-10-25 09:31:17 devpro

它確實有效。它不顯示所需的結果，但它確實顯示了您告訴我在我的php文件頂部添加的print_r – Kevin

好極了，現在您擁有需要的數據，您可以在PHP中正確解析它:) –

@KevinAartsen：這是很高興知道，您的ajax現在工作正常，現在將您的輸入正確添加到您的PHP文件中。 – devpro

  $(document).ready(function() { 
 
       $('#run').on("click", function (e) { 
 
        e.preventDefault(); 
 
        alert('inside ajax call'); 
 
        var formData = new FormData($('#myForm')[0]); 
 
        $.ajax({ 
 
        url: "script.php", 
 
        type: 'POST', 
 
        data: formData, 
 
        success: function (data) { 
 
         $('#showData').html(data); 
 
         alert('ajax call success'); 
 
        }, 
 
        cache: false, 
 
        contentType: false, 
 
        processData: false 
 
        }); 
 
        return false; 
 
       }); 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<form id="formFooter" action="" method="post"> 
 

 
    <h3>Select your trademark</h3> 
 
     <select class="form-control" name="trademark"> 
 
      <option></option> 
 
      <option>©</option> 
 
      <option>™</option> 
 
      <option>®</option> 
 
     </select> 
 
    <h3>Your company name</h3> 
 
     <input class="form-control" type="text" name="companyName" placeholder="Your company name" /> 
 
    <h3>Background Color</h3> 
 
     <input class="form-control" placeholder="(e.g. 00ff00)" type="text" name="backgroundColor"> 
 
    <h3>Font Color</h3> 
 
     <input class="form-control" placeholder="(e.g. 00ff00)" type="text" name="fontColor"> 
 
    <h3>Opacity</h3> 
 
     <input class="form-control" placeholder="(Pick a value between 0 and 1 e.g. 0.3)" type="text" name="opacity"> 
 
     <br/> 
 
     <br/> 
 
     <button class="form-control" id="run" type="submit" name="submit">Generate footer</button> 
 
    </form> 
 
    <div id="showData">&nbsp;</div>

試試上面的代碼並刪除警報時，它爲你工作:)

來源

2016-10-25 09:20:01 Jazzzzz

不好意思。 – Kevin

現在檢查我添加的代碼片段:) – Jazzzzz

AJAX方法不工作

回答

相關問題