フォームは、私がこのような形を持っている

をsubmiting後に外部スクリプトを読み込む：フォームは、私がこのような形を持っている

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

出典

2016-10-25 Kevin

は

があなたを配置し、この方法をチェックしてくださいこのように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>"; 
?>

出典

2016-10-25 08:07:42 user3099298

Iすべてを追加しましたが、フォームは送信していません。コンソールをチェックして、このメッセージが表示されます。メインスレッドの同期XMLHttpRequestは、エンドユーザーの経験に悪影響を与えるため、非推奨です。詳細については、https://xhr.spec.whatwg.org/を参照してください。 – Kevin

JSからasync：falseセクションを削除し、 – user3099298

をチェックします。エラーはなくなりましたが、ボタンは何も生成しません – Kevin

フォームは、私がこのような形を持っている

答えて

関連する問題