0

请注意：我不能使用 jquery 或 ajax 来做到这一点！

这个应用程序是为与客户面对面打交道的：有了它，我可以向他们展示许多主题作为网页的插图。他们可以选择他们想要的主题。这些主题包含选项卡模板和按钮模板，面包屑各种组合，可根据需要用于任何网页。如果是博客，那么模板是以博客为中心的；如果是商业销售产品之类的，那么页面（或者更确切地说，看起来像在主 div 中呈现的网页的示例）可能有一个使用 jquery 或 ajax 的模板

我正在制作一个应用程序，将 php 切换到包含 10 个主题变体的页面上。它都在一个 div 中，作为一个没有 head 标签的页面（它们已经被使用过）；主题来自下拉列表（在页面顶部附近的栏上串起）。

我不能使用 JQUERY/AJAX 的原因 我不能使用这些，因为现在有各种版本的这些用于已经在我的主题中的模板。如果在同一页面上使用了多个版本的 jquery 或 ajax，并且它们是不同的版本，那么它们会相互冲突并且无法正常工作或根本无法正常工作。

我只使用 php 就做到了这一点。我可以为主题使用一个开关，每页使用十个案例效果很好，并且每个下拉列表我在每个列表上还有另外 10 个页面，所以一个列表 = 100 所以只有 5 个列表有 500 个网页变化（其中意味着下拉列表栏上可以有超过 2000 个，所以这对我的应用程序来说是必不可少的）。这实际上是一种简单的方法，并且没有现在使用的各种版本的 jquery 和 ajax 的复杂性，我将能够使用 jquery 来解决这个问题。

是的，我已经花费了很多时间并进行了很多搜索以寻找解决方案，但在任何搜索中都发现有人建议寻找使用 AJAX 或 JQUERY 的解决方案的人。

我是 javascript 新手，所以想问如何将带有 switch 功能的 .php 文档放入屏幕上的主 div 中（每个 switch 案例都有一个主题示例，以 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 的一个示例：我需要这个带有指向每个单独的 switch-case 内容的链接的开关。它本身可以正常工作，但需要它进入索引页面示例中的 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 不适合在这里使用。

那是什么？这是我的问题我如何使用直接的 javascript 而没有 jquery 或 ajax 来做到这一点？

4

1 回答 1

2

我真的不明白为什么你不能在这里使用 ajax。这适用于所有新的浏览器（IE7+）：

function changeText() {
    var obj = new XMLHttpRequest();
    obj.onreadystatechange = function() {
        if(obj.readyState == 4) {
             document.getElementById("target").innerHTML = obj.responseText;
        }
    }
    obj.open("GET", 'includes/pager00.php', true);
    obj.setRequestHeader("Content-Type", "text/plain");
    obj.send("");
}

php 返回的脚本可能无法运行，但 html 将放在您的 div 中。这是 AJAX 背后的功能，但不需要库，也不会有版本控制困难；此功能完全独立工作。

如果这不起作用，你能说出具体原因吗？

于 2013-10-25T02:59:47.220 回答