将ajax请求的文件调用结果显示在不同的div中

时间:2013-10-26 14:07:49

标签: php ajax

点击按钮,我提交表单并将一些数据发布到data.php

data.php的结果我在index.php上显示了一些div

的index.php:

function showUser(form, e) {
      //alert(myid);
      e.preventDefault();
      e.returnValue=false;
      var xmlhttp;
      var sent = form.elements['sent'].value;  
      var text1 = document.getElementById('previewUrl').innerText || document.getElementById('previewUrl').textContent;
      var text2 = document.getElementById('previewTitle').innerText || document.getElementById('previewTitle').textContent;
      var text3 = document.getElementById('previewDescription').innerText || document.getElementById('previewDescription').textContent;

      //alert(text3);      
      console.log(sent);

      if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
      }
      else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function(e) {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

xmlhttp.responseText.resultOne;
xmlhttp.responseText.resultTwo;

document.getElementById("myFirstDiv").innerHTML=xmlhttp.responseText.resultOne;
document.getElementById("mySecondDiv").innerHTML=xmlhttp.responseText.resultTwo;
        }
      }
        xmlhttp.open(form.method, form.action, true);
      xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      deURIComponent(text3);
      xmlhttp.send('sent=' + sent + '&text1=' + text1 + '&text2=' + text2 + '&text3=' + text3);
    }

Data.php看起来像这样:

<?php
//sent has value "http://www.paulgraham.com/herd.html"
$url=$_POST['sent'];
$text1=$_POST['text1'];
$text2=$_POST['text2'];
$text3=$_POST['text3'];

//Some processing

echo $restult1;  // I want to show this on <div1> on main page   index.php

//Some processsing

echo $result2;    // I want to show this on <div2> on main page index.php


?>

我如何在index.php上的不同div上显示result1和result2?

2 个答案:

答案 0 :(得分:1)

<?php
//sent has value "http://www.paulgraham.com/herd.html"
$url=$_POST['sent'];
$text1=$_POST['text1'];
$text2=$_POST['text2'];
$text3=$_POST['text3'];

//Some processing


$resultArray = array("resultOne" => $result1,"resultTwo" => $result2);

echo json_encode($resultArray);

?>

所以你将从php页面获得一个响应对象。

现在你可以像Js中的bellow那样访问它了。

在Javascript中

xmlhttp.responseText.resultOne;
xmlhttp.responseText.resultTwo;

现在你可以设置两个div

document.getElementById("myFirstDiv").innerHTML=xmlhttp.responseText.resultOne;
document.getElementById("mySecondDiv").innerHTML=xmlhttp.responseText.resultTwo;

答案 1 :(得分:1)

也许您可以回复一个脚本,您可以将result1的值分配给div1,将result2分配给div2

例如,如果您使用jquery,您可以执行以下操作:

echo "<script> $("#div1").innerHTML(".$result1");</script>"