用jQuery实现Ajax

使用jQuery与PHP实现动态加载

最新推荐文章于 2025-09-11 21:23:01 发布

转载最新推荐文章于 2025-09-11 21:23:01 发布 · 45 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/GarfieldTom/archive/2009/06/09/1499610.html

文章标签：

#php #javascript #ViewUI

本文介绍了一个简单的示例，展示了如何利用jQuery AJAX技术实现网页元素的动态加载与更新。通过POST方式发送请求到PHP后台，处理并返回数据，前端再对数据进行解析展示。

首先建立一个html文件:

<html>
<head>
<script type="text/javascript" src="Library/jquery1.3.1/dist/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#content").load("hello.html");//这一句是加载页面,之后在点击按钮后会被替换
//document.getElementById("content").innerHTML="Hello,jquery!";
});

function CreateQueryString()
{
    var name=encodeURI(encodeURI($("#name").val()));
    var querystr="name="+name;
    return querystr;
}

function TestClick()
{
    $.ajax({
           type:"POST",
           url:"Test.php",
           data:CreateQueryString(),
           success:function(data){
                           $("#content").html(decodeURI(data));
           }
           });
}

</script>

</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p><div id="content">Hello</div>
</p>
<input type="text" name="name" id="name" />
<p>
<input type="button" name="submmit" id="submmit" value="提交" onclick="TestClick()" />
</p>
</form>
</body>
</html>

PHP程序代码:

<?php
echo "这是PHP返回信息!".$_POST['name'];
?>

转载于:https://www.cnblogs.com/GarfieldTom/archive/2009/06/09/1499610.html