jQuery简单的Ajax调用示例

【转】jQuery简单的Ajax调用示例

jQuery确实方便，下面作个简单的Ajax调用：javascript

创建一个简单的html文件：php

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript"> $(function(){ //按钮单击时执行
 $("#testAjax").click(function(){ //取Ajax返回结果
              //为了简单，这里简单地从文件中读取内容做为返回数据
 htmlobj=$.ajax({url:"/Readme.txt",async:false}); //显示Ajax返回结果
 $("#myDiv").html(htmlobj.responseText); }); }); </script>    
</head>
    <body>
        <div id="myDiv"><h2>经过 AJAX 改变文本</h2></div>
        <button id="testAjax" type="button">Ajax改变内容</button>
    </body>
</html>

好了，点击按钮就能够看到效果了。html

固然，jQuery的Ajax调用能够控制项不少，这里演示了简单的调用。java

注意你本身的jquery引用路径。jquery

好吧，作一个调用后台的例子：ajax

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript"> $(function(){ //按钮单击时执行
 $("#testAjax").click(function(){ //Ajax调用处理
            var html = $.ajax({ type: "POST", url: "test.php", data: "name=garfield&age=18", async: false }).responseText; $("#myDiv").html('<h2>'+html+'</h2>'); }); }); </script>    
</head>
    <body>
        <div id="myDiv"><h2>经过 AJAX 改变文本</h2></div>
        <button id="testAjax" type="button">Ajax改变内容</button>
    </body>
</html>

后台代码：async

<?php $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!'; echo $msg;

如今已经能够从后台来获取数据了!函数

固然，咱们还能够这样来调用Ajax:post

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript"> $(function(){ //按钮单击时执行
 $("#testAjax").click(function(){ //Ajax调用处理
 $.ajax({ type: "POST", url: "test.php", data: "name=garfield&age=18", success: function(data){ $("#myDiv").html('<h2>'+data+'</h2>'); } }); }); }); </script>    
</head>
    <body>
        <div id="myDiv"><h2>经过 AJAX 改变文本</h2></div>
        <button id="testAjax" type="button">Ajax改变内容</button>
    </body>
</html>

注意，ui

success: function(data)

中的data参数能够改成别的名称，好比success: function(msg)，msg（data）为返回的数据。此处为回调函数的参数，而非

data: "name=garfield&age=18"

中的Ajax调用中的data参数。