doushiposong30622 2016-10-25 09:15
浏览 69
已采纳

AJAX方法不起作用

I have a form, when i click on submit i dont want the page to refresh, thats why i added AJAX to achieve this as you can see. The problem is that its not working. 

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

Here is the 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();
}

?>

When i click on submit nothing happens. I want the script.php to be generate on the same page without refreshing.

  • 写回答

2条回答 默认 最新

  • dongmei3869 2016-10-25 09:31
    关注

    You can make it very simple your Ajax Request as:

    First of all no need to use FormDate here, because you don't have any file input in your <form>, so you can use serialize() data in your request as:

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

    Second, you are just printing the HTML in your PHP, it means you just need to print html, so you can use dataType=HTML here as:

    dataType: "html",

    Third, one more thing will help you in debugging, add print_r($_POST) in your script.php file at top and check the console.

    Modified Request:

    $(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;
   }); 
});

    Update:

    From your comment: yeah it shows after submit. It shows this : Array ( [trademark] => [companyName] => [backgroundColor] => [fontColor] => [opacity] => ) – Kevin Aartsen 6 mins ago

    Look at this array, you don't have submit in the result of $_POST so you have two options to change this:

    1) You can use count() function for checking if(count($_POST) > 0).

    2) Or you can use <input type='submit' name='submit'> instead of <button type='submit' name='submit'>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？
  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn，请教个问题 flink启动yarn-session.sh连不上hadoop，这个整了好几天一直不行，求帮忙看一下怎么解决
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