MVC TIP3:JQuery通过Ajax提交表单并返回结果

简介: 在开始介绍使用JQuery提交表单之前,先看一下非Ajax提交表单的形式,如下: 1:非Ajax 前台: 对应后台: 2:JQuery之Ajax 在介绍使用JQuery提交表单前,我们需要首先引用jquery.form.js,它来自于http://www.malsup.com/jquery/form/,至此,我们需要引用的JS文件有: 功能要求:Ajax提交表单,在控制器HelloWorld4Controller中处理请求,并返回若干数据,数据格式为JSON。

在开始介绍使用JQuery提交表单之前,先看一下非Ajax提交表单的形式,如下:

1:非Ajax

前台:

image

对应后台:

image

2:JQuery之Ajax

在介绍使用JQuery提交表单前,我们需要首先引用jquery.form.js,它来自于http://www.malsup.com/jquery/form/,至此,我们需要引用的JS文件有:

image

功能要求:Ajax提交表单,在控制器HelloWorld4Controller中处理请求,并返回若干数据,数据格式为JSON。

首先,我们假设返回的JSON实体为:

        public class LoginResultDTO
        {
            public bool Success { get; set; }
            public string Message { get; set; }
            public string ReturnUrl { get; set; }
        } 

控制器部分的代码为:

    public class HelloWorld4Controller : Controller
    {
        public ActionResult Index()
        {
            if (Request.IsAjaxRequest())
            {
                string str1 = Request.Form["Text33"];
                string str2 = Request.Form["Text44"];
                return Json(new MvcApplication5.Controllers.HelloWorld3Controller.LoginResultDTO { Success = true, Message = str1 + str2, ReturnUrl = "SomeUrl" });
            }
            else
            {
                return View();
            }
        }
    }

上面的代码告诉我们,如果我们想要返回别的实体,也是很方便的的。

前台部分代码:

image

如果按钮不使用submit,而是button,则上图代码换成如下形式:

image

源码下载:MvcApplication5.zip

Creative Commons License本文基于 Creative Commons Attribution 2.5 China Mainland License发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 http://www.cnblogs.com/luminji(包含链接)。如您有任何疑问或者授权方面的协商,请给我留言。
目录
相关文章
N..
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
137 1
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
190 0
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
126 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
12月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
503 1
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
109 1
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
77 1
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
687 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
125 5
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
106 0