javascript - javascript を使用して .php を div にロードする

Question

注: jquery や ajax を使用してこれを行うことはできません。

このアプリは、クライアントと対面してやり取りするためのものです。このアプリを使用すると、多くのテーマを Web ページのイラストとして表示できます。彼らは自分が望むテーマを選ぶことができます。これらのテーマには、必要に応じて任意の Web ページで使用されるタブテンプレートとボタンテンプレート、ブレッドクラムのあらゆる種類の組み合わせが含まれています。ブログの場合、テンプレートはブログ中心です。商用販売製品の場合、ページ (または、メイン div 内でレンダリングされる Web ページのように見える例) には、jquery または 1 つの ajax を使用したテンプレートが含まれる場合があります。

テーマの 10 のバリエーションを含むページに php スイッチを配置するアプリを作成しています。head タグのないページとしてすべて div 内にあります (それらは既に使用されています)。テーマはドロップダウンリスト (ページ上部近くのバーに表示されます) から取得されます。

JQUERY/AJAX を使用できない理由既にテーマに含まれているテンプレートにさまざまなバージョンが使用されているため、これらを使用できません。jquery または ajax の複数のバージョンが同じページで使用され、それらが異なるバージョンである場合、それらは互いに競合し、適切に機能しないか、まったく機能しません。

私はphpだけを使ってここまでたどり着きました。ページごとに 10 個のケースを使用してテーマにスイッチを使用できます。各ドロップダウンリストでは、各リストに別の 10 ページがあり、1 つのリスト = 100 であるため、5 つのリストのみで 500 のバリエーションの Web ページがあります (ドロップダウンリストバーに 2000 を超える可能性があることを意味するため、これは私のアプリにとって不可欠です)。これは実際には簡単な方法であり、現在使用されているさまざまなバージョンの jquery と ajax を複雑にすることなく、jquery を使用してこの問題を解決できます。

はい、私は何時間もかけて解決策を探しましたが、検索で見つかったのは、AJAX または JQUERY を使用する解決策を探している人にアドバイスしている人だけです。

私はjavascriptが初めてなので、スイッチ機能を使用して.phpドキュメントを画面上のメインdivに取得する方法を尋ねています(スイッチの各ケースには、htmlでレンダリングされるテーマの例があります)ので、メインdiv内に配置できますドロップダウンリストから。

これは、私が何をする必要があるか、およびこれまでにどれだけの距離を達成したかの簡単な例です。

<?php 



?>
<html><head>
<title>Test Includes</title>
</head>

<body>

<div id="content" style="margin: 0 auto;">
<style type="text/css">
#nav{ list-style:none; font-weight:bold; margin-                bottom:0px;float:left;width:100%;position:relative;z-index:5;}
#nav li{float:left;margin-right:1px;position:relative;}
#nav a{display:block;padding:1px;color:#fff;background:#333;text-decoration:none;}
#nav a:hover{color:#fff;background:#aaa;text-decoration:underline;}
/*==== DROPDOWN ====*/
#nav ul{background:#fff; 
background:rgba(255,255,255,0); 
list-style:none;position:absolute;left:-9999px; }
#nav ul li{padding-top:1px; /* Introducing a padding between the li and the a give the     illusion spaced items */float:none;}
#nav ul a{white-space:nowrap; }
#nav li:hover ul{ /* Display the dropdown on hover */left:0; }
#nav li:hover a{ 
background:#aaa;text-decoration:underline;}
#nav li:hover ul a{ 
text-decoration:none;}
#nav li:hover ul li a:hover{ background:#333;}
</style>
<div id="linker" style = "position:absolute; float:left;top:0;left:0;margin: 0     auto;height:30px">
<ul id="nav">
    <li>
        <a href="#">pages</a>
        <ul>
            <li><a href="includes/inc_page1.php">page 1</a></li>

            <li><a href="includes/inc_page2.php">page 2</a></li>

            <li><a href="#" onclick='changeText()'>page example</a></li>
        </ul>
    </li>
  </ul>
</div>
<script type="text/javascript">
function changeText(){
document.getElementById('target').innerHTML = 'includes/pager00.php';
}
</script>
<div id = "target" style = "position:absolute;top:50; left:20px;      width:85%;height:300px;padding:5px; border: 1px solid red;">

</div></div>
</body></html>

上記は、私のインデックスページが何であるかの短い例です。以下は、私のスイッチの短縮例である pager00.php です。上記の例の div 内でこの例をレンダリングしたいと思います。これは、テンプレートを使用しない短縮バージョンのスイッチであり、私がやりたいことの例です。

pager00.php example:

