используя JavaScript для загрузки .php в div

Question

используя JavaScript для загрузки .php в div

0

ОБРАТИТЕ ВНИМАНИЕ: я не могу использовать jquery или ajax для этого!

Это приложение предназначено для общения с клиентами лицом к лицу: с ним я могу показать им много тем в качестве иллюстрации веб-страниц. Они выбирают, какую тему они хотят. Эти темы содержат шаблоны вкладок и шаблоны кнопок, панировочные сухари - всевозможные комбинации, которые используются для любой веб-страницы в зависимости от того, что им нужно. Если это для блога, то шаблоны ориентированы на блог; если это коммерческие продукты для продажи, то страницы (или, скорее, примеры, которые выглядят как веб-страницы, которые отображаются в основном div), могут иметь шаблон с использованием jquery или ajax одного

Я делаю приложение, которое ставит php-переключатель на страницу, содержащую 10 вариантов темы. Это все внутри div как страница без заголовков (они уже используются); темы взяты из выпадающих списков (выровнены на панели в верхней части страницы).

ПРИЧИНА Я НЕ МОЖЕТ ИСПОЛЬЗОВАТЬ JQUERY/AJAX. Я не могу использовать их, потому что в настоящее время существуют различные версии этих шаблонов, которые уже используются в моих темах. Если на одной и той же странице используются несколько версий jquery или ajax, и они разные версии, они конфликтуют друг с другом и не работают должным образом или вообще не работают.

Мне удалось добиться этого только с помощью php. Я могу использовать переключатель для тем, используя десять случаев на странице, хорошо работает, и с каждым выпадающим списком у меня есть еще 10 страниц в каждом списке, и поэтому один список = 100, поэтому только с 5 списками имеется 500 вариаций веб-страниц (которые означает, что более 2000 человек могут находиться в выпадающем списке, поэтому это важно для моего приложения). это на самом деле простой способ сделать это и без усложнения различных версий jquery и ajax, которые теперь используются, я мог бы использовать jquery для решения этой проблемы.

ДА Я ПРОЧИТАЛ МНОГИЕ ЧАСЫ И СДЕЛАЛ БОЛЬШЕ ПОИСКА РЕШЕНИЯ, НО ВСЕ НАХОДЯТСЯ В ЛЮБОЙ ПОИСКЕ, ЧТО-НИБУДЬ, ЧТОБЫ ОЗНАКОМИТЬСЯ С ЧЕЛОВЕКОМ, ИЩЕМ РЕШЕНИЮ ИСПОЛЬЗОВАНИЯ AJAX ИЛИ JQUERY.

Я новичок в javascript, поэтому я спрашиваю, как получить мой.php-документ с помощью функции switch в главном 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 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 - всего лишь пример того, что я хочу, чтобы он не работал так, как есть. Я получаю только "include/pager00.php", хотя он и заканчивается внутри div. Мне нужен скрипт pager00.php для рендеринга, а не только эти слова... ОБЫЧНО

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

НЕ ЧТО Я НУЖДАЮ. javascript.innerHTML не подходит для использования здесь.

Так что же? это мой вопрос, как мне это сделать с прямым javascript и без jquery или ajax?

Gregory 25 окт. 2013, в 05:23

Источник

1

Что вы подразумеваете под "версией ajax"? AJAX - это не библиотека, а методика разработки веб-приложений.
Barmar 25 окт. 2013, в 02:47
0

ну, вы могли бы также вывести все HTML из php на гигантский массив, но это ужасное решение. просто используйте xmlhttprequest напрямую, если вы хотите избежать библиотек.
Adam D. Ruppe 25 окт. 2013, в 02:47
0

И разве вы не знаете о jQuery.noConflict() , который используется, чтобы позволить нескольким версиям jQuery сосуществовать?
Barmar 25 окт. 2013, в 02:48

Показать ещё 1 комментарий

Теги:

php

javascript

html

1 ответ

Ещё вопросы

Что вы подразумеваете под "версией ajax"? AJAX - это не библиотека, а методика разработки веб-приложений.
ну, вы могли бы также вывести все HTML из php на гигантский массив, но это ужасное решение. просто используйте xmlhttprequest напрямую, если вы хотите избежать библиотек.
И разве вы не знаете о jQuery.noConflict() , который используется, чтобы позволить нескольким версиям jQuery сосуществовать?

Adam D. Ruppe · Answer 1 · 2013-10-25T01-00-00.000Z

Я не понимаю, почему вы не можете использовать 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, но нет необходимости в библиотеках и не будет проблем с версированием; эта функция работает сама по себе.

Если это не сработает, можете ли вы точно сказать почему?