IT虾米网

jQuery简单的Ajax调用示例详解

admin 2018年06月20日 编程语言 509 0

jQuery确实方便,下面做个简单的Ajax调用:

建立一个简单的html文件:

<!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>

好了,点击按钮就可以看到效果了。

当然,jQuery的Ajax调用可以控制项很多,这里演示了简单的调用。

注意你自己的jquery引用路径。

 

好吧,做一个调用后台的例子:

<!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>

后台代码:

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

现在已经可以从后台来获取数据了!

 

当然,我们还可以这样来调用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调用处理 
            $.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>

 

注意,

success: function(data)

中的data参数可以改为别的名称,比如success: function(msg),msg(data)为返回的数据。 此处为回调函数的参数,而非

data: "name=garfield&age=18"

中的Ajax调用中的data参数。

 
发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

关于java.lang.UnsupportedClassVersionError解决方法总结详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。