jQuery AJAX

来源：互联网发布：口罩专卖店淘宝编辑：程序博客网时间：2024/06/11 21:48

原始的javascript 的 ajax使用过程：
初始化→发送请求→等待服务器响应→接收响应。
　1.创建XMLHTTPRequest对象
　2.使用open()方法设置和服务器端交互的相应参数，包括发送HTTP请求的方式(get orpost) ，请求的URL，是否异步方式交互
　3.使用send()方法发送HTTP请求
　4.使用onreadystatechange事件监听服务端反馈，根据readyState属性判断和服务器端的交互是否完成，还要根据status属性判断服务器是否正确返回了数据，完成后接受服务器端返回的数据。

jQuery AJAX方法

$(selector).load(URL,data,callback);
//（把请求远程数据加载到被选的元素中）

说明：
　　 selector：存放返回的数据的元素，示例中的<div id="message"></div>
　　load的三个参数：
　　　URL(必须的)：这个不用说都知道，请求的URL地址；
　　　data(可选的)：发送至服务器的key/value 数据；
　　　callback(可选的)：请求完成后想要执行的函数（不管请求成功或者失败）。

<!DOCTYPE html><html>    <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <script type="text/javascript" src="jquery.js"></script>        <script type="text/javascript">            $(document).ready(function(){                $("#btn").click(function(){                //从文本框中获取内容                var userName = document.getElementById("UserName").value;                //load()方法从服务器加载数据，并把返回的数据放入被选元素中。                //GET方式                $('#message').load("AJAX?name=" + userName);                //POST方式                //$('#message').load("AJAX?name=" + userName,{"Content-type":"application/x-www-form-urlencoded"});                });              });        </script>    </head>    <body>        <input type="text" id="UserName" value="admin"/>        <input type="button" id="btn" value="校验用户名"/>        <br/>        <div id="message"></div>    </body></html>

$.load()是jQuery中最简单的AJAX方法，其它的jQuery AJAX方法：

$(selector).load(url,data,callback)把远程数据加载到被选的元素中$.ajax(options)把远程数据加载到XMLHttpRequest 对象中$.get(url,data,callback,type)
$.post(url,data,callback,type)使用HTTP GET 来加载远程数据$.getJSON(url,data,callback)使用HTTP GET 来加载远程 JSON 数据$.getScript(url,callback)加载并执行远程的JavaScript 文件

ajax 用 post 提交表单时，可以jq 中的serialize() 来收集表单信息。如下：

//ajax提交评论表单，利用$('#comment_form').serialize()收集表单信息$('#comment_btn').click(function(){$.ajax({type:"POST",url:"__CONTROLLER__/ajaxComment",data:$('#comment_form').serialize(),dataTpe:"json",success:function(data){if(data.ok == 1){$('input[name=yx]').val('');$('#content').val('');cur_page = 0;getComment(1);}else{alert(data.error);}}});});

0 0