如何调用一个php页面内容并使用ajax将其显示在另一个php页面上_Php_Html_Ajax

如何调用一个php页面内容并使用ajax将其显示在另一个php页面上

php html ajax

如何调用一个php页面内容并使用ajax将其显示在另一个php页面上,php,html,ajax,Php,Html,Ajax,我有索引页面，我有两个按钮“员工详细信息”和“学生详细信息” 当我单击“staffDetails”时，“staffDetails.php”的内容应该显示在index.php中同样，“学生详细信息”也是如此 Ajax功能：下面是一个完整的ajax函数，可以像这样使用，并在将来为您提供完整的帮助 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

我有索引页面，我有两个按钮“员工详细信息”和“学生详细信息” 当我单击“staffDetails”时，“staffDetails.php”的内容应该显示在index.php中

同样，“学生详细信息”也是如此

Ajax功能：

下面是一个完整的ajax函数，可以像这样使用，并在将来为您提供完整的帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function search1(){
$.ajax({  

  type: "POST",  
  url:"StaffDetails.php",  

  beforeSend: function()
  {
  },
  success: function(resp)
  {  

    $("#StaffDetails").html(resp);

  }, 

  complete: function()
  {
  },

  error: function(e)
  {  
  alert('Error: ' + e);  
  }  
  }); 
}

function search2(){
 $.ajax({  

  type: "POST",  
  url:"StudentDetails.php",  

  beforeSend: function()
  {
  },
  success: function(resp)
  {  

    $("#StudentDetails").html(resp);

  }, 

  complete: function()
  {
  },

  error: function(e)
  {  
    alert('Error: ' + e);  
  }  
}); 
}
</script>
</head>

<body>
<input type="button" value="Staff Details" onclick="search1()" />
<input type="button" value="Student Details" onclick="search2()" />
<div id="StaffDetails">
</div>
<div id="StudentDetails">
</div>
</body>


无标题文件
函数search1（）{
$.ajax（{
类型：“POST”，
url:“StaffDetails.php”，
beforeSend:function（）
{
},
成功：功能（resp）
{  
$（#StaffDetails”）.html（resp）；
}, 
完成：函数（）
{
},
错误：函数（e）
{  
警报（'错误：'+e）；
}  
}); 
}
函数search2（）{
$.ajax（{
类型：“POST”，
url:“StudentDetails.php”，
beforeSend:function（）
{
},
成功：功能（resp）
{  
$（#StudentDetails”）.html（resp）；
}, 
完成：函数（）
{
},
错误：函数（e）
{  
警报（'错误：'+e）；
}  
}); 
}

下面是完整的ajax工作和测试示例，希望现在没有问题了。

谢谢

你的问题是什么？你的语法不正确……所以在ajax调用的末尾没有分号。index.php和staffdetails.php是否在同一目录级别？使用：$（“#StaffDetails”）.html（html）代替document.getElementById；为什么不直接使用它呢？请解释一下如何使用它，为什么它会起作用，需要注意的任何陷阱，等等。链接到进一步的文档也是一件好事。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function search1(){
$.ajax({  

  type: "POST",  
  url:"StaffDetails.php",  

  beforeSend: function()
  {
  },
  success: function(resp)
  {  

    $("#StaffDetails").html(resp);

  }, 

  complete: function()
  {
  },

  error: function(e)
  {  
  alert('Error: ' + e);  
  }  
  }); 
}

function search2(){
 $.ajax({  

  type: "POST",  
  url:"StudentDetails.php",  

  beforeSend: function()
  {
  },
  success: function(resp)
  {  

    $("#StudentDetails").html(resp);

  }, 

  complete: function()
  {
  },

  error: function(e)
  {  
    alert('Error: ' + e);  
  }  
}); 
}
</script>
</head>

<body>
<input type="button" value="Staff Details" onclick="search1()" />
<input type="button" value="Student Details" onclick="search2()" />
<div id="StaffDetails">
</div>
<div id="StudentDetails">
</div>
</body>