| ajax

【ajax】请求服务器+参数双向传递

Ajax可以对服务器发送异步请求，从而在不刷新整个页面的情况下局部刷新页面。

1. GET方式

$(document).ready(function(){

    $("#btnsub").click(function(){
        var xmlhttp,cardId,date;
        cardId=$("#cardId").val();
        date=$("#date").val();

        var str="cardId="+cardId+"&date="+date;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","ajax!findRecord.action?"+str,true);
        xmlhttp.send();

    });
});

通过在请求的URL”？”后加参数而达到传参的目的。
对于URL尾部的参数，后台action中只要通过request域对象即可取值。

HttpServletRequest request=ServletActionContext.getRequest();
HttpServletResponse response=ServletActionContext.getResponse();

response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");

Integer cardId=Integer.parseInt(request.getParameter("cardId"));
String date=request.getParameter("date");

struts2里配置为:

<package name="actionA" extends="json-default">
    <global-allowed-methods>regex:.*</global-allowed-methods>
    <action name="ajax!*" class="ajaxAction" method="{1}">
        <result type="json"></result>
    </action>
</package>

2. —- POST方式
 post请求方式相对于get请求方式更加安全（数据信息不会显示在URL中），发送请求能提交的数据也更大。

$(document).ready(function(){

    $("#btnsub").click(function(){
        var xmlhttp,cardId,date;
        cardId=$("#cardId").val();
        date=$("#date").val();

        var str="cardId="+cardId+"&date="+date;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("POST","ajax!findRecord.action",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");
        xmlhttp.send(str);
    });
});

后台action内获取ajax发送来的数据参数方式同上。

Ajax-ajax()

它是最底层、功能最强大的请求服务器数据方式，它的调用格式为：

$.ajax([settings]);

接下来是实际使用:

$(document).ready(function(){
    function doappend(list){
        var tbody="";
        for(i in list){
            tbody+="<tr><td>"+list[i].userId+"</td><td>"+list[i].userName+"</td><td>"+list[i].email+"</td><td>"+list[i].password+"</td><td>"+list[i].cards+"</td><td><a href=\"#\">修改</a>&nbsp;&nbsp;<a href=\"#\">删除</a></td></tr>";
        }
         document.getElementById("divtable").innerHTML=tbody;
    };

    $("#btnSend").click(function(){
        $(this).attr("disabled",true);
        var pag=document.getElementById("thepage").innerText;
        $.ajax({
            type:"POST",
            url:"ajax!findall.action",
            data:{"page":pag},
            dataType:"json",
            success:function(data){
                var a=eval('('+data+')');
                var am=a.aMap;
                var list=am.user;
                doappend(list);

            }
        });
    });

});

data:标签对应为发送给服务器后台的数据，必须要使用json格式｛”name”:name,”id”:id｝。type对应请求方式，url为请求的定位，dataType为服务器返回数据的类型，success为成功获取服务器返回数据后可以执行的操作（这里我正在做分页，把页数发送给服务器，服务器查询数据库后返回相应条数的数据）。
function里的data为服务器返回的数据，这里是一个hashmap类型，先对data用eval方法进行json格式解析，aMap为当时hashmap设置的name值，在hashmap格式里，key值为‘user’对应的对象，为一个list类型，具体可以看下面的后台代码，然后执行doappend方法，将数据一条一条加入到表格格式里。

private String page;

HashMap<String, Object> aMap=new HashMap<String,Object>();

public HashMap<String, Object> getaMap() {
    return aMap;
}

public String getPage() {
    return page;
}

public void setPage(String page) {
    this.page = page;
}

public String findall() {
    int c=userService.count();
    int d;
    if(0==c%5) {
        d=c/5;
    }else {
        d=(c/5)+1;
    }
    aMap.clear();
    int p=Integer.parseInt(page);
    if(p<1||p>d) {
        return NONE;
    }else {
        int begin=(p-1)*5;
        List<User> pList=userService.findPage(begin, 5);
        List<UserForAjax> uList=new ArrayList<UserForAjax>();
        for (User user : pList) {
            StringBuffer sv=new StringBuffer("");
            for(BankCard bCard:user.getSetBank()) {
                sv.append(bCard.getCardId()+" ");
            }
            String str=sv.toString();
            UserForAjax userForAjax=new UserForAjax();
            userForAjax.setUserId(user.getUserId());
            userForAjax.setEmail(user.getEmail());
            userForAjax.setPassword(user.getPassword());
            userForAjax.setUserName(user.getUserName());
            userForAjax.setCards(str);
            uList.add(userForAjax);
        }
        aMap.put("user", uList);
        aMap.put("result", "success");
        return SUCCESS;
    }
}

后台代码中，通过命名一个叫做page的string对象，并生成set和get方法，接收请求后，就能直接得到请求数据中的page对象的值（会调用set方法给this.page赋值），另外创建一个hashmap对象用来存放返回给前端的数据，并生成get方法，这样ajax那边才能得到返回的aMap，在方法中给aMap存入需要传递的值。

一个简单的分页就做好啦!

ESC