Ajax与Java通过POST方式交互

拼搏现实的明天。 2022-08-21 15:54 239阅读 0赞

1、关于Ajax交互的步骤

1.1  获取到xmlhttprequest

1.2  设置xmlhttprequest的onreadystatechange响应事件

1.3  准备获取ajax请求 xmlhttp.open("POST", "AjaxServerlet", true);

1.4  设置消息头为表单形式,模仿表单的POSt提交xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

1.5  发送ajax请求xmlhttp.send("age=18&name=zhang");  **    //Ajax的POST请求,参数是通过xmlhttp.send()方法携带的**

1.6  处理Ajax交互获取到的数据,具体的处理在xmlhttprequest的onreadystatechange响应事件中实现

2、Ajax与[Java][]的Servlet通过POSt交互

2.1  html代码

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****body****>**  
2.      **<****button** id="mybtn"**>**点击**</****button****>**  
3.      **<****div** id="myAjax"**>****</****div****>**  
4.  **</****body****>**

2.2 JavaScript代码

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****script** type="text/javascript"**>**  
2.      //1、获取到xmlhttprequest  
3.      function getXmlhttp() \{  
4.          var xmlhttp;  
5.          if (window.XMLHttpRequest) \{ // code for IE7+, Firefox, Chrome, Opera, Safari  
6.              xmlhttp = new XMLHttpRequest();  
7.          \} else \{ // code for IE6, IE5  
8.              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
9.          \}  
10.         return xmlhttp;  
11.     \}  
12.     window.onload = function() \{  
13.         document.getElementById('mybtn').onclick = function() \{  
14.   
15.             //1、获取到xmlhttprequest 对象  
16.             var xmlhttp = getXmlhttp();  
17.             //2、xmlhttprequest的响应事件  
18.             xmlhttp.onreadystatechange = function() \{  
19.                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) \{  
20.                     //5、操作获取到的信息  
21.                     //5.1ajax返回的数据,转换为javascript对象  
22.                     // 5.1.1 利用eval实现转换  
23.                     var ajaxResult = eval("(" + xmlhttp.responseText + ")");  
24.                     //5.1.2 利用jquery的方法,对于jQuery.parseJSON(),键值必须为双引号  
25.                     /\* var ajaxResult = jQuery.parseJSON(xmlhttp.responseText); \*/  
26.                     alert(ajaxResult)  
27.                     //5.2获取JavaScript对象的属性  
28.                     var age = ajaxResult.age;  
29.                     var name = ajaxResult.name;  
30.   
31.                     //5.3获取到页面的DIV,并设置内容  
32.                     var mydiv = document.getElementById("myAjax");  
33.                     mydiv.innerHTML = "name:" + name + "," + "age:" + age;  
34.                 \}  
35.             \}  
36.             //3、准备获取ajax请求  
37.             //3.1 对于get请求,带参数的方式,直接在open函数的请求地址带上参数  
38.             xmlhttp.open("POST", "AjaxServerlet", true);  
39.             //4、发送ajax请求  
40.             xmlhttp.setRequestHeader("Content-type",  
41.                     "application/x-www-form-urlencoded");  
42.             xmlhttp.send("age=18&name=zhang");  
43.   
44.         \};  
45.     \}  
46. **</****script****>**

2.3  style代码

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****style** type="text/css"**>**  
2.  \#myAjax \{  
3.      width: 400px;  
4.      height: 400px;  
5.      border: 1px dashed red;  
6.      text-align: center; /\* div中的文字水平方向居中显示 \*/  
7.      line-height: 400px; /\*这个和div的高度相同,div中的文字就会垂直方向居中显示  \*/  
8.      font-size: 16px;  
9.      font-weight: bold;  
10. \}  
11. **</****style****>**

2.4  AjaxServerlet.java代码

**\[java\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public** **class** AjaxServerlet **extends** HttpServlet \{  
2.    
3.      **public** **void** doGet(HttpServletRequest request, HttpServletResponse response)  
4.              **throws** ServletException, IOException \{  
5.          String age = request.getParameter("age");  
6.          String name = request.getParameter("name");  
7.          Person person = **new** Person(name, age);  
8.    
9.          String personJSON = "\{\\"name" + "\\":\\"" + name + "\\"," + "\\"age"  
10.                 + "\\":" + age + "\}";  
11.         System.out.println(personJSON);  
12.         response.getWriter().write(personJSON);  
13.     \}  
14.   
15.     **public** **void** doPost(HttpServletRequest request, HttpServletResponse response)  
16.             **throws** ServletException, IOException \{  
17.   
18.         doGet(request, response);  
19.   
20.     \}  
21.   
22. \}

2.5   web.xml代码

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****servlet****>**  
2.      **<****servlet-name****>**AjaxServerlet**</****servlet-name****>**  
3.      **<****servlet-class****>**com.ajax.com.AjaxServerlet**</****servlet-class****>**  
4.  **</****servlet****>**  
5.    
6.  **<****servlet-mapping****>**  
7.      **<****servlet-name****>**AjaxServerlet**</****servlet-name****>**  
8.      **<****url-pattern****>**/AjaxServerlet**</****url-pattern****>**  
9.  **</****servlet-mapping****>**  
10.   
11. **<****welcome-file-list****>**  
12.     **<****welcome-file****>**index.html**</****welcome-file****>**  
13. **</****welcome-file-list****>**

[Java]: http://lib.csdn.net/base/17
[view plain]: http://blog.csdn.net/zbw18297786698/article/details/51330357#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1674457
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1674457/fork

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关通过Jsoup发送Request Payload方式的Ajax post请求

最近在做一个旅游类的网站，在使用爬虫时，发现某程网站上某一个景点的用户评论这部分数据是通过Ajax异步请求动态加载的，首先通过Chrome跟踪异步请求，发现有两次请求， ![

绝地灬酷狼/ 2023年06月13日 06:23/ 0 赞/ 2 阅读

相关 ajax与php交互

ajax基本语法 $.ajax(\{ type: "post", //数据提交方式（post/get） url: "demo.php", //提交到的url d

红太狼/ 2022年11月28日 10:28/ 0 赞/ 196 阅读

相关 java servlet ajax_使用jquery 的ajax 与 Java servlet的交互

由于是使用jquery的所以别忘记导入jq 下面是jsp文件 pageEncoding="UTF-8"%> Insert title here function aj

心已赠人/ 2022年11月02日 11:49/ 0 赞/ 141 阅读

相关 6、jQuery的Ajax与Java通过POST方式交互

1. jQuery.post( url, \[data\], \[callback\], \[type\] ) ：使用POST方式来进行异步请求 1.1

我就是我/ 2022年08月21日 15:59/ 0 赞/ 126 阅读

相关 5、jQuery的Ajax与Java通过GET方式交互

1、jQuery.get( url, \[data\], \[callback\] )：使用GET方式来进行异步请求 1.1 参数：

比眉伴天荒/ 2022年08月21日 15:58/ 0 赞/ 170 阅读

相关 Ajax与Java通过POST方式交互

1、关于Ajax交互的步骤 1.1 获取到xmlhttprequest 1.2 设置xmlhttprequest的onreadystatec

拼搏现实的明天。/ 2022年08月21日 15:54/ 0 赞/ 240 阅读

相关 AJAX的GET与POST请求方式的区别

在前端面试中，常常会问到GET与POST请求的区别，现简单总结如下：（1）GET请求将参数在URL后进行传递，POST请求则是作为HTTP消息的实体内容发送给Web服务器。

太过爱你忘了你带给我的痛/ 2022年05月24日 03:42/ 0 赞/ 219 阅读

相关 AJAX发送请求(POST方式)

AJAX请求 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术：这里介绍一下AJAX发送请求（POST） POST比GET提交方式更

本是古典何须时尚/ 2022年05月24日 00:10/ 0 赞/ 272 阅读

相关 easyui ajax方式与后台servlet交互原理

easyui ajax方式与后台servlet交互原理 easyui ajax是以json数据方式来与后台进行交互的。阮一峰有篇博客对json数据格式总结的非常好： [

àì夳堔傛蜴生んèń/ 2022年01月05日 03:39/ 0 赞/ 222 阅读

相关 html通过Ajax异步交互实现分页

模拟百度分页（前5后4） 1. 定义一个页面的JavaBean，作为数据传输对象（DTO） public class PageBean<T> {

ゞ浴缸里的玫瑰/ 2021年12月15日 22:39/ 0 赞/ 370 阅读