2016-05-06 24 views
1

これは重複している場合は事前にお詫びしますが、私はstackoverflowを検索し、この件については何も見つかりませんでした。私のbase.htmlでは、私はこのような形式があります:出力をphpからhtmlにリダイレクトするには?

<form method="post" action="../php/base.php"> 
    <input type="hidden" name="addToDB" value="addToDB" /> 
    <input type="text" id="name" name="name" placeholder="Enter name"> 
    <input type="text" id="address" name="address" placeholder="Enter address"> 
    <button type="submit">Submit</button> 
</form> 

注ダミーinput素子と、 (これは良い方法です?)このフォームをターゲットにPHPで使用されるbase.php次があります。

if (isset($_POST['addToDB'])) { 
    create_tables(); // creates tables in DB 
    addToDB(); // inserts content to DB 
} 

function addToDB() { 
try { 
    // open DB connection 
    $db = new PDO("sqlite:../db/mydb.sqlite"); 

    $name= $_POST['name']; 
    $address= $_POST['address']; 

    $db->exec("INSERT INTO Person (P_Name, P_Address) VALUES ('$name', '$address');"); 

    // The following needs to be redirected back to base.html: 
    print "<table border=1>"; 
    print "<tr><td>Name</td><td>Address</td></tr>"; 
    $result = $db->query('SELECT * FROM Person'); 
    foreach($result as $row) 
    { 
     print "<tr><td>".$row['P_Name']."</td>"; 
     print "<td>".$row['P_Address']."</td></tr>"; 
    } 
    print "</table>"; 

}catch(PDOException $e) 
    { 
     echo $e->getMessage(); 
    } 
} 

ボタンがクリックされた送信すると、ファイルbase.phpは、テーブルを開いて表示します。代わりに、私はbase.phpのスクリプトを実行し、の出力をbase.htmlに送り返します。(コンテンツdivのどこか)に表示されます。私はおそらくAJAXを使用する必要があることを理解し、私は構築し、その中にHTMLマークアップと、おそらく文字列(外部PHPファイル内の特定の関数を呼び出し、その戻り値をリダイレクトする方法を見つけ出すことはできません

  • table)をHTMLファイルに戻します(base.html
  • 私はデータストレージにSQLiteを使用しています。 DBを使用して作成されるcreate_tables();
  • 私はPHPの初心者です、どんな入力/提案も非常に高く評価されるでしょう。

あなたは以下のようにあなたのbase.htmlファイルを変更することができ、お客様に

答えて

1

あなたはHTML、jQueryのAJAX、およびPHPで次のことを試すことができます:

HTML:

<form method="post" id="formid"> 
    <input type="hidden" name="addToDB" value="addToDB" /> 
    <input type="text" id="name" name="name" placeholder="Enter name"> 
    <input type="text" id="address" name="address" placeholder="Enter address"> 
    <!-- take simple button --> 
    <button type="button" id="submit">Submit</button> 
</form> 
    <div id="response"></div> 

はJavaScript:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     //on click of submit button 
     $("#submit").click(function(){ 
      $.ajax({ 
       url:"../php/base.php", 
        data:{ 
          addToDB:"addToDB", 
          name:$("#name").val(), 
          address:$("#address").val() 
         }, 
          type:"POST", 
          success:function(res){ 
          $("#response").html(res); 
         } 
      }); 
     }); 
}); 
</script> 

変更がに行われることはありませんあなたのPHP。これで運が良かった。

-1

ありがとう:

<form method="post" action="../php/base.php" id="formid" onsubmit='return false;'> 
     <input type="hidden" name="addToDB" value="addToDB" /> 
     <input type="text" id="name" name="name" placeholder="Enter name"> 
     <input type="text" id="address" name="address" placeholder="Enter address"> 
     <button type="submit" id="submit">Submit</button> 
</form> 
<div id="display"></div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#submit").on("click",function(e){ 
     e.preventDefault(); 
     var formdata=$("#formid").serialize(); 
     var url=$("#formid").attr("action"); 

     $.post(url,formdata,function(data){ 
     $("#display").html(data); 
     },'json'); 

    }); 

}); 
</script> 

それはあなたのために役立つことがあります。

+0

なぜ、これはまだbase.phpに私をもたらします。 jQuery関数の最初のリフレッシュを防ぐべきでしょうか? – Alex

+0

このシナリオは、出力を変数に取り込み、その関数がprintを使用する代わりにその関数を返すようにすると機能します。 – RST

+0

お願いします。私は以下を使いました: '$ output ="

​​名前​​年齢 "; \t $ query = $ db-> query( 'SELECT * FROM Products'); \t foreachの($行として$クエリ) \t {\t $出力= "​​" $行[ 'P_NAME'] ""。。。。 \t $出力。= "​​"。$行['P_Category']。 ""; \t} \t $出力。= "
"; \t return $ output; '代わりに空白のbase.phpを取得します... – Alex

0
I want the ... output sent back to the base.html 

なぜあなたはそれを処理しませんか?

form.php

<?php 

// you can save this two functions in a file 'DBhelper.php'; 
// then you can 'require(DBhelper.php') here to make this file a little cleaner 
// function create_tables(){ 
//  put your codes here... 
// }; 
function addToDBandGetAllUsers($name,$address) { 
try { 
    // open DB connection 
    $db = new PDO("sqlite:../db/mydb.sqlite"); 
    $db->exec("INSERT INTO Person (P_Name, P_Address) VALUES ('$name', '$address');"); 

    //The following needs to be redirected back to base.html: 
    $result = $db->query('SELECT * FROM Person'); 
    // this data is for test, even the 1 + 1 solution, I will test it, I don't want to post codes in community with errors.... 
    // $result = array(
    // array('P_Name' => 'John','P_Address' => 'Foobar'), 
    // array('P_Name' => 'Alex','P_Address' => 'Qux') 
    // ); 
    // array_push($result, array('P_Name' => $name,'P_Address' => $address)); 
    return $result; 
}catch(PDOException $e) 
    { 
    echo $e->getMessage(); 
    } 
} 
// if the $_POST['name'] is not empty, we will update db 
// this is just a basic validation, if we use isset() instead of empty(), 
// the form can be submitted with a empty value; 
if (! empty($_POST['name']) && ! empty($_POST['address'])){ 
    create_tables(); // creates tables in DB 

    // I change the the function name , since this guy do a lot of things.... 
    $result = addToDBandGetAllUsers($_POST['name'],$_POST['address']); 
} else{ 
    echo 'Please fill the form.'; 
} 


?> 

<!DOCTYPE html> 
<html> 
<head> 
    <title>form</title> 
</head> 
<body> 
// if we got $result, that means the form has been submitted, so we can display the table; 
<?php if (isset($result)) : 
    echo '<h1>All users:</h1>'; 
    print "<table border=1>"; 
    print "<tr><td>Name</td><td>Address</td></tr>"; 
    foreach($result as $row) 
    { 
     print "<tr><td>".$row['P_Name']."</td>"; 
     print "<td>".$row['P_Address']."</td></tr>"; 
    } 
    print "</table>"; 
    echo '<hr>'; 
    endif; 
?> 
<form method="post" action="form.php"> 
    <input type="hidden" name="addToDB" value="addToDB" /> 
    <input type="text" id="name" name="name" placeholder="Enter name"> 
    <input type="text" id="address" name="address" placeholder="Enter address"> 
    <button type="submit">Submit</button> 
</form> 
</body> 
</html> 

フォーム要素の 'アクションは、' 自己です。

関連する問題