zoukankan      html  css  js  c++  java
  • jquery 表单提交

    1.ajax请求的4种方法:

    jquery回调函数里面的data是json格式,所以传值的时候必须传json格式 response.getWriter().print(dataArr.toJSONString());

    1.1: load方法,用于load服务器的文件

    如下:
    	$('input:first').click(function (){
    		$('#load').load("form_01.html #checkBox");//url
    	});
    	//上述方法是加载了form_01.html中的 #checkBox部分到当前页面中的#load中
    
    	$('input[type=button]').click(function(){
    		var send={'userName':$('#userName').val()};//设置需要传入服务器的参数json格式
    		$('#load').load('test!checkName',send,function(msg){
    			alert('回调函数');
    		});
    	});
    	//上述方法向服务器发送了数据,有回调函数,但是会将服务器返回的所有数据以json格式全部加载到#load中
    	

    1.2: get方法,向服务器发送请求(提交方式是get)

    如下:
    	$('input[type=button]').click(function(){
    		var send={'userName':$('#userName').val()};
    		$.get('test!checkName',send,function(data){
    			$('#load').html(data.msg);
    		});
    	});
    	//上述方法是以get方法向服务器发送了一个请求,并将返回的数据添加到#load中
    	

    1.3: post方法,向服务器发送请求(提交方式是post)

    如下:
    	$('input[type=button]:first').click(function(){//检测的单击事件
    		var send={'userName':$('#userName').val()};//需要传入的参数 json格式
    		$.post('test!checkName',send,function(data){//post 和get一样 参数(url(请求地址action),参数,回调函数(获取响应的参数))
    			if(data.flag){//获取响应参数中的flag boolean类型
    				$('#load').html('用户名已经存在');
    			}else{
    				$('#load').html('用户名可以注册');
    			}
    		});
    	});
    	//上述方法是以post方法向服务器发送了一个请求,并将返回的数据添加到#load中,与get用法一样,
    	//flag是action中的封装之后属性,下面的user,userList都是action中的封装属性
    	

    1.4: ajax方法,向服务器发送请求

    如下:
    	$('input[type=button]:last').click(function (){//查询的单击事件 
    		var sendData={'userId':$('#userId').val()};//数据 json格式数据
    		var url="test!search";//地址
    		$.ajax({//注意写法是json格式的  推荐使用ajax  原因是速度快
    			url:url,//地址
    			data:sendData,//参数
    			type:'post',//设置提交类型
    			success:function(data){//请求成功的回调函数
    				$('#load2').html(data.user.id+','+data.user.userName+','+data.user.userAddress);
    			}
    		});
    	});
    	//上述方法是以ajax方法向服务器发送了一个请求,并将返回的数据添加到#load中,可以设置提交类型,推荐使用这个方法。
    	

    2.在回调函数中遍历返回的json数组或者集合

    2.1: 直接使用for遍历

    如下:
    	$('input[type=button]:first').click(function(){//显示信息单击事件
    		var url="test!searchAll?z="+Math.random();//Math.random()随机数,用来防止浏览器缓存
    		$.ajax({
    			url:url,
    			type:'post',
    			success:function(data){
    				var value='';
    				for(var i=0;i<data.userList.length;i++){
    					value+=data.userList[i].userName+','+data.userList[i].userAddress+'<br>';
    				}
    				$('#load').html(value);
    			}
    		});
    	});
    	//上述方法中,通过请求之后需要拿到的是一个list泛型集合userList,通过for遍历添加到#load的文本。
    	

    2.2: 使用jquery的工具函数eval转换

    如下:
    	$('input[type=button]:last').click(function(){//查询所有单击事件
    		$('#load').html('');//清空文本
    		$('#load').append('<ul></ul>');
    		$.ajax({
    			url:'test!searchAll',
    			type:'post',
    			success:function(data){
    				var user=eval(data.userList);//因为集合的结构个数组一样,所以可以使用eval转换为数组
    				for(var i=0;i<user.length;i++){
    					$('#load<ul').append('<li>'+user[i].userName+','+user[i].userAddress+'</li>');
    				}
    			}
    		});
    	});
    	//上述方法中,通过请求之后需要拿到的是一个list泛型集合userList,通过eval转换为数组,再使用for遍历添加到#load的文本中。
    	

    2.3: 使用jquery的工具函数each遍历

    如下:
    	 success:function (data) {//回调函数 
                    $(data.userList).each(function (i, value) {  
                        $("#load").append("id:" + value.userName + ", name: " + value.userAddress ");  
                    });  
      
             }  
    	//上述方法中,通过请求之后需要拿到的是一个list泛型集合userList,直接使用工具函数each()遍历添加到#load的文本中。
    	

    3.ajax中的提示信息

    3.1:ajaxStart()和ajaxStop()

    如下:
    	$(document).ajaxStart(function(){
      		$('#loading').show();//显示#loading
    	}).ajaxStop(function(){
    		$('#loading').hide();//隐藏#loading
    	});
    	//上述方法中,定义了整个html文档中提交ajax和ajax完成之后(ps:jquery支持链表式操作)。
    	

    3.2:ajaxSend()方法

    如下:
    	$(document).ajaxSend(function(evt, request, settings){//请求之前
      		 $("#load").append("<li>开始请求: " + settings.url + "<li>");
    	});
    	//上述方法中,定义了整个html文档中提交ajax之前的函数。
    	

    4.ajax中的错误处理

    4.1:定义ajax()方法中的错误回调函数

    如下:
    	$('input[type=button]').click(function(){//查询所有单击事件
    		$.ajax({
    			url:'test!searchAll?z='+Math.random(),
    			type:'post',
    			timeout:3000,//设置请求时间/毫秒
    			success:function(data){//请求成功的回调函数
    				$('#load').append('<ul></ul>');
    				$('#load>ul').html('');//清空
    				var user=eval(data.userList);//因为集合的结构个数组一样,所以可以使用eval转换为数组
    				for(var i=0;i<user.length;i++){//循环文本
    					$('#load>ul').append('<li>'++user[i].userName+','+user[i].userAddress+'</li>');
    				};
    			},
    			error:function(jqXHR,textStatus,errorThrown){//错误的回调函数
    				if(errorThrown=='Not Found'){//errorThrown 错误异常信息
    					$('#load').html('无法找到请求.');
    				}
    				if(textStatus=='timeout'){// 错误状态
    					$('#load').html('请求超时。。。');
    				}
    			}
    		});
    	});
    	//上述方法中,定义了ajax中的error回调函数,与success对应(ps:注意ajax()函数中的格式是json格式,不能写成链表)。
    	

    4.2:全局ajaxError()方法

    如下:
    	$(document).ajaxError(function(){//捕捉错误 比回调函数error:function优先
    		$('#load').html('ajax请求发送错误!');
    	});
    	//上述方法中,定义了整个html文档中ajaxError()方法,用于捕捉所有的请求错误。
    	
     

    5.js动态提交

    function sub(method){

    document.myform.action="action?="+method;
        document.myform.submit();

    }

     
  • 相关阅读:
    java读取文件并获得文件编码,转换为指定编码的工具类代码
    OpenStreetMap地图数据介绍(转)
    字符串匹配的KMP算法(转)
    Dijkstra算法求最短路径(java)(转)
    用java解析在OpenStreetMap上下载的地图数据(SAX版,适合比较大的xml文件)
    用java解析在OpenStreetMap上下载的地图数据
    加载依赖的jar包在命令行编译和运行java文件
    CentOS 加载/挂载 U盘 (转)
    MongoDB:如何正常关闭服务(转)
    JTS(Geometry)(转)
  • 原文地址:https://www.cnblogs.com/Jenny-sider/p/4512863.html
Copyright © 2011-2022 走看看