AJAX方法不工作 - AJAX Method not working

我有一个表单，当我点击提交时，我不希望页面刷新，这就是为什么我添加了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在同一页面上生成而不刷新。

您可以使它非常简单，您的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] =>[不透明]=>)- Kevin Aartsen 6分钟前

看这个数组，$_POST的结果中没有submit，所以你有两个选项来改变它:

1)可以使用count()函数检查if(count($_POST) > 0)。

2)或者你可以用<input type='submit' name='submit'>代替<button type='submit' name='submit'>

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

试试上面的代码，当它为你工作时删除警告:)