用jQuery实现Ajax

首先建立一个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/p/1499610.html