Question

我使用ajax脚本通过单击按钮调用php页面"MAINPAGE.PHP"，该页面包含一个echo语句到div的id为"YOURDIV"但不调用"MAINPAGE.PHP"的div中}请参阅下面的代码并直接在localhost上执行此操作：

NEW UPDATE：

<!DOCTYPE html>
<html>
<head>

<script>







function yourFunction($x)//passed $url as $x as you said 
{

var xmlhttp = new XMLHttpRequest();
var url = "mainpage.php";// url to where to send
var params = "url=<?php echo $x;?>"; // here we add the php var $url as an 'url' request         parameter
xmlhttp.open("POST", url, true);

//Send the proper header information along with the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);// add the length into header
xmlhttp.setRequestHeader("Connection", "close");

xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText); // or do some other stuff
}
}
xmlhttp.send(params);// requesting with parameters. params contains value of url 

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("POST","mainpage.php",true);
xmlhttp.send();

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{

 $('.container').html(xmlhttp.responseText);
}
}


}
</script>
</head>

<body>
<!--this is the main form,if we press submit button four divs are formed , basically designing         part-->
<form method="POST" action="#">
<input type="text" name="search"><input type="submit" name="submit">
</form>

<?php
if(isset($_POST['submit']))
{ 
$button = $_POST ['submit'];
$search = $_POST ['search'];
$con=mysql_connect("localhost","root","");//connecting from database
if(!$con)
{
die("error:".mysql_error());
}
mysql_select_db("database",$con);
$query="SELECT * FROM tablename ";
$result=mysql_query($query);//tablename contains two fields of four records: 1-S.no, 2- URL like     www.google.com, yahoo, bing,rediff

while($runrows = mysql_fetch_assoc($results))// runrows is array with all the table content
{
$url = $runrows ['URL']; //$url now contains url from the database
echo"<div class='main' style='position:relative;border:1px solid #A5BEBE;background-        color:#E7EFEF;width:84%;  '> 
<b> sometext:-</b><a href='#'>$url</a><br>
</p>
<!-- passed $url in yourfunction as you said-->
<input type='submit' value='expand' class='myButton'  name='button1'     onclick='yourFunction($url);'            style='position:absolute;left:85%;top:4%;background:#B20000;color:white;width:70px;height:20px;font-            size:15px;' >";
echo "<div  class='container' id='yourdiv' style='background:white; '></p>";
echo "</div>";
echo "</div>";
}
mysql_close($con);
}
?>
</body>
</html>

以下是我如何在mainpage.php中使用$ url

<?php
echo 'the response is ', $_POST['url'];//here i want the value of $url for further working
$z=array("google","yahoo","bing","rediff");
for($i=0;$i<=3;$i++){
if (ereg(".*($z[$i]).*", $url))
{
switch($i)
{
case 0:
$a=fopen($url,"r");//opening google site
echo "you have entered"$a;//you have entered www.google.com
break;

case 1:
$a=fopen($url,"r");
echo "you have entered"$a;
break;

case 2:
$a=fopen($url,"r");
echo "you have entered"$a;
break;

case 3:
$a=fopen($url,"r");
echo "you have entered"$a;
break;    
}
}
}
?>

当你运行上面的代码时，你会看到四个带有四个按钮的div，所以每当我按下四个按钮中的任何一个时，mainpage.php必须将消息回显到所需的div但不是。请建议任何人我应该做什么。

提前完成。 @igor如果你什么都不懂，我会向你解释。我发送给你的只是为了理解它冗长但易于理解的概念。

UPDATE1：

1.-我已经粗略地尝试了这段代码来传递$ url及其工作::

<script>
function sendValue(id){
window.location='edit.php?ID=' + id;
}
</script>
<?php $url="hello";?>
<form method="POST" action="#">    
<input type="button" onclick="javascript:sendValue('<?php echo $url; ?>')>
</form>

但是我的整个代码都在php中，所以我尝试了这个不能正常工作的内容::

<script>
function sendValue(id){
window.location='mainpage.php?ID=' + id;
}
</script>
<?php
$url="jhdbvkjsbd";
echo '<form method="POST" action="#">
<input type="button" onclick="javascript:sendValue($url);">
</form>';
?>

如此友好地解释如何以正确的方式传递$ url，但应该是在php中。

