jq ajax

阅读更多

注意：如果ajax请求时参数中有中文，哪么get会出现乱码，使用post可解决

 

1：绑定事件调用ajax

 

$(document).ready(function() {
            $('#example').dataTable();
            $('#channelBandwidth').click( function() {
                $.ajax({
                                         ContentType:'application/x-www-form-urlencoded',                  　　type:'get',//可选get
                    　　url:'${projectPath}/test',
                    　　data:'data=3',//传给PHP的数据，多个参数用&连接
                    　　dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等
                    　　success:function(msg){
                    　　alert(msg);
                    　　},
                    　　error:function(){
                    　　alert('error');
                    　　}
            })})
        });

2：后台使用spring mvc传值

@RequestMapping("/test")
public String gettset(HttpServletRequest request,
        HttpServletResponse response) throws Exception {
    response.setContentType("text/plain" + ";charset=UTF-8");
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);
    response.getWriter().write("aaa");
    response.getWriter().flush();
    return null;
}

 如果要传多个数据可用json

data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},

 

使用其它格式返回（@ResponseBody 直接返回body）

@RequestMapping("/update")
public @ResponseBody
Map updateBandwidth(@ModelAttribute SearchBean searchBean) {
    Map map = new HashMap();
    try {
        bandwidthService.upBandwidth(searchBean);
        String jo = bandwidthService.getBandwidth(searchBean);
        map.put("status", "ok");
        map.put("msg", jo);
    } catch (UpdateDataBasesException e) {
        logger.error(e.getMessage());
        map.put("status", "no");
        map.put("msg", "更新数据失败，请到操作记录页重新操作");
    }
    return map;
}

 前台页面ajax使   dataType:‘json’

 

3:spring mvc 前台ajax传值给后台，前台传值为数组，数组中为对象

前台

function submit_alarmmessage(){
    var alarmmessage_list=new Array();
    if($('#sms').attr("checked")=="checked"){
        var tempObj=new Object();
        tempObj.id=$('#sms_id').val();
        tempObj.cc='';
        tempObj.received=$('#smsaddress').val();
        tempObj.enable='1';
        tempObj.message_type='SMS';
        alarmmessage_list.push(tempObj);
    }
    if($('#email').attr("checked")=="checked"){
        var tempObj=new Object();
        tempObj.id=$('#email_id').val();
        tempObj.received=$('#emailaddress').val();
        tempObj.cc=$('#emailcc').val();
        tempObj.enable='1';
        tempObj.message_type='EMAIL';
        alarmmessage_list.push(tempObj);
    }
    $.ajax({
      　　type:'post',//可选get
      　　url:'${projectPath}/alarmsystemalarmmesupdate',
      　　data:$.toJSON(alarmmessage_list),
      contentType: "application/json; charset=utf-8",
      　　dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等
      　　success:function(msg){
              },
      　　error:function(XMLHttpRequest, textStatus, errorThrown){
              }
})
}

 数组格式

[{"id":"6","cc":"","received":"1881","enable":"1","message_type":"SMS"},{"id":"3","received":"[email protected]","cc":"[email protected]","enable":"1","message_type":"EMAIL"}]

 

后台接收

@RequestMapping("/alarmsystemalarmmesupdate")
    public @ResponseBody
    String updateAlarmMessage(@RequestBody List alarmmessage_list) {
        return null;
    }

 参考：

http://bbs.csdn.net/topics/390123483

http://what-is-javascript.iteye.com/blog/1735691

http://ljhzzyx.blog.163.com/blog/static/383803122013115114544562/

http://blog.csdn.net/c5906343/article/details/26482975

 

 

本文转载直：http://692088846.iteye.com/blog/1997779