[英]using javascript to load a .php into a div
请注意:我不能使用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的新手,所以我问如何将我的.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的示例:我需要此开关以及指向每个单独的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这样做?
我真的不明白为什么你不能在这里使用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背后的功能,但是不需要库,也没有版本控制困难; 这个功能可以单独使用。
如果这不起作用,你能说出具体原因吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.