jquery的ajax案例,JQuery与ajax的应用实例

1.先在页面定义输入框，输入框调用onkeyup事件，在键盘松开时触发

<inputtype="text"id="ATMName"name="ATMName"οnkeyup="showHint(this.value)"/>

2.在js中定义调用的方法，注意这里由于要用到JQuery，所以要引入JQuery的js文件

functionshowHint(str){

//最开始时要定义一个全局变量var namelength=0;

varvalue=document.getElementByIdx_x("ATMName").value;

if(str.length==namelength)

return;

else{

$("#divPop")[0].style.display="block";

if(str.length>namelength)

namelength++;//如果录入了数据，namelength增加

else

namelength--;//如果删除了数据，namelength减少

if(str.length==0)//如果清空了录入的数据，显示的内容也清空

{

$("#divPop")[0].style.display="none";

$("#divPop")[0].innerHTML="";

//$("#divPop")[0].innerHTML=""; //此处不能用$("#divPop").innerHTML，因为innerHTML是DOM属性，不是JQuery属性

//document.getElementByIdx_x("divPop").innerHTML="";

}

//判断是否输入的是中文

varreg = /^[\u4E00-\u9FA5]+$/;

varyesorno = reg.test(str);

if(yesorno)

{

//使用高级的get和post无法指定contenttype，会出现上送的中文乱码的问题

//使用最基础的ajax方法，指定上送contenttype为UTF-8，防止中文乱码,这里type不能用GET，要用POST，因为参数不是放在URL后

$.ajax({

type:"POST",

url:"ATMListQry.do",

datatype:"html",

data: {

"ATMName":value

},

contentType:"application/x-www-form-urlencoded; charset=UTF-8",

success:function(data){

//将发送交易查询回来的结果放在要显示的div中

document.getElementByIdx_x("divPop").innerHTML=data;

//这里是添加鼠标放在哪行，哪行突出显示的效果

$("#divPop #showList tr").hover(function() {

$(this).addClass("blue");

},function() {

$(this).removeClass("blue");

});

$("#divPop #showList tr").click(function(){

//点击后，获取所点击那行的值

varvalue=$("#divPop #showList tr").find("input").attr("value");

vararray=newArray(newPair("ATMId",value));

//调用框架发交易

postData2SRV("ATMDetailQry.do",PEGetPostData(array),"EEE");

});

},

error :function(XMLHttpRequest, textStatus, errorThrown){

alert(textStatus); }

});

}

else

returnfalse;

}

}

3.输入数据时，所调用的交易，这里根据每个框架不同，应有所不同，这里以PE为例：(可以直接返回jsp页面，不用返回stream)

<channeltype="http">

<paramname="success">ATM/Listparam>

channel>

<tablewidth="100%"cellpadding="2"cellspacing="0">

<tralign="right"valign="middle">

<tdwidth="20%"height="23">td>

<tdalign="left">

<divid="divPop"style="width:300px;height: 300px;overflow:scroll;display:none">

div>

td>

tr>

table>

4.定义jsp页面，其实ajax是支持返回html页面的，但是pe只能返回jsp，所以只能用jsp，ajax貌似也支持jsp，jsp与html本质一样

<tableid="showList">

<tr>

<td>${row.DeptMapName}td>

<td><inputtype="hidden"value="${row.ATMId}"/>td>

tr>

table>

5.定义点击所调用的交易及页面，与查询的没什么不同

不能直接用JQuery来修改innerHTML，如$("#divPop").innerHTML=”xxx”，因为innerHTML是DOM属性，不是JQuery属性，要这样写

$(“#divPop”)[0].innerHTML=”xxx”

其实核心就是第2步的js方法，其中分为几个重要部分：

(1)使用ajax实现边输入边查询，就是不用点击提交按钮才发交易

$.ajax({

type:"POST",

url:"ATMListQry.do",

datatype:"html",

data: {

"ATMName":value

},

contentType:"application/x-www-form-urlencoded; charset=UTF-8",

success:function(data){

//将发送交易查询回来的结果放在要显示的div中

document.getElementByIdx_x("divPop").innerHTML=data;

},

error :function(XMLHttpRequest, textStatus, errorThrown){

alert(textStatus); }

});

(2)使用JQuery的hover方法，突出显示鼠标停留的哪一行

$("#divPop #showList tr").hover(function() {

$(this).addClass("blue");

},function() {

$(this).removeClass("blue");

});

(3)根据点击的哪一行，获取该行对应的值，发送交易，获取数据

//点击后，获取所点击那行的值

varvalue=$("#divPop #showList tr").find("input").attr("value");

vararray=newArray(newPair("ATMId",value));

//调用框架发交易

postData2SRV("ATMDetailQry.do",PEGetPostData(array),"EEE");

列表对应的页面要这样写，将值隐藏的放在页面中，以便获取

<tableid="showList">

<tr>

<td>${row.DeptMapName}td>

<td><inputtype="hidden"value="${row.ATMId}"/>td>

tr>

table>