使用jquery的get,ajax,post三种方式实现ajax效果

01、使用get和post方式实现ajax效果:

使用get方式和使用post方式实现ajax效果,在实现方式上区别不是很大。引用jquery库,然后调用$.get(url,data,success,dataType)方法或$.post(url,data,success,dataType)方法就可以实现ajax无刷新的页面。这两种方式都可以获取服务器端的数据。只是数据的发送方式上会有区别。当然在页面js脚本上基本差别不大:

先看一下get方式实现:

    <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                $.get("LabTest.aspx",
                 {
                     action: "Action",
                     name: "成吉思汗!",
                     age: "90",
                     content: "蒙古族"
                 }, function (data, status) {
                     $(".div").append("数据:" + "<br/>" + data + "<br/>");
                     $(".div").append("状态:" + status + "<br/>");
                 },
                    "text");
            });
        })
    </script>
    <input type="button" id="btnGet" value="getType" />
    <div class="div">
    </div>

 下端代码使用了一个button来触发get方法。用div来呈现输出的文本,其中dataType参数可以是text,html,json,xml等类型。这里使用text显示文本信息。当然也可以传送过来一段json字符串。使用js来解析这段字符生成匿名对象就可以很好的操作它了。

  详细讲解下这里的参数:“LabTest.aspx”,这个参数对应方法中的url对应请求的页面。

                  {
                     action: "Action",
                     name: "成吉思汗!",
                     age: "90",
                     content: "蒙古族"
                 }

这一段是第二个参数data:表示要传送到服务器端的数据。

第三个参数是一个function方法:来实现接受成功后的操作。其中data是服务器端发送过来的数据;status是发送的状态:成功-success。

第四个参数是发送过来数据格式。一般都会省略

  点击button触发click事件就可以用get方式来实现ajax效果。

post方式发送只是将这里的get方法换成post而已,实现方式上大同小异。

02、使用ajax方式实现无刷新

 

posted @ 2013-08-25 11:17  for.life  阅读(639)  评论(0编辑  收藏  举报