`

jq ajax

阅读更多

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

 

1:绑定事件调用ajax

 

Js代码  收藏代码
  1. $(document).ready(function() {  
  2.             $('#example').dataTable();  
  3.             $('#channelBandwidth').click( function() {  
  4.                 $.ajax({  
  5.                                          ContentType:'application/x-www-form-urlencoded',                    type:'get',//可选get  
  6.                       url:'${projectPath}/test',  
  7.                       data:'data=3',//传给PHP的数据,多个参数用&连接  
  8.                       dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等  
  9.                       success:function(msg){  
  10.                       alert(msg);  
  11.                       },  
  12.                       error:function(){  
  13.                       alert('error');  
  14.                       }  
  15.             })})  
  16.         });  

2:后台使用spring mvc传值

Java代码  收藏代码
  1. @RequestMapping("/test")  
  2. public String gettset(HttpServletRequest request,    
  3.         HttpServletResponse response) throws Exception {    
  4.     response.setContentType("text/plain" + ";charset=UTF-8");  
  5.     response.setHeader("Pragma""No-cache");  
  6.     response.setHeader("Cache-Control""no-cache");  
  7.     response.setDateHeader("Expires"0);  
  8.     response.getWriter().write("aaa");  
  9.     response.getWriter().flush();  
  10.     return null;    
  11. }    

 如果要传多个数据可用json

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

 

使用其它格式返回(@ResponseBody 直接返回body)

Java代码  收藏代码
  1. @RequestMapping("/update")  
  2. public @ResponseBody  
  3. Map<String, String> updateBandwidth(@ModelAttribute SearchBean searchBean) {  
  4.     Map<String, String> map = new HashMap<String, String>();  
  5.     try {  
  6.         bandwidthService.upBandwidth(searchBean);  
  7.         String jo = bandwidthService.getBandwidth(searchBean);  
  8.         map.put("status""ok");  
  9.         map.put("msg", jo);  
  10.     } catch (UpdateDataBasesException e) {  
  11.         logger.error(e.getMessage());  
  12.         map.put("status""no");  
  13.         map.put("msg""更新数据失败,请到操作记录页重新操作");  
  14.     }  
  15.     return map;  
  16. }  

 前台页面ajax使   dataType:‘json’

 

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

前台

Js代码  收藏代码
  1. function submit_alarmmessage(){  
  2.     var alarmmessage_list=new Array();   
  3.     if($('#sms').attr("checked")=="checked"){  
  4.         var tempObj=new Object();  
  5.         tempObj.id=$('#sms_id').val();  
  6.         tempObj.cc='';  
  7.         tempObj.received=$('#smsaddress').val();  
  8.         tempObj.enable='1';  
  9.         tempObj.message_type='SMS';  
  10.         alarmmessage_list.push(tempObj);  
  11.     }     
  12.     if($('#email').attr("checked")=="checked"){  
  13.         var tempObj=new Object();  
  14.         tempObj.id=$('#email_id').val();  
  15.         tempObj.received=$('#emailaddress').val();  
  16.         tempObj.cc=$('#emailcc').val();  
  17.         tempObj.enable='1';  
  18.         tempObj.message_type='EMAIL';  
  19.         alarmmessage_list.push(tempObj);  
  20.     }      
  21.     $.ajax({     
  22.         type:'post',//可选get     
  23.         url:'${projectPath}/alarmsystemalarmmesupdate',  
  24.         data:$.toJSON(alarmmessage_list),  
  25.       contentType: "application/json; charset=utf-8",  
  26.         dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等     
  27.         success:function(msg){     
  28.               },     
  29.         error:function(XMLHttpRequest, textStatus, errorThrown){    
  30.               }  
  31. })  
  32. }  

 数组格式

[{"id":"6","cc":"","received":"1881","enable":"1","message_type":"SMS"},{"id":"3","received":"dongling.zhang@q.com","cc":"1111@126.com","enable":"1","message_type":"EMAIL"}]

 

后台接收

Java代码  收藏代码
  1. @RequestMapping("/alarmsystemalarmmesupdate")  
  2.     public @ResponseBody  
  3.     String updateAlarmMessage(@RequestBody List<Map> alarmmessage_list) {  
  4.         return null;      
  5.     }  

 参考:

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

分享到:
评论

相关推荐

    jq ajax提交表单

    完整的jq ajax提交表单,奖解压后jq文档加入页面中,调用就可惟了。 表单结构 &lt;form id="myForm" action="comment.php" method="post"&gt; Name: &lt;input type="text" name="name" /&gt; Comment: &lt;...

    jQ AJAX文件上传.zip

    在"jQ AJAX文件上传.zip"中,"jiaoben18163"可能是指具体的示例代码或模板文件,它可能包含以下组件: 1. HTML:HTML表单用于让用户选择文件。通常,它会有一个`&lt;input type="file"&gt;`元素,用户可以通过这个元素...

    JQ asp.net ajax 用户注册

    本项目“JQ asp.net ajax 用户注册”旨在实现一个简单的用户注册流程,利用jQuery(简称JQ)与ASP.NET AJAX技术,提供前端交互体验和后端数据处理。以下将详细介绍该系统的核心知识点: 1. **jQuery (JQ) 介绍**: ...

    基于Jq ajax无刷新,图片上传

    "基于Jq的ajax无刷新图片上传"就是一种实现这一目标的技术方法。本文将详细介绍如何使用jQuery(Jq)库结合Ajax技术,实现在不刷新页面的情况下完成图片上传功能。 首先,我们需要了解jQuery(Jq)和Ajax的基本概念...

    jquery+ajax例子

    在IT行业中,jQuery和Ajax是两个非常重要的技术,它们在构建动态、交互性强的Web应用程序时发挥着关键作用。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。Ajax...

    JQ+ajax实现异步调用

    本话题主要聚焦于使用jQuery(简称JQ)库结合Ajax技术来实现异步调用的过程。下面将详细阐述这一主题。 ### jQuery和Ajax简介 **jQuery** 是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及...

    ServletJqAjax

    在描述中提到的"jqAjax",指的是使用jQuery的AJAX功能。 AJAX的核心是XMLHttpRequest对象,它允许在后台与服务器进行通信,而不会中断用户的界面交互。通过使用jQuery的`.ajax()`方法,我们可以设置请求的URL、类型...

    Ajax JQ 滚动加载页面

    Ajax(Asynchronous JavaScript and XML)和jQuery(JQ)结合的滚动加载页面技术,是现代网页开发中的一个重要实践,尤其在大数据量、高交互性的网站中广泛应用。这种技术通过监听用户的滚动行为,当页面接近底部时...

    通过实例解析jQ Ajax操作相关原理

    什么是AJAX AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 它不是一门编程语言,而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。 对于...

    jQ AJAX文件上传表单 jQuery AJAX文件上传表单代码下载.zip

    在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于创建动态和交互式的用户界面。AJAX允许页面在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容,极大地提升了用户体验。本教程...

    AJAXCache是一款jQuery缓存插件可以为ajax方法扩展缓存功能

    AJAXCache是一款针对jQuery库设计的插件,其主要功能是为$.ajax()方法提供缓存支持。在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现页面的部分更新,提高用户体验,而缓存机制则进一步...

    ajax的js,jq jsonp,的请求方式

    **Ajax技术** Ajax,全称为Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它的核心在于利用JavaScript创建XMLHttpRequest对象,通过这个...

    Ajax+JQuery应用Demo

    工作之余写的一些Ajax应用,有6个Demo,数据库为mysql,使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。

    html静态页JQuery ajax示例demo 源码

    例如,可以创建一个名为`AjaxService.asmx`的服务,其中包含处理AJAX调用的方法。这些方法通常返回JSON或XML格式的数据,以便于前端解析和展示。 在描述中提到的VS2010(Visual Studio 2010)是一个集成开发环境,...

    jQuery-ajax-用户名异步请求

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...

    Asp.Net WebApi 上传文件方法(原生js上传和JQ ajax上传)

    本教程将探讨两种不同的客户端上传方式:原生JavaScript和jQuery AJAX。这两种方法都可以与Asp.Net WebApi结合,实现用户友好的文件上传功能。 首先,我们要理解Asp.Net WebApi的核心概念。WebApi是一个用于构建...

    一个完整的jquery+ajax传送请求的实例

    在IT行业中,jQuery和AJAX是两个非常关键的前端技术,它们极大地简化了网页与服务器之间的数据交互。本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据...

    JQuery+ajax实现批量上传图片

    在本文中,我们将深入探讨如何使用JQuery和Ajax技术实现批量上传图片的功能。批量上传图片是一种常见的用户交互需求,尤其在社交媒体、博客平台或者在线商店等网站中非常常见。通过结合JQuery的便利性和Ajax的异步...

    设备缺陷管理 三层架构 DIV+CSS+AJAX+JQuery

    而DIV+CSS+AJAX+JQuery的组合则是现代Web应用开发的常用技术栈,它们共同为设备缺陷管理系统提供用户友好的界面和高效的数据交互。 1. 三层架构: - **表现层(Presentation Layer)**:负责用户界面的展示,通常...

    为jquery的ajax请求添加超时timeout时间的操作方法

    在现代Web开发中,使用jQuery进行Ajax请求是一种常见的操作。jQuery作为一个广泛使用的JavaScript库,简化了从客户端到服务器的数据交互,而Ajax超时的设置则是保证请求响应时效性的重要手段。当客户端向服务器发送...

Global site tag (gtag.js) - Google Analytics