js+ajax异步提交表单向servlet传输数据

最新推荐文章于 2020-08-26 16:09:39 发布

WindSearcher

最新推荐文章于 2020-08-26 16:09:39 发布

阅读量1.1k

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/qq_40511966/article/details/88983835

版权

Java Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax_demo</title>
<script src="js/ajax.js"></script>

<script>
   function click1(){
	  
	   var userName = document.getElementById("userName");
	   var url = "AjaxDemo";
	   var params = "userName="+userName.value;
	 
	   loadXMLDoc(url,params,show);
   }
   
   /*用于回调*/
   function show(){
	        
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("show").innerHTML = xmlhttp.responseText;
			}
   }
</script>

</head>
<body>
	<form action="#">
 
		<h2>获取姓名:</h2>
		<input id="userName" type="text" />
		<br>
		<div id="show" style="border-bottom-color: red;" ></div>
		<br>
		<button type="button" onclick="click1()">请点击</button>
	</form>
	

</body>
</html>

在WebContent下建立一个js的文件夹，然后在建立一个ajax.js

ajax.js部分

/**
 * 
 */

var xmlhttp = null;

function createXHR(){
	if (window.XMLHttpRequest) {
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp = new XMLHttpRequest();
	} else {
		// IE6, IE5 浏览器执行代码
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
}



function loadXMLDoc(url,params,handler) {
	
	//var queryString = "AjaxDemo?userName="+userName;
	
	/*
	 * 创建XMLHttpRequest对象
	 * */
	createXHR();
	
	/*
	 * 当该对象状态发生变化，则调用该函数
	 * */
	xmlhttp.onreadystatechange = handler;
	
	/*xmlhttp.open("POST", queryString, true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send();*/
	/*
	 * 建立到服务器的连接
	 * */
	xmlhttp.open("POST", url+"?"+params, true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	/*
	 * 发送请求
	 * */
	xmlhttp.send();
	
}

Servlet部分

package com.liqiang.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

 

public class AjaxDemo extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String encoding = "UTF-8";// 字符编码
		request.setCharacterEncoding(encoding);// 请求编码
		response.setContentType("text/html;charset=" + encoding);// 响应编码
 
		PrintWriter out = response.getWriter();
		String userName = request.getParameter("userName");
		System.out.println(userName+"hhh");
		String responseText = "UserName:" + userName;
		out.println(responseText);
		out.close();
 
	}
 
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
 
		doGet(request, response);
	}
 
}

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" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>ajax_demo</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <servlet>
    <!-- servlet的内部名称，自定义。尽量有意义 -->
    <servlet-name>AjaxDemo</servlet-name>
    <!-- servlet的类全名： 包名+简单类名 -->
    <servlet-class>com.liqiang.servlet.AjaxDemo</servlet-class>
  </servlet>
	<!-- servlet的映射配置 -->
  <servlet-mapping>
	    <!-- servlet的内部名称，一定要和上面的内部名称保持一致！！ -->
	    <servlet-name>AjaxDemo</servlet-name>
	    <!-- servlet的映射路径（访问servlet的名称） -->
	    <url-pattern>/AjaxDemo</url-pattern>
  </servlet-mapping>
</web-app>

WindSearcher

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js+ajax异步提交表单向servlet传输数据

html部分<!DOCTYPE html><html><head><meta charset="utf-8"><title>ajax_demo</title><script src="js/ajax.js"></script><script> function cl...
复制链接

扫一扫