`

jQuery ajax和spring mvc

 
阅读更多

jQuery ajax和spring mvc

jsp部分:
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#button_login").mousedown(function(){
      var username=$("#username").val();
      var password=$("#password").val();
      var account=$("#account").val();
      $.ajax( {
        //提交数据的类型,get或post,最好使用post方法,post方法不会返回乱码,

        //get方法返回乱码,需要做额外的配置
        type : "POST",
        //提交的网址,服务器地址
        url : "json.do",
        //提交的数据,传递到服务器上的参数,以键值对的形式出现,用中括号括起来
        data:{
          "username":username,
          "password":password,
          "account":account    
       },
        //从服务器端返回来的数据格式,"html",//"xml", "html", "script", "json", "jsonp", "text".
        dataType:"json",

        //设置请求响应超时时间30ms

        timeout:30000,
        //请求提交成功,返回之后调用的函数
        success : function(msg) {
          alert(msg.name+","+msg.staffName);
        }
        //请求出错执行的函数
        //error: function(msg){
          //alert("erro:"+msg);
        //}
        //所有操作都执行后,最后执行的函数
        //complete: function(XMLHttpRequest, textStatus){
          //alert(XMLHttpRequest.responseText);
          //alert(textStatus);
          //HideLoading();
        //}   
      });
    });
  });
</script>


<body> 
  <form>
    <p><span>输入姓名:</span><input type="text" name="username" id="username" /></p>
    <p><span>输入密码:</span><input type="text" name="password" id="password" /></p>
    <p><span>输入账号:</span><input type="text" name="account" id="account" /></p>
  </form>
  <button id="button_login">ajax提交</button> 
</body>

 

spring mvc部分:
@Controller
public class JSONController {
  @RequestMapping(value="/json", method = RequestMethod.POST)
  @ResponseBody
  public Shop getShopInJSON(
    HttpServletRequest request,
    HttpServletResponse response,
    @RequestParam String username,
    @RequestParam String password,
    @RequestParam String account) throws Exception{
  
    //测试数据
    Shop shop = new Shop();
    shop.setName(username);
    shop.setStaffName(new String[]{password, account});
  
    return shop;
  } 
}

分享到:
评论

相关推荐

    spring-mvc-jquery.zip_jquery_mvc jquery_spring jquery_spring mvc

    在IT行业中,Spring MVC和jQuery是两个非常重要的技术框架,它们在Web开发中扮演着关键角色。本项目“spring-mvc-jquery.zip”是关于如何将Spring MVC 3.0框架与jQuery进行整合的一个示例,旨在帮助开发者理解这两者...

    spring3 mvc 用 jquery ajax 交互

    在IT行业中,Spring MVC和jQuery AJAX是两种广泛使用的技术,它们在构建现代Web应用程序时起着关键作用。本文将深入探讨如何在Spring MVC框架中利用jQuery的AJAX功能进行前后端交互,提升用户体验。 首先,Spring ...

    Spring MVC跟jQuery和Twitter Bootstrap的结合

    3. **数据绑定**:Spring MVC支持JSON或XML格式的数据交换,jQuery可以通过Ajax请求发送和接收这些格式的数据。使用`@RequestBody`和`@ResponseBody`注解,Spring MVC可以将JSON数据自动映射到Java对象。 4. **表单...

    jQuery Spring MVC

    在Web开发领域,jQuery 和 Spring MVC 分别是JavaScript库与后端MVC框架的代表。将两者结合使用,可以构建出高效、响应式的前端界面,同时利用Spring MVC的强大功能处理后端业务逻辑。本文将深入探讨如何将jQuery与...

    spring mvc json&&jackson jquery js

    在Spring MVC应用中,前端页面通常使用JavaScript和jQuery来处理用户交互和动态更新内容。通过AJAX,前端可以异步地向服务器发送请求,获取JSON数据,然后使用jQuery处理并更新DOM。例如,`$.ajax`或`$.getJSON`方法...

    spring与jquery ajax交互 和 servlet与jquery ajax交互

    Spring作为一个全面的Java企业级应用框架,提供了强大的MVC(Model-View-Controller)架构支持,而jQuery则简化了JavaScript的DOM操作和AJAX通信。本文将深入探讨Spring与jQuery AJAX交互以及Servlet与jQuery AJAX...

    spring mvc+ajax

    在Spring MVC中集成Ajax,通常会在前端使用JavaScript库如jQuery来发送Ajax请求。例如,我们可以创建一个AJAX函数,通过`$.ajax()`或`$.getJSON()`等方法向后台发送异步请求。这些请求通常带有特定的URL和参数,对应...

    Spring + Hibernate + Spring mvc +Ajax 整合

    这个项目可能是为了演示如何在一个简单的添加删除操作中使用这些技术,通过整合Spring、Hibernate、Spring MVC和Ajax,实现一个高效、用户友好的后台管理系统。开发者可以通过学习这个示例,掌握如何在实际项目中...

    Spring3MVC和jQuery的集成

    Spring3 MVC和jQuery是两种非常重要的Web开发技术。Spring3 MVC是Spring框架的一部分,用于构建后端MVC架构的应用程序,而jQuery则是一种强大的JavaScript库,简化了前端的DOM操作、事件处理和Ajax交互。本篇文章将...

    spring mvc 整合包

    15. **AJAX集成**:Spring MVC与jQuery、AngularJS等前端库配合,可以实现异步数据交互。 这个"spring mvc 整合包"可能包含了Spring MVC的jar文件、配置示例、启动脚本或者示例代码,帮助开发者快速启动基于Spring ...

    Spring MVC Cookbook(PACKT,2016).pdf

    11. **Ajax集成**:与JavaScript库(如jQuery)集成,实现异步请求和更新页面部分内容。 12. **模板引擎**:使用Thymeleaf或其他模板引擎动态生成HTML,提高代码的可读性和维护性。 13. **测试Spring MVC应用**:...

    Spring MVC 2.5 + JQuery HelloWorld Sample

    在Web开发中,Spring MVC作为Java领域广泛使用的MVC框架,提供了强大的控制层支持,而JQuery则是一款高效、简洁的JavaScript库,简化了前端DOM操作和AJAX交互。本示例将详细介绍如何在Spring MVC 2.5项目中结合...

    Spring MVC不能直接接收list类型参数的问题

    ### Spring MVC 无法直接接收 List 类型参数的问题详解 #### 问题背景 在 Web 开发过程中,前后端数据交互是必不可少的一部分。对于基于 Java 的 Spring MVC 框架而言,处理这种交互通常需要理解如何正确地接收前端...

    ajaxupload在spring mvc4.2中实现简单文件上传

    在Spring MVC 4.2框架中实现AjaxUpload(异步文件上传)是一个常见的需求,它允许用户在不刷新整个页面的情况下进行文件...这个过程需要对Spring MVC和前端交互有深入的理解。希望上述信息能帮助你理解和实现这一功能。

    mvc-ajax.rar_spring mvc

    通过理解这个示例,开发者可以学习如何在Spring MVC项目中整合Ajax,以提高Web应用的交互性和效率。同时,这也展示了如何利用现代Web技术提升用户体验,使得用户在提交表单时无需等待页面刷新,从而提升整体应用的...

    人事管理系统(注解 Mybatis+Spring+Spring MVC框架整合AJAX+JQuery实现登录、注册以及验证码和验证注册用户信息,包括数据库备份)

    三期答辩课程设计,人事管理系统Mybatis+Spring+Spring MVC框架整合AJAX+JQuery实现登录、注册以及验证码和验证注册用户信息,包括数据库备份,课设说明,答辩PPT,Windows下sts(eclipse) 。

    springmvc利用jquery实现ajax的例子

    以上就是使用Spring MVC和jQuery实现Ajax的基本步骤。在实际开发中,你可能还需要处理更多细节,如错误处理、数据验证、页面局部刷新等。通过这种方式,你可以构建出更加动态、响应式的Web应用。

    spring框架项目+jQueryAjax提交实例。jquery-3.3.1.min.js

    标题中的"spring框架项目+jQueryAjax提交实例"指的是一个整合了Spring框架和jQuery AJAX技术的Web应用程序项目。这个项目提供了一个完整的流程,演示了如何在前端使用jQuery的AJAX功能向后端Spring MVC控制器发送...

    spring mvc文件上传实现进度条

    这个场景通常涉及到前端的JavaScript或jQuery库(如jQuery File Upload)与后端的Spring MVC控制器之间的交互,以及可能的多线程处理来跟踪文件上传的进度。接下来,我们将深入探讨如何在Spring MVC中实现这一功能。...

    ajax向springmvc传递json

    在实际开发中,我们经常需要通过Ajax向Spring MVC控制器发送JSON数据,以实现异步通信和数据交互。下面将详细阐述这一过程中的关键知识点。 1. JSON 数据格式:JSON(JavaScript Object Notation)是一种轻量级的...

Global site tag (gtag.js) - Google Analytics