首先编写JS部分代码
JavaScript方式
..已经忘记了。。
jQuery方式
其实有JQuery方式完全没人用javaScript方式
演示代码:点击一个 按钮,传递过去一个 age=25 ,再返回回来两个。
JS部分
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<input type="text" id="my-content"><input type="button" value="点击" οnclick="start();">
</body>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" >
/* /servlet/Test2 */
function start(){
var content=$("#my-content").val();
$.ajax({
url:'servlet/Test3',
type:'POST', //GET
async:true, //或false,是否异步
data:{
name:'yang',age:25//想要传输过去的数据 key:value,另一个页面通过 key接收value的值
},
timeout:5000, //超时时间
dataType:'text', //返回的数据格式:json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){//data是成功后,接收的返回值
console.log(data);
console.log(textStatus);
console.log(jqXHR);
$("#my-content").val(data);//将返回成功的值展示到input里
}
});
}
</script>
</html>
Java部分代码
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
String age=request.getParameter("age");//接收Ajax传过来的值
PrintWriter out = response.getWriter();//新建一个out对象
//把他输出就相当于把数据返回了。
//write 与 print 不同,必须是手动把数据装换成String类型
out.write(String.valueOf((age+age)));
}
如果是JSON数据的话记住封装与解析。
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);
使用这个方法在html页面验证数据