Ajax 与后台 HttpServlet 的简单交互

最新推荐文章于 2021-03-08 03:05:59 发布

「已注销」

最新推荐文章于 2021-03-08 03:05:59 发布

阅读量377

点赞数

分类专栏： ajxa 文章标签： ajax

本文链接：https://blog.csdn.net/bookZhong/article/details/51217688

版权

ajxa 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Ajax 与后台 HttpServlet 的简单交互

架构：

------------------------------------------------------

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>zy-ajax</display-name>
<servlet>
<description></description>
<display-name>TestAjax</display-name>
<servlet-name>TestAjax</servlet-name>
<servlet-class>zy.test.ajax.TestAjax</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestAjax</servlet-name>
<url-pattern>/testAjax</url-pattern>
</servlet-mapping>
</web-app>

-------------------------------------------------------------

test.html

<!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">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){ //这是jQuery的初始化函数，页面一加载后就开始
$("#button").click(function(){ //from表单中：，$("#button"):通过选择器绑定鼠标点击事件
//alert( $("form").attr("action"));
$.ajax({
type : "POST", //发送请求的方法
url : $("form").attr("action"), //获取form表单中发送请求的地址
dataType : 'text', ///预期服务器返回的数据类型
data : {
username : $(":text").val(), //拿到输入框的输入的值：text 是type 的类型；
password : $(":password").val(),
},
success : function(data) { //请求成功后回调函数。参数：服务器返回数据，数据格式
var data = eval("(" + data + ")"); ///解析获取的数据
var username = data.username;
var password = data.password;
//username = decodeURI(username);
//password = decodeURI(password);
var txtHtml = "<div class='comment'><h3>" + username
+ ":</h3><p class='para'>" + password + "</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
},
error : function(t) { //请求失败时调用时间。参数：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象
alert("error，格式或数据返回出错");
}
});
return false;
});
});
</script>
<body>
<form action="testAjax" method="POST">
username:<input type="text" name="username"/><br/>
password:<input type="password" name="password"/><br/>
<button id="button">button here!</button>
<span id="resText"></span>
</form>
</body>
</html>

------------------------------------------

TestAjax.java

package zy.test.ajax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TestAjax extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// System.out.println("i'm going here!"); 测试页面到后台是否实现；
String username=request.getParameter("username"); //接收页面传入的两个值
String password=request.getParameter("password");
System.out.println("username="+username+"; password="+password);
//以上实现了页面传值到后台成功，一下部分是通过拼接字符串的格式将值返回给页面；
try {
//拼接；
String json="{succes:true,username:'"+username+"',password:'"+password+"'}";
//response.getWriter().write("");封装格式返回页面；
response.getWriter().write(json);
} catch (Exception e) {
e.printStackTrace();
}
}
}

--------------------------------------------------------

页面运行效果：

这是非常简单的入门程序测试，（当然还有很多其他方式可以实现）没有多大技术含量，有改进之处望指点，谢谢；

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax 与后台 HttpServlet 的简单交互

Ajax 与后台 HttpServlet 的简单交互架构：------------------------------------------------------web.xml<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xm
复制链接

扫一扫