jQuery简单的Ajax调用示例

时间 2019-11-29

原文原文链接

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:ui

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

注意，url

success: function(data)

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

data: "name=garfield&age=18"

中的Ajax调用中的data参数。