1.在myEclipse中新建一个web project, 名称:jqueryDemo
2.在index.jsp页面, 输入内容如下:
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<html>
<head>
<title>登录</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
//为id为btnSubmit的按钮制定click事件
$("#btnSubmit").click(function(){
//指定提交到什么页面
$.get("doLogin.jsp",{
name:$("#name").val(), //得到姓名
pwd:$("#pwd").val() //得到密码
},function(data,textStatus){//data:页面执行完的返回数据, textStatus:请求状态
//本页面中的id为resText的元素的html中的内容为返回的数据
$("#resText").html(data);
});
})
})
</script>
</head>
<body>
<form action="#" name="myform">
姓名:<input type="text" id="name" /><br />
密码:<input type="text" id="pwd" /><br />
<input type="button" id="btnSubmit" value="提交" />
</form>
<div id="resText"></div>
</body>
</html>
3. 另一页面doLogin.jsp内容如下:
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
System.out.print(name+pwd);
if("leaf".equals(name) && "leaf".equals(pwd)){
out.print("登录成功!");
}else{
out.print("登录失败!");
}
%>
很简单对吗? 是的, 它比其它方法似乎更简单一些.
而且, 它的提交可以到xxx.do?op=xxx, 这样就可以连接数据库取数据来操作了, 抛砖引玉吧.
分享到：
相关推荐
**jQuery与Ajax无刷新提交表单** 在网页开发中，jQuery和Ajax技术的结合使得用户交互体验得到了极大的提升。"jQuery Ajax无刷新提交表单并执行邮件通知"这个主题涉及了两个关键点：一是利用jQuery进行表单验证，二...
在IT行业中，"弹DIV提交表单无刷新"是一种常见的前端技术实现，它涉及到网页交互体验的提升。这种技术使得用户在提交表单时无需等待整个页面重新加载，而是通过Ajax（异步JavaScript和XML）技术实现数据的后台传递与...
本文将详细讲解如何使用jQuery提交表单，以及如何利用jQuery的AJAX功能来实现无刷新的数据提交。 ### 传统表单提交方式 在没有jQuery的情况下，我们通常会在HTML中创建一个表单，然后通过JavaScript或者JSP/...
在这个“Ajax使用jQuery提交表单 文件”中，我们将探讨如何利用jQuery实现Ajax提交表单，从而实现异步数据传输，提高用户体验。 首先，我们需要理解jQuery中的Ajax函数`$.ajax()`。这是一个核心函数，可以进行各种...
在Web开发中，异步表单提交是一种常见需求，它能提供更好的用户体验，因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的，它扩展了jQuery库，使表单异步提交变得更加简单、...
在Web开发中，异步提交表单是一种常见且高效的技术，它可以提高用户体验，因为用户无需等待整个页面刷新即可看到结果。本项目以"Jquery实现表单异步提交"为主题，通过一个名为"ajaxJquerySubmit"的示例，详细展示了...
要提交表单，可以这样使用： ```javascript $.ajax({ url: 'your-server-url', // 替换为实际服务器端接口地址 type: 'POST', // 或者 'GET'，取决于服务器端期望的HTTP方法 data: formData, // 之前使用...
表单填写完成后，提交表单通常是通过JavaScript阻止默认的表单提交行为，然后使用Ajax发送表单数据到服务器。这里涉及的jQuery知识点包括`event.preventDefault()`防止页面刷新，以及`$.ajax()`进行异步请求： ```...
jQuery的`$.ajax()`函数或`.submit()`配合`.ajaxSubmit()`方法为我们提供了异步提交表单的能力，保持页面不刷新，提高交互体验。 首先，我们来看一下`jquery.form.js`这个文件。这是jQuery Form Plugin的一个核心...
本文将深入探讨如何使用jQuery的ajax方法来提交表单，从而实现异步数据交换，提高用户体验。 首先，jQuery的$.ajax()函数是进行Ajax请求的核心，它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...
jquery.form.js 无刷新异步提交表单js文件 /** * jQuery Form Plugin * version: 3.51.0-2014.06.20 * Requires jQuery v1.5 or later * Copyright (c) 2014 M. Alsup **/
##### 4.3 实例：使用ajaxSubmit提交表单 ```javascript $('#myFormId').submit(function(){ $(this).ajaxSubmit(); return false; // 阻止默认提交行为 }); ``` ##### 4.4 实例：序列化表单 ```javascript var ...
本篇文章将深入探讨如何使用jQuery来实现Ajax提交表单。 一、jQuery与Ajax基础 jQuery通过其内置的$.ajax()函数提供了对Ajax的封装。这个函数允许开发者发送异步HTTP请求，获取服务器端的数据，并在不刷新整个页面...
用iframe提交表单，主要是将表单提交到iframe中，可实现无刷新提交。 html页面： <iframe name="FORMSUBMIT" width="1" height="1" ></iframe> ...
本示例“jquery实现的无刷新分页增删改”正是将jQuery的强大功能应用于数据管理，提供了一种高效且用户体验良好的解决方案。 首先，我们来理解“无刷新分页”。传统的网页分页通常需要用户点击分页按钮后，页面重新...
这在实现动态内容更新、表单提交、无刷新页面体验等方面有着重要的应用价值。jQuery提供了一个.load()方法，该方法可以将指定的远程HTML内容加载到当前的jQuery对象中。例如，如果你想更新id为“dl”的div元素的内容...
首先，PHP是服务器端的脚本语言，常用于处理HTML表单提交的数据和生成动态网页内容。在无刷新查询场景中，PHP接收由jQuery通过Ajax发送的JSON数据，然后执行相应的查询操作，最后将查询结果以JSON格式返回给前端。 ...
2. **事件处理**：当用户点击添加到购物车按钮时，我们可以绑定`click`事件，然后通过`event.preventDefault()`阻止默认的表单提交，避免页面刷新。例如： ```javascript $("#add-to-cart").on("click", function...
无刷新提交是指用户在网页上操作时（例如提交表单），页面无需进行完整的刷新就能完成数据的提交并显示结果的一种技术。这种技术能显著提升用户体验，减少用户等待时间，并保持页面当前的状态不被破坏。 在实际应用...
一、jQuery提交表单基础 1. **普通表单提交**：在HTML中，一个简单的表单提交可以通过`<form>`元素的`submit`事件触发。然而，使用jQuery可以更优雅地控制这个过程。例如，当用户点击提交按钮时，我们可以添加一个...