`
Everyday都不同
  • 浏览: 711956 次
  • 性别: 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 四种方式代码写法

    jquery 读取页面load get post ajax 四种方式代码写法,学习jquery的朋友可以参考下。

    jquery插件使用方法大全

    这些都是较常用的方法,get和post用法一样。第一个参数是异步请求的url,第二个为参数,第三个回调方法。 (4)的方法会在指定的Dom对象上绑定响应ajax执行的事件。 (5)同步加载数据。发送请求时锁住浏览器。需要...

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

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

    jQuery权威指南-源代码

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

    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 绑定事件 ...

    JQuery权威指南源代码

    jQuery事件的链式写法 控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用...

    jquery-1.1.3 效率提高800%

    选择器速度提升 选择器的速度大幅度提高了,下表为jQuery1.1.2和1.1.3的选择器速度对比,提高了8倍多 Browser jQuery 1.1.2 jQuery 1.1.3 % Improvement IE 6 4890ms 661ms 740% Firefox 2 5629ms 567...

    jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法

    经过尝试,只需要在$.ajax中加入 contentType: “application/json; charset=utf-8″选项就可以了,这是因为在.net 3.5以后要对contentType进行检查,所以仅仅指定dataType的话.net就... $.ajax({ type: “POST”, url:

    浅析jQuery Ajax请求参数和返回数据的处理

    刚接触学会用jQuery ajax的时候,觉得真东西好神奇,这样就可以把数据取回来了啊。然后我可以把取回来的数据渲染到页面上,一颗赛艇。 之前很早接触到项目,并不知道怎么优雅的去用jquery ajax(现在也不优雅); ...

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

    主要介绍了jQuery 中ajax异步调用的四种方式,实例讲解,需要的朋友可以参考下。

    ajax经典怎样传输数据

    type: "POST", // 默认:GET 请求方式:[POST/GET] dataType: "xml", //默认["xml"/"html"] 返回数据类型:["xml" / "html" / "script" / "json" / "jsonp"] url: "Test.ashx", // 默认当前地址,发送请求的地址 ...

    AngularJS中$http的交互问题

    这篇文章,主要是通过我们熟悉的jquery中ajax和jsonp的类型方式,总结一下$http的使用。 $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。 1. angular中的ajax 写法一: $http({ method: 'GET',...

    Java学习笔记-个人整理的

    {1.7}方法}{26}{section.1.7} {1.8}运算符}{27}{section.1.8} {1.8.1}自增运算}{28}{subsection.1.8.1} {1.8.1.1}Postincrement}{28}{subsubsection.1.8.1.1} {1.8.1.2}Preincrement}{28}{subsubsection.1.8....

Global site tag (gtag.js) - Google Analytics