如何在特定div中的html页面中调用php页面的输出?

时间:2014-09-21 19:09:22

标签: javascript php jquery html

这是我的HTML代码

<html>
<body>
<form name="form1" action="php1.php" method="post">
  <input type="text" name="text1">
<input type="submit" name="submit1">
</form>
<div id="div1">
</div>
</body>
</html>

这是我的php1.php代码

<?php
if(isset($_POST['submit1']) && ($_POST['text1'])=="text"){
echo "hello";
}
?>

如果我想调用php1.php的输出,即hello,在html div1中该做什么?

@Uzumaki,我已经编辑了这样的html代码,但它不起作用,这是我的代码。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
$("form#postit").submit(function(){

                                var formData = new FormData($(this)[0]);

                                $.ajax({
                                    url: "hello.php",
                                    type: 'POST',
                                    data: formData,
                                    async: false,
                                    success: function (data) 
                                   {

                                        // $("#div1").append(data); // or 

                                        $("#div1").html(data);

                                    },
                                    cache: false,
                                    contentType: false,
                                    processData: false
                                });
                        return false;
                    });
</script>
</head>
<body>
<form name="form1" method="post" id="postit">
  <input type="text" name="text1">
<input type="submit" name="submit1">
</form>
<div id="div1">
</div>
</body>
</html>

3 个答案:

答案 0 :(得分:4)

由于你没有通过jquery或ajax提及我假设你采用更简单的老式方式所以这里是代码

将您的消息发送回HTML页面

$msg = "hello"
header("Location: your_html_page.html?msg=".$msg);

在HTML DO中

<div id="div1">

<?php
error_reporting(0);
echo $_GET['msg'];

?>

</div>

使用JQUERY:

将数据发布到php

$.post("your_php_page.php",{data:data},function(returned_data_from_php){

$("#div1").append(returned_data_from_php); // or 

$("#div1").html(returned_data_from_php);

});

使用Ajax

$("form#postit").submit(function(){

                                var formData = new FormData($(this)[0]);

                                $.ajax({
                                    url: "your_php_page.php",
                                    type: 'POST',
                                    data: formData,
                                    async: false,
                                    success: function (returned_data_from_php) 
                                   {

                                         $("#div1").append(returned_data_from_php); // or 

                                         $("#div1").html(returned_data_from_php);

                                    },
                                    cache: false,
                                    contentType: false,
                                    processData: false
                                });
                        return false;
                    });

<强> PHP

你想从php返回的内容应该是echo,有很多方法可以做到这一点

(单一字符串)echo "Success";

(多个字符串)echo $msg1.$msg2;

(阵列数据)
例如......

$data = array();
$i = 0;
while($numbs = mysql_fetch_array($result))
{
$row_numb = $numbs['id'];
$data[$i] = $row_numb;
$i++;
}

    echo json_encode($data);

//这会将json类型对象传递给java脚本

当你进入javascript时,你想要逐个访问数组的所有元素,这很容易

<强> JAVASCRIPT

parsed_it = JSON.parse(data); // data is the json type you got from your php 

所以parsed_it[0],parsed_it[1],parsed_it[2]等等你可以访问所有数据

希望它有所帮助!!

答案 1 :(得分:1)

将PHP放入您想要结果的HTML文件中。确保您的文件名为something.php,并且您的服务器上有PHP处理器。

<html>
<body>
<form name="form1" action="php1.php" method="post">
  <input type="text" name="text1">
<input type="submit" name="submit1">
<div id="div1">
<?php
if(isset($_POST['submit1']) && ($_POST['text1'])=="text"){
    echo "hello";
}
?>
</div>
</body>
</html>

答案 2 :(得分:0)

您可以使用AJAX动态加载脚本输出:

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get

您也可以考虑使用jQuery来简化代码:

http://api.jquery.com/jquery.get/