`
Everyday都不同
  • 浏览: 723733 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

jQuery的局部刷新——get、post和ajax方法写法小结

阅读更多

在前台页面的编写中,为了考虑到业务的科学性和用户的体验性,常常需要验证用户的输入数据是否合理有效。一般来讲,普通的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();
        }
   });
}

 

 

分享到:
评论

相关推荐

    ajaxRequest.js(ajax get post方法封装,方便前端调用)

    封装jquery ajax方法,方便调用,避免在代码中频繁使用 $.ajax({ type: 'GET', url: url, ...... )}; 统一调用公共方法即可,区分同步异步,get post!希望对大家有帮助

    jquery 读取页面load get post ajax 四种方式代码写法

    load 代码如下: $(“#result”).load(“aaaa.asp #ccc”); get 代码如下: $.get(“aaaa.asp”, { action:”get”,... post 代码如下: $.post(“aaaa.asp”, { action:”post”,name:”lulu” }, function(data, textSt

    比较完整的原始ajax写法

    标题中的“比较完整的原始ajax写法”指的是在JavaScript中实现异步XMLHttpRequest(Ajax)通信的基本方法,不依赖任何库或框架,如jQuery、axios等。这种原生的Ajax技术对于理解网络请求的工作原理至关重要。 在...

    jquery $.post()的用法 传递json文本 客户端和服务器端相互传递

    jQuery 提供了多种 AJAX 方法来简化这一过程,其中 `$.post()` 是一种常用的方式来实现客户端向服务器端发送数据并接收响应。本文将详细探讨 `$.post()` 的使用方法,特别是在传递 JSON 数据时的应用。 #### 一、`$...

    ajax、jquery各种很实用的分页写法

    2. 设置请求参数:通过`open()`方法指定请求类型(GET或POST)、URL和是否异步。例如,`xhr.open('GET', 'api.php?page=1', true);`这里的`page=1`代表请求第一页数据。 3. 发送请求:调用`send()`方法发送请求。...

    使用jQuery的ajax方法向服务器发出get和post请求的方法

    本文将深入探讨如何使用jQuery的`$.ajax()`方法来发送GET和POST请求。 首先,我们要了解基本的`$.ajax()`调用语法。如文件中所示,可以有以下两种形式: 1. 简单写法:`$.ajax(url [, settings]);` 2. 完整写法:`...

    达内 java 8_Ajax-JQuery

    5. **Ajax操作**:JQuery简化了Ajax请求,如`$.ajax()` 或者 `$.get()` 和 `$.post()` 方法,可以轻松地发送异步请求并处理响应。 6. **动画**:JQuery的`.fadeIn()`, `.slideUp()`, `.animate()` 等方法使得创建...

    jQuery:ajax

    除了基础的`$.ajax()`,jQuery还提供了一些高级方法,如`$.get`、`$.post`等,它们是对`$.ajax()`的封装,简化了常见HTTP请求的处理过程。例如: ```javascript $.get("test.html", function(data) { console.log...

    jquery常用方法总结

    ### jQuery 常用方法总结 #### 一、获取元素 在 jQuery 中,获取页面中的元素是非常基础且频繁使用的操作之一。以下是一些常见的选择器及其用途: - **`$("标签")`**:通过标签名获取所有匹配的元素。例如 `$(...

    Jquery ajax书写方法代码实例解析

    jquery在全局对象jquery(也就是$)绑定了ajax()函数,可以处理Ajax请求,ajax常用的配置选项有: async 是否异步执行,默认为True,千万不要指定为False method 发送的Method,缺省为“GET”,可指定为‘POST’,’...

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    jQuery + Ajax + json 级联

    jQuery提供了一套简单的Ajax API,如`$.ajax()`, `$.get()`, `$.post()`等,方便开发者使用。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JSON...

    jquery-1.3.2.js和jquery.min-1.3.2.js

    Ajax是jQuery的重要组成部分,`.load()`, `.get()`, `.post()`等方法大大简化了与服务器的数据交互。同时,jQuery 1.3.2引入了`$.getJSON()`和`$.getScript()`,方便地处理JSON数据和异步加载脚本。 除了上述功能,...

    jquery中ajax处理跨域的三大方式

    利用GETJSON方法也能实现跨域请求,它的基本写法是: ```javascript $.getJSON("***", function(json) { // 处理返回的JSON数据 }); ``` 使用GETJSON方法时,服务端同样需要处理JSONP格式的请求,确保返回的数据...

    jQuery 中ajax异步调用的四种方式

    本文将详细介绍jQuery中实现异步调用的四种方法:$.ajax、$.get、$.post以及$.getJSON。 1. **$.ajax**: `$.ajax` 是jQuery中最基础的AJAX调用方法,它允许自定义所有请求的细节。在示例代码中,`type` 指定了...

    原生AJAX写法实例分析

    `open`方法的参数包括请求类型(如GET或POST)、请求的URL、一个布尔值表示是否异步(通常为true)、可选的用户凭证(用于跨域请求)和可选的响应处理器。在示例中,请求类型被设置为"GET",指向一个名为"ajaxServer...

    jQuery权威指南366页完整版pdf和源码打包

    3.10.3 功能实现 3.10.4 代码分析 3.11 本章小结 第4章 jquery中的事件与应用 4.1 事件机制 4.2 页面载入事件 4.2.1 ready()方法的工作原理 4.2.2 ready()方法的几种相同写法 4.3 绑定事件 ...

    javascript原生ajax写法分享_.docx

    下面的`ajaxrequest`函数封装了这一过程,它接受URL、请求类型(GET或POST)、是否异步、参数、回调函数名以及需要在回调中处理的对象作为参数。 ```javascript function ajaxrequest(url, methodtype, con, ...

    Jquery常用丰富特效

    4. **Ajax交互**:`$.ajax()`, `$.get()`, `$.post()`等函数让异步数据获取变得简单,能够轻松实现页面局部更新,无需刷新整个页面。 5. **插件开发**:JQuery的可扩展性极强,许多优秀的插件如Bootstrap的弹出框、...

Global site tag (gtag.js) - Google Analytics