jQuery学习总结（三）

最新推荐文章于 2020-11-19 20:42:06 发布

weixin_33750452

最新推荐文章于 2020-11-19 20:42:06 发布

阅读量100

点赞数

文章标签： java javascript json ViewUI

原文链接：http://www.cnblogs.com/memory9770/p/7237448.html

版权

jQuery学习总结（三）

这篇文章讲的是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>