7 jquery中ajax

作者: 流光已至 | 来源:发表于2018-08-05 21:14 被阅读0次

 // 标准ajax
      $.ajax({
        
         type:'POST',    //type:请求方式get或者是post
         url:'/jquery_demo1/demoServlet', //url:请求地址
         async:false,       // 同步的ajax
         data:{name:'aa'},    //data:发送的数据
         dataType:'text' ,    //dataType:返回的数据类型，有json,text,xml,html
         success:function(responseText){  //success:回调的数据方法
             
            alert(responseText) ;
         },
      
         error:function(){
             alert('发生错误');             //error:发生错误时
         }  
          
      });

ajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function ajaxInvoke(){

    /* var uname = $("#username").val();

        var opt = {
            type :'post',//请求方式 有单引号
            url : '${path}/login', //请求的地址
            data : {
                username : uname
            },
            dataType : 'text',//返回值类型，一般有两种 json和text   

            success : function(responseText) { //ajax调用成功后的回调方法
                // alert(responseText);
               // var jsonObj= window.eval("("+responseText+")"); 使用json库
                var jsonObj=$.parseJSON(responseText);
                alert(jsonObj.id+" "+jsonObj.name+" "+jsonObj.age);
            },
            error : function() {    //调用失败进入方法
                alert("系统错误");    //如果404或者后台报异常（throw new RuntimeException()）就会进入
            } 

        };
        $.ajax(opt); */
        
    //dataType为json类型   
    var uname = $("#username").val();

    var opt = {
        type :'post',//请求方式 有单引号
        url : '${pageContext.request.contextPath }/login', //请求的地址
        data : {
            username : uname
        },
        dataType : 'json',//返回值类型，一般有两种 json和text   

        success : function(responseJSON) {
            
            alert(responseJSON.id+" "+responseJSON.name+" "+responseJSON.age);
            //如果dataType是Json那么要求后台一定要返回JSONObj或者JSONArray对象
            //这个后台的JSON对象会直接转换成js中的json;
            
        }, 
        error : function() {    //调用失败进入方法
            alert("系统错误");    //如果404或者后台报异常（throw new RuntimeException()）就会进入
        } 

    };
    $.ajax(opt);
    }
</script>
<style type="text/css">



</style>
</head>
<body>
<input id="username" name="username" type="text">
<input type="button" value="点击" onclick="ajaxInvoke()">
</body>
</html>

MyServlet.java

public class MyServlet extends HttpServlet {
       @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
           //获得ajax发送的数据
        String name= req.getParameter("username");
        Person p = new Person();
        p.setId(1);
        p.setAge(20);
        p.setName("张三");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        //String result="{\"id\":"+p.getId()+",\"name\":\""+p.getName()+"\",\"age\":"+p.getAge()+"}"; //太麻烦  拼json串
         //直接使用json库
         JSONObject obj = JSONObject.fromObject(p);
         resp.getWriter().print(obj);
           
    }
    
       
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        this.doGet(req, resp);
    }
}

web.xml配置

ajax1.jsp

<script type="text/javascript">
function ajaxInvoke(){

    //ajax是异步的  可以用/async:false/变成同步
    //程序不会等着回调函数执行完毕才去执行；
    var uname = $("#username").val();

    var opt = {
        type :'post',//请求方式 有单引号
        url : '${path}/login', //请求的地址
        
        data : {
            username : uname
        },
        dataType : 'json',//返回值类型，一般有两种 json和text   

        success : function(responseJSON) {
            
            alert(responseJSON.id+" "+responseJSON.name+" "+responseJSON.age);
            //如果dataType是Json那么要求后台一定要返回JSONObj或者JSONArray对象
            //这个后台的JSON对象会直接转换成js中的json;
            
        }, 
        error : function() {    //调用失败进入方法
            alert("系统错误");    //如果404或者后台报异常（throw new RuntimeException()）就会进入
        } 

    };
    $.ajax(opt);
    }
</script>
<style type="text/css">



</style>
</head>
<body>
<input id="username" name="username" type="text">
<input type="button" value="点击" onclick="ajaxInvoke()">
</body>
</html>

ValidServlet

public class ValidServlet extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp)
                throws ServletException, IOException {
             //获得ajax3发送的数据
            String name=req.getParameter("uname");
            if("12345".equals(name)){
                resp.getWriter().print("yes");
            }else{
                resp.getWriter().print("no");

            }
        }
        
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
             this.doPost(req, resp);
        }

}

