2016-04-26 14 views
1

DBに入った後に投稿時にページを更新しようとしています。ここ提出後にページを更新するには

はコード

PHPページです...ここで

<?php 
      if ($_SERVER['REQUEST_METHOD'] == 'POST') 
      { 

       //check if its an ajax request, exit if not 
       if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') { 

       } 

       //check $_POST vars are set, exit if any missing 
       if(!isset($_POST["username"]) || !isset($_POST["message"])) 
       { 
        $output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!')); 
        die($output); 
       } 

       //Sanitize input data using PHP filter_var(). 
       $username  = filter_var(trim($_POST["username"]), FILTER_SANITIZE_STRING); 

       $message  = filter_var(trim($_POST["message"]), FILTER_SANITIZE_STRING); 

       //additional php validation 
       if(strlen($username)<4) // If length is less than 4 it will throw an HTTP error. 
       { 
        $output = json_encode(array('type'=>'error', 'text' => 'Name is too short!')); 
        die($output); 
       } 

       if(strlen($message)<5) //check emtpy message 
       { 
        $output = json_encode(array('type'=>'error', 'text' => 'Too short message!')); 
        die($output); 
       } 

       require('config.php'); 

       $sql="INSERT INTO guestbook(name, comment, datetime) VALUES('$username','$message', now())"; 
       header("Location:thanks.php"); 



      } 
      ?>  

はJSページが

$(document).ready(function(){ 
       $("#submit").click(function() { 
        //get input field values 
        var name   = $('#name').val(); 

        var message   = $('#comment').val(); 
        var flag = true; 
        /********validate all our form fields***********/ 
        if(name==""){ 
         $('#name').css('border-color','red'); 
         flag = false; 
        } 

        if(message=="") { 
         $('#comment').css('border-color','red'); 
         flag = false; 
        } 
        /********Validation end here ****/ 
        /* If all are ok then we send ajax request to email_send.php *******/ 
        if(flag) 
        { 
         $.ajax({ 
          type: 'post', 
          url: "thanks.php", 
          dataType: 'json', 
          data: 'username='+name+'&message='+message, 
          beforeSend: function() { 
           $('#submit').attr('disabled', true); 
           $('#submit').after('<span class="wait">&nbsp;<img src="image/loading.gif" alt="" /></span>'); 
          }, 
          complete: function() { 
           $('#submit').attr('disabled', false); 
           $('.wait').remove(); 
          }, 
          success: function(data) 
          { 
           if(data.type == 'error') 
           { 
            output = '<div class="error">'+data.text+'</div>'; 
           }else{ 
            output = '<div class="success">'+data.text+'</div>'; 
            $('input[type=text]').val(''); 
            $('#guestform textarea').val(''); 
           } 

           $("#result").hide().html(output).slideDown();   
           } 
         }); 
        } 
       }); 

       //reset previously set border colors and hide all message on .keyup() 
       $("#guestform input, #guestform textarea").keyup(function() { 
        $("#guestform input, #guestform textarea").css('border-color',''); 
        $("#result").slideUp(); 
       }); 
      }); 

ですが、私はPHPのヘッダー情報を入れたが、毎回私が提出ヒットDB内のデータを保存して、ページに残ります...テキストエリア内のテキストもそこに残ります。ページをリフレッシュして空白のフォームのように見せたいのですが。

答えて

0

更新したいページ全体をご希望の場合は、ご希望のコールバック関数の最後にreload()を使用してください。

location.reload(); 
+0

? JSに慣れていない...このスクリプトだけを使用しました。 – KevinM1990112qwq

+0

@ KevinM1990112qwq '$ {"#result "}の後の' success'コールバックの終わりに、hide().html(出力).slideDown(); 'を試してください。あるいは、 'success'コールバックの' else'ブランチでうまくいっています。 –

+0

@DanCostinelそれはできませんでした。 – KevinM1990112qwq

0

あなたはあなたのクエリがするmysql_query/mysqli_queryまたはものは何でも使用せずに実行されなかった、などの

$sql= mysqli_query($db, "INSERT INTO guestbook(name, comment, datetime) VALUES('$username','$message', now())"); 
// if you using mysqli. 

if($sql){ 
    header("Location:thanks.php"); 
}else{ 
    $output = json_encode(array('type'=>'error', 'text' => 'failed to insert data')); 
    die($output); 
} 

をあなたのPHPファイルを編集することができます。

とあなたのAJAXコードで

$.ajax({ 
     type: 'post', 
     url: "thanks.php", 
     dataType: 'json', 
     data: 'username='+name+'&message='+message, 
     beforeSend: function() { 
      $('#submit').attr('disabled', true); 
      $('#submit').after('<span class="wait">&nbsp;<img src="image/loading.gif" alt="" /></span>'); 
     }, 
     complete: function() { 
      $('#submit').attr('disabled', false); 
      $('.wait').remove(); 
     }, 
     success: function(data) 
     { 
      if(data.type == 'error') 
      { 
       output = '<div class="error">'+data.text+'</div>'; 
       $("#result").hide().html(output).slideDown(); 
      } 
      else 
      { 
       output = '<div class="success">'+data.text+'</div>'; 
       $("#result").hide().html(output).slideDown(); 
       $('input[type=text]').val(''); 
       $('#guestform textarea').val(''); 

       // reload 
       location.reload(); 
      }  
     } 
}); 
関連する問題