动态wed 实现 前端 jquery,ajax 连接 后端 servlet ,没有连 数据库
html 和 js :
-
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>Insert title here</title>
-
<script type="text/javascript" src="http://libs.百度.com/jquery/1.9.1/jquery.min.js"></script>
-
</head>
-
<body>
-
姓名:<input type="text" id="username"/> <br/>
-
密码:<input type="text" id="password"/> <br/>
-
<input type="button" value="提交" onclick="get()"/> <br/>
-
</body>
-
-
<script>
-
//js
-
function get(){
-
//首先获取文本框中的数据
-
var username = $("#username").val();
-
var password = $("#password").val();
-
-
$.ajax({
-
type:"get", // doGet方法当中 post:doPost
-
url:"http://localhost:8080/WeiYangServlet/MYFirstServlet",
-
data:{"username":username,"password":password}, //所要提叫的数据
-
success:function(data){ //数据从后面的servlet往前台传
-
console.log(data);
-
console.log(data.code);
-
console.log(data.message);
-
}
-
});
-
}
-
-
</script>
-
</html>
先引入jquery:
<script type="text/javascript" src="http://libs.百度.com/jquery/1.9.1/jquery.min.js"></script>
有了jQuery,才能用ajax 进行数据的提交。
-----------
两个输入框,定义 id 选择器
onclick 点击事件 执行 <script> 标签中的 get() 方法;
获取输入框中的数据,分别封装到username 和 password中,
----------
type中 是 get 则执行 servlet 中 doGet方法 如果是post 则执行 doPost 方法。一般连到数据库时,对数据的查找遍历在 doGet,对数据进行 增删改 在doPost。 现在没有连数据库,在doGet就行。
url 写的是servlet 的文件位置 ,这里是 http://本机ip地址 : (端口号) 8080 /项目名/servlet 名
data{}:向后端提交的数据,引号中是向后端传的key值
这个data是后端返回的json数据 console.log ( ) 打印
servlet:
-
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
-
-
// TODO Auto-generated method stub
-
String username = request.getParameter("username");
-
String password = request.getParameter("password");
-
System.out.println(username " " password);
-
-
response.setContentType("text/json;charset=utf-8");
-
response.setCharacterEncoding("utf-8");
-
-
String json = "{\"code\":\"200\",\"message\":\"成功\"}";
-
response.getWriter().append(json);
-
}
-
-
/**
-
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
-
*/
-
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
-
// TODO Auto-generated method stub
-
doGet(request, response);
-
}
-----
接收前端数据
浏览器解析了浏览器页面,把HTML代码解析成 图形化格式,把数据传输到servlet中去,数据类型是json数据类型。
json数据格式:key:value (例:name : 张三 用name就可以把 张三 代表出来)
json对象 {“ name”:"张三" } 对象指向是一种实体。
斜杠为转义字符。在文本写好后,粘贴到编译器中会自动加上。
数据返回给前端。避免字符集出错。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbhahe
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13