html文件:
1 <input class="form-control" id="username" name="username" type="text"/>
2 <input class="form-control" id="password" name="password" type="password"/>
3
4 <button type="button" onclick="loginSubmit()">立即登录</button>
----------------------------------------------------------------------------------
jquery代码:
function loginSubmit() {
var username = $("#username").val(); // 获取id为username的<input>框数据
var password = $("#password").val(); // 获取id为password的<input>框数据
// 判断
if (username.length == 0) {
$("#username").tips({msg: "请输入用户名。"});
return;
}
if (password.length == 0) {
$("#password").tips({msg: "请输入密码。"});
return;
}
// Ajax提交数据
$.ajax({
url: "admin/check_login", // 提交到controller的url路径
type: "post", // 提交方式
data: {"username": username, "password": password}, // data为String类型,必须为 Key/Value 格式。
dataType: "json", // 服务器端返回的数据类型
success: function (data) { // 请求成功后的回调函数,其中的参数data为controller返回的map,也就是说,@ResponseBody将返回的map转化为JSON格式的数据,然后通过data这个参数取JSON数据中的值
if (data.message == "success") {
//跳转到系统首页
......
} else {
......
}
},
});
}
分享到:
相关推荐
在"Javascript 表单验证对象控件 + ajax简单验证重复项与ajax提交数据"这个主题中,我们将深入探讨如何利用JavaScript提高用户体验,通过实时验证用户输入的数据,以及如何使用Ajax技术异步验证和提交数据,避免页面...
在这个主题中,我们将深入探讨如何使用Ajax提交数据来更新服务器上的内容。 一、Ajax的工作原理 Ajax的基本流程包括以下几个步骤: 1. 创建XMLHttpRequest对象:这是Ajax的基础,大多数现代浏览器都内置了这个对象...
这是一个JavaWeb中form、ajax提交数据Model转化工具类,可以用来取代Spring的默认数据绑定、JFinal中的getModel方法。原理博客:http://blog.csdn.net/jflex/article/details/46883037
本文将详细探讨两种通过HTML表单结合AJAX提交数据的方式:一是使用`<input type="button">`触发AJACK请求;二是利用`<a>`标签的`onclick`事件来实现。 #### 一、使用`<input type="button">`触发AJAX请求 首先,...
### 一、前端:使用jQuery的AJAX提交表单 1. **引入jQuery库**:首先确保在HTML文件中引入了jQuery库。可以使用CDN链接或本地文件,例如: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js">...
这里的问题是关于如何使用Ajax提交数据到后台的JSP页面,并在处理完数据后进行页面跳转。我们将详细探讨这个问题以及相关的知识点。 首先,我们看`logincheck.jsp`页面中的代码,它接收通过Ajax传递的参数: ```...
本篇文章将深入探讨AJAX在.NET中的应用以及如何实现无刷新提交数据。 首先,我们需要了解AJAX的基本工作原理。它主要依赖于JavaScript的XMLHttpRequest对象来创建一个与服务器的连接,并在后台发送请求。当服务器...
通过上述讲解,我们可以看到,使用AJAX提交数据到后台PHP进行处理的整个过程是相当直观和简单的。但是,这要求开发者既要熟悉JavaScript与jQuery的操作,也要了解PHP等服务器端脚本语言的编程。对于初学者而言,可能...
文章对使用Ajax、JSP(J2EE)、JavaScript、CSS和XML标记的混合运用进行归纳总结,得出一个典型的Ajax提交数据过程,主要内容包括“HttpRe—quest后台通道”、“替换函数”和“参数合成”等处理过程
GET请求通常用于从服务器检索数据,而POST请求则通常用于向服务器提交数据。本文主要关注的是POST请求的实现。 AJAX调用的实现通常包括以下几个步骤: 1. 创建XMLHttpRequest对象。现代浏览器使用`XMLHttpRequest`...
第三阶段是实际通过AJAX提交数据。这一步通过`$.ajax`方法完成,它允许用户指定一个URL来接收数据,并通过POST方法发送。关键的参数包括`processData`和`contentType`,这两个参数都需要设置为`false`,因为我们要...
总结来说,Asp+Ajax提交表单是通过JavaScript的Ajax功能在前端异步提交表单,然后由Asp在服务器端处理数据,最后将处理结果返回给前端,实现无刷新的交互体验。这种技术提高了网页的响应性和用户体验,是现代Web开发...
总结一下,AJAX提交表单的关键在于正确配置请求头,确保数据编码为UTF-8,同时服务器端也需要支持接收并处理UTF-8编码的数据。通过这种方式,我们可以实现异步表单提交,提高用户体验,同时避免了全页刷新带来的不便...
本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。通过这种方式,用户无需等待页面刷新,即可完成操作,提升了交互性。 首先,`jquery.js` 是jQuery库的核心文件...
GET请求用于获取数据,而POST请求则常用于提交数据,如用户输入。 4. **数据格式**:尽管名字中有XML,但现在更常见的是使用JSON(JavaScript Object Notation),因为JSON更轻量级,解析更快,且与JavaScript语法...
首先,我们需要创建一个HTML表单,它包含了用户输入的数据和一个用于触发AJAX提交的按钮。例如: ```html 用户名" required> 邮箱" required> 提交 ``` ### 2. 阻止默认表单提交 为了让AJAX提交生效,我们...
"AJAX小程序"是利用这种技术构建的小型Web应用,它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容,为用户带来流畅的互动体验。例如,一个“播放器类型”的AJAX小程序,可能具备无需跳转页面就能...
Asp.Net AJAX GridView 是一种强大的数据展示控件,它结合了ASP.NET的服务器端功能与AJAX技术的优势,提供了一种高效、响应迅速且用户体验优良的方式,用于在Web应用程序中展示和操作数据。这个控件使得开发人员能够...