2 .- 其次在mainpage.php中切换案例，ereg函数和$ a = fopen（$ url，＆＃34; r＆＃34;）;当我直接在while循环中加载这个mainpage.php时，将它包含在php中，而不是在逐个点击按钮后加载它，看看下面的代码：

while($runrows = mysql_fetch_assoc($results))// runrows is array with all the table content
{
$url = $runrows ['URL']; //$url now contains url from the database
echo"<div class='main' style='position:relative;border:1px solid #A5BEBE;background-        color:#E7EFEF;width:84%;  '> 
<b> sometext:-</b><a href='#'>$url</a><br>
</p>
<!-- passed $url in yourfunction as you said-->
<input type='submit' value='expand' class='myButton'  name='button1'     onclick='yourFunction($url);'            style='position:absolute;left:85%;top:4%;background:#B20000;color:white;width:70px;height:20px;font-            size:15px;' >";
echo "<div  class='container' id='yourdiv' style='background:white; '></p>";

include('mainpage.php'); //this statement directly loads mainpage.php and shows data in this div but i want the data to be shown after clicking the button

echo "</div>";
echo "</div>";
}
mysql_close($con);
}

如果您可以在mainpage.php中访问此$ url变量，那么希望它可以正常工作。

更新最新消息：

function showRSS(str) 
{

$('#loading').html('<img src="Preloader_1.gif"> loading...');


var xmlhttp = new XMLHttpRequest();
var url = "mainpage.php?q=+str";// url to where to send
var params = "url="; // here we add the php var $url as an 'url' request parameter
xmlhttp.open("POST", url, true);

//Send the proper header information along with the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);// add the length into header
xmlhttp.setRequestHeader("Connection", "close");

xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    alert(xmlhttp.responseText); 
  }
}
xmlhttp.send(params);

var xmlhttp;
if (window.XMLHttpRequest)
  {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
else
  {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.open("POST","mainpage.php?q="+str,true);
  xmlhttp.send();

  xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
     $('.container').html(xmlhttp.responseText);
  }
}

}

我希望显示在主div中加载图像，其中class =＆＃34; main＆＃34;直到内容加载到容器div中，并且当它们加载一次该图像应该自动淡出时请告诉我我在哪里做错了

echo"<div class='main' style='position:relative;border:1px solid #A5BEBE;background-color:#E7EFEF;width:84%;'><div id='loading'>

</div> 
<b> sometext:-</b><a href='#'>$url</a><br>
</p>
<!-- passed $url in yourfunction as you said-->
<input type='submit' value='expand' class='myButton' name='button1' onclick='yourFunction($url);'style='position:absolute;left:85%;top:4%;background:#B20000;color:white;width:70px;height:20px;font-            size:15px;' >";
echo "<div  class='container' id='yourdiv' style='background:white; '></p>";
echo "</div>";
echo "</div>";


<style>
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.8;
background-color: #000;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 40%;
left: 45%;
z-index: 100;
}
</style>

Answer 1

我不确定我完全理解你的问题，但这里有点清理。注意：未经测试。几个额外的问题：为什么你要对buttons.parent()的表现和隐藏方式进行不同的处理，你能详细说明你想要的吗？

$(function(){
  var $btns = $('.myButton'),
      $moms = $btns.parent();

  $('body').on('click', '.myButton', function(e) {
    var $ct = $(this).next("div.container"),
        isCollapsed = this.value == 'expand';
        this.value = isCollapsed ? 'expand' : 'collapse';
        $ct[isCollapsed ? 'show':'hide']('slow');

        // sorry got lazy here
        // also, why are you treating the conditions differently, not oppositely?
        if (isCollapsed)
          $moms.show('slow');
        else
          $btns.not($(this)).parent().hide('slow');

        // if this is the button you want to send ajax call
        $.post('mainpage.php', function(data) {
          $('.container').html(data);
        });
  });
});

Answer 2

是否可能，即document.getElementByclass（＆＃34; container＆＃34;）。innerHTML = xmlhttp.responseText

是的，做到了：

$('.container').html(xmlhttp.responseText);

顺便说一下你没有检查xmlhttp状态代码，只有当状态代码= 200且readyState = 4时，才会从服务器返回响应。但你马上检查一下。

来自here：

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}

更新