<div>
<!--========== THESE LINKS WOULD NEED TO BE INSIDE THE DIV AND A CLICK BRINGS A THEM     ONTO THE PAGE ====>
<p style="text-align: center;"><a href="?pmode=one">Pick Me</a> | <a href="?    pmode=two">No Pick Me</a> | <a href="?pmode=three">NO! PICK ME!!!</a></p>
<?php
$closediv = "</div>";$closebody  = "</body>"; $closep = "</p>";$closeh1  = "</h1>";             $closeh2  = "</h2>"; $closeh3  = "</h3>"; 
$closeh4  = "</h4>"; $closeh5  = "</h5>"; $closeh6  = "</h6>";$closespan  = "</span>";     $closeli  = "</li>"; $closeul  = "</ul>";
$closea  = "</a>"; $break = "</br>"; $wrapperend = "</div>";
$c1heading = "hiho";
$c1text = "hiho, it's off to work we go";
$c2heading = "hiho hiho";
$c2text = "hiho hiho";
$c3heading = "hiho";
$c3text = "hihohihohiho hiho ";
$styler01 = '<LINK REL=StyleSheet HREF="plonkone.css" TYPE="text/css" MEDIA=screen />';
$styler02 = '<LINK REL=StyleSheet HREF="plonktwo.css" TYPE="text/css" MEDIA=screen />';
$styler03 = '<LINK REL=StyleSheet HREF="plonkthree.css" TYPE="text/css" MEDIA=screen     />';
class tagClass  {  public $prop1;       public function __construct()  {  } public     function __destruct() { }  
  public function setProperty($newval)  { $this->prop1 = $newval; }  public function     getProperty()  {  return $this->prop1; }  }
$obj =new tagClass();

if(isset($_GET['pmode']))
   if ($_GET['pmode'])
    {  
    $pmode = $_GET['pmode'];
      switch($pmode)
      {
    case 'one' :
 // ===== CHANGING THE STYLE ON EACH CASE IS WHAT CHANGES THE THEME ITSELF IN MY APP ======>
         echo $styler01;  
          $tag = 'div';$id = 'caseone';$style = 'cone';$tagger = '<%s id="%s"     class="%s">'; 
          $obj->setProperty(sprintf($tagger, $tag, $id, $style)); 
      echo $obj->getProperty();

          $tag = 'h3';$tagger = '<%s >'; 
          $obj->setProperty(sprintf($tagger, $tag )); 
          echo $obj->getProperty(); echo $c1heading; echo $closeh3;

         $tag = 'p';$tagger = '<%s >'; 
         $obj->setProperty(sprintf($tagger, $tag )); 
         echo $obj->getProperty(); echo $c1text; echo $closep; echo $closediv;       
break;
case 'two' :
       echo $styler02;
         $tag = 'div';$id = 'casetwo';$style = 'ctwo';$tagger = '<%s id="%s"     class="%s">'; 
          $obj->setProperty(sprintf($tagger, $tag, $id, $style)); 
      echo $obj->getProperty();

          $tag = 'h3';$tagger = '<%s >'; 
          $obj->setProperty(sprintf($tagger, $tag )); 
          echo $obj->getProperty(); echo $c2heading; echo $closeh3;

         $tag = 'p';$tagger = '<%s >'; 
         $obj->setProperty(sprintf($tagger, $tag )); 
         echo $obj->getProperty(); echo $c2text; echo $closep; echo $closediv;     
break;
case 'three' :
     echo $styler03;
     $tag = 'div';$id = 'casethree';$style = 'cthree';$tagger = '<%s id="%s"    class="%s">'; 
     $obj->setProperty(sprintf($tagger, $tag, $id, $style)); 
      echo $obj->getProperty();

          $tag = 'h3';$tagger = '<%s >'; 
          $obj->setProperty(sprintf($tagger, $tag )); 
          echo $obj->getProperty(); echo $c3heading; echo $closeh3;

         $tag = 'p';$tagger = '<%s >'; 
         $obj->setProperty(sprintf($tagger, $tag )); 
         echo $obj->getProperty(); echo $c3text; echo $closep; echo $closediv;
break;
      }
 }

?>
</div>

上記は、div に入る必要があるものの例です。このスイッチと、個別のスイッチケースコンテンツへのリンクが必要です。それ自体は問題なく動作しますが、インデックスページの例では div 内に配置する必要があります。ページャ自体を div に組み込む必要があります。JavaScriptは、そのままでは機能しないようにしたいものの例にすぎません。「includes/pager00.php」のみが印刷されますが、最終的には div 内になりますが、これらの単語だけでなく、レンダリングするには pager00.php スクリプトが必要です...明らかに

<script type="text/javascript">
function changeText(){
document.getElementById('target').innerHTML = 'includes/pager00.php';
}
</script>

私が必要としているものではありません。ここで javascript .innerHTML を使用するのは適切ではありません。

それで、何ですか？これは私の質問です。jquery や ajax を使用せずに、ストレートな JavaScript を使用してこれを行うにはどうすればよいですか?

javascript - javascript を使用して .php を div にロードする

1 に答える 1

Related

Reference