关于jQuery和AJAX的详解（二）

来源：互联网发布：2016电气设备行业数据编辑：程序博客网时间：2024/06/11 17:13

jQuery实现事件绑定处理的格式为：
- obj.bind(事件类型，事件处理函数)−比如：obj.bind(‘click’,fn);
- 上面简写就是：$obj.click(fn);

这个$obj.click()代表触发了click事件

一般这样写$obj.click(function(e){…}),e就是事件对象。

事件对象的常用属性

获取事件源 var obj=e.target 返回值是DOM对象
比如获取鼠标点击事件 e.pageX e.pageY

jQuery类数组

类数组的操作
- length属性
- each(fn)遍历类数组，fn用来处理DOM对象，在fn中this表示被遍历的那个DOM对象。fn函数可以添加一个参数i用于表示正在被遍历的DOM对象的下标
- eq(index) 将下表等于DOM的对象取出来
- get() 返回一个DOM对象组成的数据
- index(obj) 返回DOM或jQuery对象在类数组中的下表

jQuery遍历操作

使用jQuery的length属性、each()、get()、index()方法对类似数组的元素进行操作。

比如：

<body>    <ul>        <li>item1</li>        <li>item2</li>        </li>item3</li>    </ul>    <input type="button" value="类数组操作" id="b1"/></body>

使用length属性获取个数

$(function(){    $('#b1').click(function(){        var $obj=$('url li');        alert($obj.length);    });});

使用each(fn)遍历

$(function(){    $('#b1').click(function(){        var $obj=$('ul li');        $obj.each(function(i){            if(i==1){                $(this).css('font-size','30px');            }        });    });});

前面我们也用到了AJAX的一些知识，现在可以觉得需要详细分析下，因为jQuery支持的AJAX更简单更方便。
AJAX不是新语言，而是一种使用现有标准的新方法。前面已经使用了AJAX如何向服务器发送数据，其中open和send方法均都展现出了。

open(method,url,async):其中method是请求的类型，post或get，url是文件在服务器上的位置，async标识是同步还是异步，true为异步，false为同步。

send(string):这个仅用于post请求。

post和get有什么区别

于post相比，get使用更简单，速度也是更快，满足于大部分的使用，但是在下面这种情况得使用post请求：
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量的数据(post没有数据量的限制)
- 发送包含未知字符的用户输入时，post比get更稳定也更可靠。

AJAX的服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myid").innerHTML=xmlhttp.responseText;

如果来自服务器的响应为XML，而且作为XML对象需要进行解析，可以使用responseXML属性：

xmlDoc=xmlhttp.responseXMl;txt="";x=xmlDoc.getElementByTagName("ARTIST");for(i=0;i<x.length;i++){    txt=txt+x.childNodes[0].nodeValue+"</br>";}document.getElementById("myid").innerHTML=txt;

AJAX的一般格式

$.ajax({    type:'POST',    url:url,    data:data,    success:success,    dataType:dataType});

url: 必需，规定把请求发送到哪儿URL。
data: 可选，映射或字符串值。规定连同请求发送到服务器的数据。
success(data,textStatus,jqXHR):请求执行时的回调函数。
dataType:可选。规定预期的服务器响应的数据类型，默认执行智能判断(xml,json,script或html)

$.ajax注意的地方

data主要有三种方式，html拼接的，json数组，form表单经serialize()序列化的，通过dataType指定，不指定智能判断。

.ajax只提交form以文本方式，如果异步提交包含<file>上传是传不过去，需要使用jquery.form.js的.ajaxSubmit

ajax实际应用

 //1.$.ajax带json数据的异步请求var aj=$.ajax({    url:'productManager_reverseUpdate',    data:{        'name':'yangjq',        'age':'23',        'job':'programer',        'phone':'1827383732832',    },    type:'post',    cache:false,    dataType:'json',    success:function(data){        if(data.msg=='true'){            alert("修改成功");            window.location.reload();        }else{            view(data.msg);        }    },    error:function(){        alert("异常！");    }});//2.$.ajax序列化表格内容为字符串的异步请求function noTips(){    var formParam=$("#form1").serialize();    $.ajax({        type:'post',        url:'yangjq.web.actioin',        data:formParam,        cache:false,        dataType:'json',        success:function(data){        }    });}//$.ajax拼接data的异步请求$.ajax({    url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',    type:'post',    data:'merName'+value,    async:false//默认为true  异步    error:function(){        alert('error');    }    success:function(data){        $("#"+divs).html(data);     }    //$.ajax拼接url的异步请求    $.ajax({        url:'test_checkPwd?pwd='+pwd,        type:'post',        data:{},        cache:false,        dataType:'json',        success:function(data){            if(data.msg=="false"){                textPwd.html("<font color='red'>密码不正确</font>");                $("#validate_checkpwd").val(pwdError);                checkpwd=false;                return;            }        },        error:function(){}    });

0 0