在for循环中我使用的是一个包含url的$ url变量，同样的$ url也出现在mainpage.php中。所以通过这个$ url，它们是在maipage.php中执行的一些更进一步的echo语句。你能告诉我为什么这个$ url在mainpage.php中不起作用

在原始的php文件中，您想管理某些$ url，将其传递给mainpage.php。您可以将其作为ajax请求的数据。

<?php $url='smth'; ?>

var xmlhttp = new XMLHttpRequest();
var url = "mainpage.php";// url to where to send
var params = "url=<?php echo $url;?>"; // here we add the php var $url as an 'url' request parameter
xmlhttp.open("POST", url, true);

//Send the proper header information along with the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);// add the length into header
xmlhttp.setRequestHeader("Connection", "close");

xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    alert(xmlhttp.responseText); // or do some other stuff
  }
}
xmlhttp.send(params);// requesting with parameters.

在 mainpage.php 中，您可以解决传递的POST参数＆＃39; url＆＃39;为：

$_POST['url']

更新2

在for循环中，您已定义目标div：

 echo "<div  class='container' id='yourdiv' style='display:none;background:white; '>";

id='yourdiv{$i}'

摆脱不真实
删除style='display:none;，而不是div为空，它会缩小为点。

现在您将其称为#yourdiv1或#yourdiv2等。

echo "<div class='container' id='yourdiv{$i}'></div>";

更新3

我为你写了test case 但是将响应插入到对应的div中会花费更多的精力......

更新4

在input点击yourFunction()有效，但没有传递url参数。
使用xhr（我已经给你）的代码适用于页面加载/就绪;它应该在函数中调用，$ url从按钮正确传递到它。分配按钮唯一ID并在yourFunction()中传递它们，然后在xhr中传递它们。
ereg(".*($z[$i]).*", $url)已过时，最好使用preg_match()，但不是必须的。
变量$url未在mainpage.php（例如$a=fopen($url,"r");）中定义，而是使用$ _POST [＆＃39; url＆＃39;]：$a=fopen($_POST['url'],"r");
什么是$b？
请用适当的缩进显示您的代码，这表明您的编码态度并影响读者。
您可以从问题中删除旧代码，只留下您目前拥有的代码，并在评论中写下哪些有效，哪些无效。

更新5

您正确地将$ url传递给yourFunction（），然后通过xhr传入mainpage.php。
但是在mainpage.php中你回复了两次：echo 'the response is ', $_POST['url']并且在其中一个切换案例中：echo "you have entered"$a;
如果你有mainpage.php回显'the response is ', $_POST['url']那么它在xhr上正确返回。但是当您使用ereg（）添加switch case并且现在没有响应时 - 此代码中的某处存在错误。
$a=fopen($url,"r");不是通过网址获取内容的最佳解决方案（您要关闭它吗？）。您最好使用cUrl库或file_get_contents()来实现此目的。

更新6

这不起作用：

$url="jhdbvkjsbd";
echo '<form method="POST" action="#">
<input type="button" onclick="javascript:sendValue($url);">
</form>';

因为在回音中你使用'而不是"并且'内的变量没有得到回应。在echo中尝试这个：

echo '<form method="POST" action="#">
<input type="button" onclick="javascript:sendValue('.$url.' );">
</form>';

包括（＆＃39; mainpage.php＆＃39）; //这个语句直接加载mainpage.php并在这个div中显示数据，但是我希望在点击按钮后显示数据

如果你想这样做，那么你可以先用/在mainpage.php中隐藏日期，方法是用div包含一些类和id：

.some-class {dispaly：none; }

然后在按钮上单击，从选定的ID中删除该类，数据将显示。

更新7

我们可以在此处添加加载图像，直到内容加载？

由于xhr是异步过程，因此您无法知道它何时开始和结束。函数onreadystatechange检查事件是否发生。函数open打开了该过程。所以你只需用它们包装逻辑：

// here the ajax call is initiated, made open
xmlhttp.open("POST", url, true);
// so down here you might insert JS code to put image on screen
...
// this function checks if response is ready "readyState == 4" so inside you might set a code to remove image
xmlhttp.onreadystatechange = function() { 
   if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     <remove image code...>
     alert(xmlhttp.responseText); // or do some other stuff
   }
}

在div中调用php页面使用ajax调用单击一个按钮

2 个答案:

更新

更新2

更新3

更新4

更新5

更新6

更新7