注册用户

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

 这篇文章讲的是jQuery里的ajax发送data的三种方式,利用ajax发送数据的好处是把数据发送到了servlet后,当前页面不进行跳转。

jQuery的里的ajax发送data的方式主要有三种,分别是json数组,url拼接和表单的序列化serialize,这里要配合servlet一起。

第一种:url拼接(下面内容顺序:jsp代码,servlet代码,实验图片)

jsp代码,命名:”a.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-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
    var myClick=function(){
    var mySuccess=function(result){
        alert(result);
    }
    var myError=function(XMLHttpRequest,textstatus){
        if(XMLHttpRequest.status==404){
            alert("找不到页面404错误");
        }
        else if(XMLHttpRequest.status==500){
            alert("服务器异常500错误");
        }else{
            alert("服务器出现异常,请稍后重试");
        }        
    }
    $.ajax({
        //把数据发到哪里去
        url:'A?content='+$("#content").val(),
        //要调用servlet里的方法(doget或dopost)
        type:'GET',
        //返回的数据类型(可以没有)
        dataType:'text',
        //成功的话,调用函数
        success:mySuccess,
        //失败调用函数
        error:myError,
        //如果相应时间超过三秒就会出错
        timeout:3000
        
        });
    }
    $("#abc").click(myClick);
    
});

</script>
<title>Insert title here</title>
</head>
<body>
<input id="content" type="text"  value="This is content">
<input id="abc" type="button" value="click">
</body>
</html>

 

servlet代码,取名:A.java

package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/A")
public class A extends HttpServlet {
    private static final long serialVersionUID = 1L;
  
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String content = request.getParameter("content");
        System.out.println(content);
        PrintWriter out =response.getWriter();
        //下面注释了的代码是让servlet停三秒在做出反应
    /**    try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
                System.out.println("代码出错"+e.getMessage());
        }*/
        out.println(content);
        
        
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        
        doGet(request, response);
    }

}

 

效果图

第二方式:json

jsp代码(servlet代码可以用上面的),取名b.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-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
    var myClick=function(){
    var myData={  content : $("#content").val()  }
    var mySuccess=function(result){
        alert(result);
    }
    var myError=function(XMLHttpRequest,textstatus){
        if(XMLHttpRequest.status==404){
            alert("找不到页面404错误");
        }
        else if(XMLHttpRequest.status==500){
            alert("服务器异常500错误");
        }else{
            alert("服务器出现异常,请稍后重试");
        }        
    }
    $.ajax({
        //把数据发到哪里去
        url:'A',
        //要调用servlet里的方法(doget或dopost)
        type:'GET',
        //数据
        data:myData,
        //返回的数据类型(可以没有)
        dataType:'text',
        //成功的话,调用函数
        success:mySuccess,
        //失败调用函数
        error:myError,
        //如果相应时间超过三秒就会出错
        timeout:3000
        
        });
    }
    $("#abc").click(myClick);
    
});

</script>
<title>Insert title here</title>
</head>
<body>
<input id="content" type="text"  value="This is content">
<input id="abc" type="button" value="click">
</body>
</html>

 

效果图

第三种:serialize序列化

jsp代码(servlet用上面的),取名:c.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-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
    var myClick=function(){
    var myData=$("#content").serialize();
    var mySuccess=function(result){
        alert(result);
    }
    var myError=function(XMLHttpRequest,textstatus){
        if(XMLHttpRequest.status==404){
            alert("找不到页面404错误");
        }
        else if(XMLHttpRequest.status==500){
            alert("服务器异常500错误");
        }else{
            alert("服务器出现异常,请稍后重试");
        }        
    }
    $.ajax({
        //把数据发到哪里去
        url:'A',
        //要调用servlet里的方法(doget或dopost)
        type:'GET',
        //数据
        data:myData,
        //返回的数据类型(可以没有)
        dataType:'text',
        //成功的话,调用函数
        success:mySuccess,
        //失败调用函数
        error:myError,
        //如果相应时间超过三秒就会出错
        timeout:3000
        
        });
    }
    $("#abc").click(myClick);
    
});

</script>
<title>Insert title here</title>
</head>
<body>
<input id="content" type="text"  value="This is content">
<input id="abc" type="button" value="click">
</body>
</html>

 

 效果图

 

 

第一部分: http://www.cnblogs.com/memory9770/p/7236407.html

第二部分: http://www.cnblogs.com/memory9770/p/7237447.html

第三部分: http://www.cnblogs.com/memory9770/p/7237448.html

posted on 2017-07-26 07:50  note233  阅读(158)  评论(0编辑  收藏  举报