jQuery Ajax 操作函数

最新推荐文章于 2024-07-28 18:21:27 发布

azheng51714

最新推荐文章于 2024-07-28 18:21:27 发布

阅读量707

点赞数

分类专栏： javascript and jQuery

本文链接：https://blog.csdn.net/azheng51714/article/details/37914313

版权

javascript and jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery 参考手册 - Ajax

jQuery Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

参阅

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
  $("#txt").ajaxStart(function(){
    $("#wait").css("display","block");
  });
  $("#txt").ajaxComplete(function(){
    $("#wait").css("display","none");
  });
  $("#chage").click(function(){
    $("#txt").load("/example/jquery/demo_ajax_load.asp");
  });
  $("#text2").ajaxSend(function(e,xhr,opt){
     $(this).html("正在请求"+opt.url);
  });
  $("#change").click(function(){
      $("#text2").load("/example/jquery/demo_ajax_load.asp");
  });
  $("#btnPost").ajaxSuccess(function(){
    alert("AJAX 请求已成功完成");
  });
 $("#btnPost").click(function(){
    $.post("/example/jquery/demo_test_post.asp",
    {
      name:"Hope",
      city:"JiNan"
    },
    function(data,status){
      alert("数据：" + data + "\n状态：" + status);
    });
  });

 $("#btnJson").click(function(){
    $.getJSON("/example/jquery/demo_ajax_json.js",function(result){
      $.each(result, function(i, field){
        $("p").append(field + " ");
      });
    });
  });
});
</script>
</head>

<body>
<div id="text2"><h2>通过 AJAX 改变文本</h2></div>
<button id="change">改变内容</button>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button id="chage">改变内容</button>
<div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
<img src='/i/demo_wait.gif' width="64" height="64" />

<br />加载中 ...
</div>
<br />
<button id="btnPost">问候语言</button>
<br />
<button id="btnJson">访问Json</button>
<p></p>
</body>
</html>