ajax的几种传数据方式

 

第一种（原生态写法）：

 

var xmlhttp;
         //首先创建一个XMLHttpRequest对象的方法
         function createXMLHttpRequest(){
			if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
			  xmlhttp=new XMLHttpRequest();
			}
			else{// code for IE6, IE5
			  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
         }
         function checkemail(){
             createXMLHttpRequest();//创建一个XMLHttpRequest对象
             //将页面的数据发送给服务器
             var emailvalue = document.getElementById("BS_U_Mail").value;
             //发送给服务器，就需要知道服务器的处理路径
             var url = "checkemail.do?useremail="+emailvalue;
             //通过XMLHttpRequest发送数据
             xmlhttp.open("GET",url,true);
             xmlhttp.send(null);
             xmlhttp.onreadystatechange=handledata;
             
         }
         function handledata(){
             if(xmlhttp.readyState==4){//表示服务器已经响应完客户端的请求，数据发回到客户端
                if(xmlhttp.status==200){ //浏览器的状态
                   if(xmlhttp.responseText=="Y"){ //说明email数据是重复的
                      document.getElementById("sp1").innerHTML="<font color='red'>*该邮箱已经占用</font>";
                      document.getElementById("btnsub").setAttribute("disabled","disabled");
                   }else{
                      document.getElementById("sp1").innerHTML="";
                      document.getElementById("btnsub").removeAttribute("disabled");
                   }
                }
             }
         }

 

后台接收：

 

req.setCharacterEncoding("utf-8");
        String useremail = req.getParameter("useremail");
        //把数据响应给客户端
        resp.setCharacterEncoding("gbk");
        PrintWriter pw = resp.getWriter();
			try {
				if(userInfoService.ifrepeat(useremail)){
					pw.write("Y");
				}else{
					pw.write("N");
				}
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}

 

方式2：

    //登录名是否存在
    function checkemail(){
    var emailvalue=$("input[name='useremail']").val();
        $.ajax({
           type:"GET",
           url:"checkemail.do",
           data:"useremail="+emailvalue,
           success:function(data){
              if(data=="Y"){
                 $("#sp1").html("*用户可用").css("color","green");
              }else{
                 $("#sp1").html("*用户不存在").css("color","red");
              }
           }
        });
    }

在后台接收：

req.setCharacterEncoding("utf-8");
        String useremail = req.getParameter("useremail");
        //把数据响应给客户端
        resp.setCharacterEncoding("gbk");
        PrintWriter pw = resp.getWriter();
			try {
				if(userInfoService.ifrepeat(useremail)){
					pw.write("Y");
				}else{
					pw.write("N");
				}
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}

方式3：

     $(function(){
        //点击搜索按钮的时候，数据的搜索功能
        $("input[name='submit1']").click(function(){
            var searchKey=$("#searchKey").val().trim();
            var searchMethod=$("#searchMethod").val();
            //考虑采用ajax的方式来处理获取的数据
            $.ajax({
	            type:"GET",
	            url:"searchajsx.do",
	            data:"searchKey="+searchKey+"&searchMethod="+searchMethod+"",
	            dataType:"json",//返回的数据类型为json的对象，也就是将字符串转换为对象
	            success:function(data){//ajax请求数据成功之后，那么它的处理函数
	                $("#showbook tbody").find("tr:not(:first)").remove();
		            var count=0;
		            for(var i in data){
			            count++;
			            var booktitle =data[i].booktitle;
			            var bookauthor =data[i].bookauthor;
			            var bookprice= data[i].bookprice;
			            var bookid= data[i].bookid;
			           var str="<tr><td style=\"width: 60%\">"+
			            "<a href=\"showbook.do?bookid="+bookid+"\" "+
			            " target=\"_blank\" title=\"+booktitle+\">"+booktitle+"</a></td> "+
			            " <td style=\"width: 20%\">"+bookauthor+"</td> "+
			            " <td style=\"width: 20%\">"+bookprice.toFixed(2)+"</td></tr> "; 
			            $("#showbook tbody").append(str);
		            }
		            $("#labRed").html(count);
	            }
            })
        })
     })

　　后台接收：

    	req.setCharacterEncoding("utf-8");
		String seracheKey =req.getParameter("searchKey");
		String searchMethod =req.getParameter("searchMethod");
		Book b=new Book();
		if(searchMethod.equals("Title")){
			b.setBooktitle(seracheKey);
		}else if(searchMethod.equals("Author")){
			b.setBookauthor(seracheKey);
		}else{
			b.setBookisbn(seracheKey);
		}
		try {
			List<Book> listbook =bookService.getbooks(b);
			//集合数据，集合数据需要转换成json的字符串
			JSONArray json = JSONArray.fromObject(listbook);
			//如果转换的是一个实体数据，而不是集合数据
   			//JSONObject jsonobject = JSONObject.fromObject(实体对象);
            String strjson =json.toString();//转换成json的字符串
            resp.setCharacterEncoding("utf-8");
            PrintWriter pw = resp.getWriter();
   			pw.write(strjson);
   			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();//打印错误的堆栈信息
		}

　如果转换的是实体对象：

   JSONObject jsonobject = JSONObject.fromObject(实体对象) 

如果转换的是集合：
   JSONArray json = JSONArray.fromObject(集合);

方式4（表单序列化）layui前端框架中

         function saveit(){
            //采用ajax的方式向后台发送数据
            //表单序列化的格式数据类似于与url传参的时候的格式
            var senddata = $("form").serialize();
            $.ajax({ //采取ajax的方式发送
               type:"POST",
               url:"updategoodsinfo.do",
               data:senddata,
               success:function(data){
                  if(data=="Y"){ //关闭当前的弹出层
                     closeit();
                  }else{
                    layer.msg("更新商品信息失败!");
                  }
               },
               dataType:"text"   //表示返回的数据类型
             }       
            );
         }
         //关闭弹出层的方法
        function closeit(){
	        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
	        parent.layer.close(index);  
        }

后台接收：

		@RequestMapping(value="/updategoodsinfo.do",method=RequestMethod.POST)
		public void updategoodsinfo(Goodsinfo goodsinfo,HttpServletResponse resp){
			goodsinfo.setUpdateuser("张三");
			goodsinfo.setUpdatetime(GetReceiptsIdUtil.getcurrenttime());
			try {
				PrintWriter pw = resp.getWriter();
				if(goodsinfoService.updategoodsinfo(goodsinfo)>0){
					pw.write("Y");
				}else{
					pw.write("N");
				}
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}

　　暂时想到这么多，后续补充。