【jQuery教程】jquery新手入门实例教程三ajax应用

2016-02-22    编辑:jquery     点击(

我们在上一章 jquery新手入门实例教学二 用户注册(简单的表单验证) (/html/JQueryjiaocheng/200807/17-519.html)

里面有一行语句

$.get("php/user_register.php",{act:$(this).attr("ID"),v:$(this).val()},function(txt){
                   msg.html(txt);

})

这个就是jquery ajax应用的简单实例

什么是 ajax

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

 如果你不是很清楚 请参考 http://baike.baidu.com/view/1641.htm 

下面我们来看看jquery 对 ajax的支持吧

首先我们来讲讲 $.get

$.get(url, params, callback)

用GET方式请求装入远程页面

返回值:XMLHttpRequest

参数:

  • url (String): 装入页面的URL地址。
  • params (Map): (可选)发送到服务端的键/值对参数。
  • callback (Function): (可选) 当远程页面装入完成时执行的函数.

实例:
比如文件demo1 html代码如下
<a href="javascript:void(0)">demo</a>
<div ID="show" style="border:solid 1px #FF6600">加在内容:</div>

get.html代码如下
<strong>ajax get 获得内容</strong>

现在我要实现 点击demo 能够把 get.html内容加载到 div里面

<SCRIPT LANGUAGE="JavaScript">
  <!--
   $("document").ready(function(){
      $("a").click(function(){//给div 绑定点击事件
      $.get("get.html",function(data){
            $("#show").html($("#show").html()+"<br>"+data);
   })
   })
   })
  //-->
  </SCRIPT>

如果您需要带参数只需要
$.get("get.html",{参数名称1:"参数1值",参数名称2:"参数2值"},function(data){
$("#show").html(data);
})

$.post(url, params, callback)

用HTTP POST方式装入一个远程页面

返回值:XMLHttpRequest

参数:

  • url (String): 装入页面的URL地址。
  • params (Map): (可选)发送到服务端的键/值对参数。
  • callback (Function): (可选) 当数据装入完成时执行的函数.
关于$.post demo我就不写了和$.get完全一样 只不过一是get方式请求一个是post方式请求