在前台页面的编写中,为了考虑到业务的科学性和用户的体验性,常常需要验证用户的输入数据是否合理有效。一般来讲,普通的js即可以做到,但更多时候往往需要跟后台进行交互。例如用户注册,判断用户所输入的用户名是否已经存在。下面用jQuery的get、post和ajax方法来实现判断,同时对这三种常见的局部刷新技术做一个小结:
注册页面:
<tr bgcolor="#FFFFFF"> <td height="25" width="15%" class="td_title">登录帐号<font color="red">*</font></td> <td height="25" width="35%" colspan="3"><input id="loginId" name="userVO.loginId" size="30" onblur="checkLoginId()" /><font color="red" id="loginId_message"></font> </td> </tr>
其中,onblur所触发的方法即是判断用户输入是否合理的方法。
判断用户输入是否已经存在的后台action:
<action name="PortalUser" class="com.xxx.action.UserAction" method="do{1}"> <result name="plainMessage"> <!-- 写在plainMessage对应的页面中(不是注册页面) <s:actionmessage theme="plain" /> -> </result> </action>
public String validLoginId() throws UnsupportedEncodingException{ UserService userService = xxx.getUserService boolean flag; try { flag = portalUserService.checkPortalUserLoginIdExist(portalUserVO); if(flag == true) { this.addActionMessage("true");//给结果页面 } else { this.addActionMessage("false"); } } catch (Exception e) { e.printStackTrace(); //action必须返回一个String,但是此action返回的string并不是给结果页面 return "plainMessage"; }
var LOGINID_VALID = false; jQuery("#loginId").val(jQuery.trim(jQuery("#loginId").val())); var loginId = jQuery("#loginId").val();
1.jQuery.get/post方式
function checkLoginId(){ if(loginId == ""){ jQuery("#loginId_message").html("请输入登陆账号"); return; } //前台处理action的URL var url = "<%=request.getContextPath()%>/User!validLoginId.action"; //get方式还可以这样写: //var url = "<%=request.getContextPath()%>/User!validLoginId.action?userVO.loginId" + loginId; jQuery.post(或get)( url, {"userVO.loginId":loginId}, //当get方式把请求参数跟在url后面时,这里可以直接写成{} //action成功处理后的回调response数据 function(response){ if(jQuery.trim(response) == "false"){ LOGINID_VALID = true; jQuery("#loginId_message").html(""); } else if(jQuery.trim(response) == "true"){ LOGINID_VALID = false; jQuery("#loginId_message").html("该登陆账号已存在,请重新输入"); jQuery("#loginId").focus(); } }); }
2.jQuery.ajax方式
这种方式直接把请求参数放到url后面,提交给后台action
function checkLoginId(){ if(loginId == ""){ jQuery("#loginId_message").html("请输入登陆账号"); return; } //前台处理action的URL var url = "<%=request.getContextPath()%>/User!validLoginId.action"; jQuery.post( url:url, type:get/post data:{"userVO.loginId":loginId}, //多个请求参数用,分隔 dataType:json,(text等) //action成功处理后的回调response数据 success:function(response){ if(jQuery.trim(response) == "false"){ LOGINID_VALID = true; jQuery("#loginId_message").html(""); } else if(jQuery.trim(response) == "true"){ LOGINID_VALID = false; jQuery("#loginId_message").html("该登陆账号已存在,请重新输入"); jQuery("#loginId").focus(); } }); }
相关推荐
封装jquery ajax方法,方便调用,避免在代码中频繁使用 $.ajax({ type: 'GET', url: url, ...... )}; 统一调用公共方法即可,区分同步异步,get post!希望对大家有帮助
load 代码如下: $(“#result”).load(“aaaa.asp #ccc”); get 代码如下: $.get(“aaaa.asp”, { action:”get”,... post 代码如下: $.post(“aaaa.asp”, { action:”post”,name:”lulu” }, function(data, textSt
标题中的“比较完整的原始ajax写法”指的是在JavaScript中实现异步XMLHttpRequest(Ajax)通信的基本方法,不依赖任何库或框架,如jQuery、axios等。这种原生的Ajax技术对于理解网络请求的工作原理至关重要。 在...
jQuery 提供了多种 AJAX 方法来简化这一过程,其中 `$.post()` 是一种常用的方式来实现客户端向服务器端发送数据并接收响应。本文将详细探讨 `$.post()` 的使用方法,特别是在传递 JSON 数据时的应用。 #### 一、`$...
2. 设置请求参数:通过`open()`方法指定请求类型(GET或POST)、URL和是否异步。例如,`xhr.open('GET', 'api.php?page=1', true);`这里的`page=1`代表请求第一页数据。 3. 发送请求:调用`send()`方法发送请求。...
本文将深入探讨如何使用jQuery的`$.ajax()`方法来发送GET和POST请求。 首先,我们要了解基本的`$.ajax()`调用语法。如文件中所示,可以有以下两种形式: 1. 简单写法:`$.ajax(url [, settings]);` 2. 完整写法:`...
5. **Ajax操作**:JQuery简化了Ajax请求,如`$.ajax()` 或者 `$.get()` 和 `$.post()` 方法,可以轻松地发送异步请求并处理响应。 6. **动画**:JQuery的`.fadeIn()`, `.slideUp()`, `.animate()` 等方法使得创建...
除了基础的`$.ajax()`,jQuery还提供了一些高级方法,如`$.get`、`$.post`等,它们是对`$.ajax()`的封装,简化了常见HTTP请求的处理过程。例如: ```javascript $.get("test.html", function(data) { console.log...
### jQuery 常用方法总结 #### 一、获取元素 在 jQuery 中,获取页面中的元素是非常基础且频繁使用的操作之一。以下是一些常见的选择器及其用途: - **`$("标签")`**:通过标签名获取所有匹配的元素。例如 `$(...
jquery在全局对象jquery(也就是$)绑定了ajax()函数,可以处理Ajax请求,ajax常用的配置选项有: async 是否异步执行,默认为True,千万不要指定为False method 发送的Method,缺省为“GET”,可指定为‘POST’,’...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
jQuery提供了一套简单的Ajax API,如`$.ajax()`, `$.get()`, `$.post()`等,方便开发者使用。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JSON...
Ajax是jQuery的重要组成部分,`.load()`, `.get()`, `.post()`等方法大大简化了与服务器的数据交互。同时,jQuery 1.3.2引入了`$.getJSON()`和`$.getScript()`,方便地处理JSON数据和异步加载脚本。 除了上述功能,...
利用GETJSON方法也能实现跨域请求,它的基本写法是: ```javascript $.getJSON("***", function(json) { // 处理返回的JSON数据 }); ``` 使用GETJSON方法时,服务端同样需要处理JSONP格式的请求,确保返回的数据...
本文将详细介绍jQuery中实现异步调用的四种方法:$.ajax、$.get、$.post以及$.getJSON。 1. **$.ajax**: `$.ajax` 是jQuery中最基础的AJAX调用方法,它允许自定义所有请求的细节。在示例代码中,`type` 指定了...
`open`方法的参数包括请求类型(如GET或POST)、请求的URL、一个布尔值表示是否异步(通常为true)、可选的用户凭证(用于跨域请求)和可选的响应处理器。在示例中,请求类型被设置为"GET",指向一个名为"ajaxServer...
3.10.3 功能实现 3.10.4 代码分析 3.11 本章小结 第4章 jquery中的事件与应用 4.1 事件机制 4.2 页面载入事件 4.2.1 ready()方法的工作原理 4.2.2 ready()方法的几种相同写法 4.3 绑定事件 ...
下面的`ajaxrequest`函数封装了这一过程,它接受URL、请求类型(GET或POST)、是否异步、参数、回调函数名以及需要在回调中处理的对象作为参数。 ```javascript function ajaxrequest(url, methodtype, con, ...
4. **Ajax交互**:`$.ajax()`, `$.get()`, `$.post()`等函数让异步数据获取变得简单,能够轻松实现页面局部更新,无需刷新整个页面。 5. **插件开发**:JQuery的可扩展性极强,许多优秀的插件如Bootstrap的弹出框、...