ajaxvalid.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
    //添加用户名已存在 使用ajax去后台
 
  
    $(function(){
        
        //ajax重复性校验 no不重复 yes重复
        function validSame(val){
            var isSame="no";
            $.ajax({
                
                type :'post',
                url : '${pageContext.request.contextPath }/valid', 
                async:false,
                data : {
                    uname : val
                },
                dataType : 'text',  

                success : function(result) {
                    
                    isSame=result;
                }, 
                error : function() {   
                    alert("系统错误");    
                } 
             
                
            })
             return isSame; 
            
        }
        
        //离开焦点时进行正则和重复性校验
        $("form input").keyup(function(event){
        //$("form input").blur(function(){
            var obj=$(this);
            var val =obj.val();
            var reg1=obj.attr("reg");
            var tip1=obj.attr("tip");
            var name=obj.attr("name");
            var regObj= new RegExp(reg1);
            
            if(!regObj.test(val)){
                var spanObj=obj.next();
                spanObj.html("<font color='red'>"+tip1+"</font>");
            }else{
                var spanObj=obj.next();
                if(name=="username"){
                    //ajax重复性校验
                    var result=validSame(val);
                    if(result=="yes"){
                        spanObj.html("<font color='red'>username is existed</font>");
                    }else{
                        spanObj.html(" ");
                    }
                }else{
                    spanObj.html(" ");
                }
                
            }
        });
        
        $("form input").focus(function(){
            $(this).css("background","yellow");
            
        })
        
        
 
       
    
    //提交表单时也应做相应处理
    $("#myform").submit(function(){
        var isSubmit=true;
        $("form input").each(function(){
            var obj=$(this);
            var val =obj.val();
            var reg1=obj.attr("reg");
            var tip1=obj.attr("tip");
            var name=obj.attr("name");
            var regObj= new RegExp(reg1);
            
            if(!regObj.test(val)){
                var spanObj=obj.next();
                spanObj.html("<font color='red'>"+tip1+"</font>");
                isSubmit=false;
            }else{
                var spanObj=obj.next();
                if(name=="username"){
                    //ajax重复性校验
                    var result=validSame(val);
                    if(result=="yes"){
                        spanObj.html("<font color='red'>username is existed</font>");
                        isSubmit=false;
                    }else{
                        spanObj.html(" ");
                    }
                }else{
                    spanObj.html(" ");
                }
                
            }
           
         })
         return isSubmit;
    });  
    
    //回车时也应做相应处理
    $("body").keydown(function(event){
        var num = window.event?event.keyCode:event.which;
        if(num==13){
            var isSubmit = true;
            $("form input").each(function(){
                var obj=$(this);
                var val =obj.val();
                var reg1=obj.attr("reg");
                var tip1=obj.attr("tip");
                var name=obj.attr("name");
                var regObj= new RegExp(reg1);
                
                if(!regObj.test(val)){
                    var spanObj=obj.next();
                    spanObj.html("<font color='red'>"+tip1+"</font>");
                    isSubmit=false;
                }else{
                    var spanObj=obj.next();
                    if(name=="username"){
                        //ajax重复性校验
                        var result=validSame(val);
                        if(result=="yes"){
                            spanObj.html("<font color='red'>username is existed</font>");
                            isSubmit=false;
                        }else{
                            spanObj.html(" ");
                        }
                    }else{
                        spanObj.html(" ");
                    }
                    
                }
               
             })
             return isSubmit;    
            
            
            
        }
    })
    
    
    
    
    
    
    
    
  });
</script>
<style type="text/css">



</style>
</head>
<body>
<form action="${path }/jsp1/table.jsp" id="myform">
     
        <p>用户名：<input name="username"     type="text" reg="^\d{3,8}$" tip="请输入3到8位数字"><span></span></p>
        <p>密码：  <input name="password" type="password" reg="^\d{6,8}$" tip="请输入6到8位数字密码"><span></span></p>
        <p>地址：  <input name="address"  type="text" reg="^.{0,50}$" tip="请输入0到50地址"><span></span></p>
        <p><input type="submit" value="注册"></p>

</form>
        
</body>
</html>

7 jquery中ajax

效果如下：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读