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

我正在使用ajax脚本通过单击按钮调用php页面MAINPAGE.php，该页面包含一条echo语句，该语句进入一个id为YOURDIV的div，但它没有调用MAINPAGE.php。请参阅下面的代码，并直接在本地主机上运行该语句：

最新更新：

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

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

提前准备好。 @如果你什么都不懂，我会给你解释的。我给你发这封信只是为了理解这个概念，虽然很长，但很容易理解

更新1：

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中，使用了switch cases、ereg函数和$a=fopen$url，r；当我在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变量，那么希望它能正常工作

最新更新：

我想展示一下，在主div中加载class=main的图像，直到内容加载到container 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>

---

我不确定我是否完全理解了你的问题，但这里有一点澄清。注：未经测试。还有几个问题：为什么你对按钮的显示和隐藏有不同的看法。家长，你能详细说明你想要什么吗

$(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);
        });
  });
});

是否可能，例如document.getElementByclasscontainer.innerHTML=xmlhttp.responseText

是的，做吧：

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

顺便说一句，您不检查xmlhttp状态代码，因为只有当状态代码=200且readyState=4时，服务器才会返回响应。但你要马上检查

发件人：

使现代化 在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.

更新2 在for循环中，您定义了目标div：

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

更新3 我为你写了一首歌 但是将响应插入相应的div将需要您付出更多的努力

更新4 在输入时，单击yourFunction，但没有传递url参数。 我给您的带有xhr的代码在页面加载/就绪时工作；相反，应该在函数中调用它，并从按钮将$url正确地传递给它。为按钮分配唯一的ID并将其传递到yourFunction中，然后在xhr中传递。 ereg.*$z[$i].*$url已过时，最好使用preg_match，但不要使用Nessery。 mainpage.php中未定义变量$url，例如$a=fopen$url，r；，而是使用$_POST['url']：$a=fopen$_POST['url']，r； b美元是多少？ 请用适当的缩进显示您的代码，这表明您的编码态度并影响读者。 您可以从问题中删除旧代码，只留下您目前拥有的代码，并在commenta中编写哪些有效，哪些无效。 更新5 您可以将$url正确地传递到函数中，然后通过xhr传递到mainpage.php。 但是在mainpage.php中，您会回显两次：回显“响应是”、$\u POST['url']，并且在其中一个切换案例中：回显您输入了$a； 如果您让mainpage.php回显“响应为”、$\u POST['url']，那么它会在xhr上正确返回。但是，当您使用ereg添加开关案例时，现在没有响应，那么代码中的某个地方就有错误。 $a=fopen$url，r；这不是通过url获取内容的最佳解决方案。您打算关闭它吗？。为此，您更愿意使用cUrl库或file\u get\u内容。 更新6 这不起作用：

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

包括“mainpage.php”//此语句直接加载mainpage.php并在该div中显示数据，但我希望在单击按钮后显示数据

如果您想这样做，那么您可以首先使用div包装mainpage.php中的日期，并使用一些类和id：

.某些类{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
   }
}

id始终是唯一的

---

是的，我忘了，那么我应该使用class而不是id，是否有可能，比如document.getElementByclasscontainer.innerHTML=xmlhttp.responseText；如果要使用jQuery，请坚持使用jQuery。JQuery支持Ajax，它可以为您处理所有交叉浏览器的内容。jquery只用于设计matter，但用于我使用ajax调用的按钮。请解释一下，如果我使用class而不是id，可以吗？你不应该有重复的id，所以从这个意义上说，是的。做得好Igor Savinkin先生，但他们的另一个问题是，在for循环中，我使用了一个$url变量，该变量包含url，mainpage.php中也存在同样的$url。因此，通过这个$url，他们在maipage.php中执行了更多的echo语句。你能告诉我为什么这个$url在mainpage.php中不起作用吗？如果你能解决这个问题，它将非常有帮助。好的，我已经在我以前的脚本中添加了你的脚本，在函数yourFunction的上方，并在mainpage.php中添加了$\u POST['url']，而这个style=display none默认情况下用于隐藏divs容器，，如果我去掉这个，div已经显示出来了，但是我不能隐藏它们bydefault@Darkknight，现在您将此$_POST['url']作为mainpage.php中的响应文本返回：并通过调试工具F12查看响应。嘿，我遇到了显示smth的问题，smth是中给出的$url值，但我已经在for循环中有了它的值。事实上，在编码中我并没有展示这一点，但我从数据库连接中获取$url的所有值，并通过按钮调用它在mainpage.php中使用该url，所以这个$url从数据库中获取值并使用for循环，我希望它们在mainpage.php中传递，以便进行进一步的操作……也许现在你得到了正确的概念，我知道这并不容易，但是这对我的项目来说非常重要，你的努力不会白费。如果我删除了你的，我得到的只是响应，而不是响应是smth，那么如何从数据库中获取url文本

<?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.

$_POST['url']  

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

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

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

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

// 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
   }
}