最受欢迎

表单在提交后加载外部脚本

Form loading external script after submiting

本文关键字：外部 脚本 加载 提交 表单 | 更新日期: 2023-09-27

我有一个这样的表单:

<!DOCTYPE html>
<html>
    <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">
        <link rel="stylesheet" type="text/css" href="resources/style.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Footer Generator</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                </ul>
            </div>
        </nav>
        <!-- Customize your footer and submit -->
        <div id="container">

        <form class ="formFooter" method="post" action= "script.php">
            <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" type= "submit" name= "submit">Generate footer</button>
        </form>

        </div>
        <div id="footer_date"> © 2016 Footer Generator </div> 
    </body>
</html>

表单有一个指向"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>
        $.ajax({
        url: 'script.php',
        data: {                 
        },
        type: 'post',
        success: function(output) {

         }
        });
</script>

编辑下面是我的新代码: 
<!DOCTYPE html>
<html>
    <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">
        <link rel="stylesheet" type="text/css" href="resources/style.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Footer Generator</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                </ul>
            </div>
        </nav>
        <!-- Customize your footer and submit -->
        <div id="container">

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

    <div id="showData">&nbsp;</div>

        </div>
        <div id="footer_date"> © 2016 Footer Generator </div> 
    </body>
</html>

检查一下，

按这种方式排列你的HTML表单，

 <form id="myForm" action="" method="post">
    <!-- input fields -->
    <button class="form-control" id="run" type="submit" name="submit">Generate footer</button>
 </form>

和jQuery脚本，

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

节，用于显示请求的内容，

<div id="showData">&nbsp;</div>

将其添加到php_script_page.php中并检查其工作情况

<?php
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";
?>
相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习