码迷,mamicode.com
首页 > Web开发 > 详细

使用Ajax传值到后台

时间:2016-05-12 16:22:03      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:

需求:

在web页面输入参数,通过Ajax将参数传入服务器,在服务器端进行接收


1、新建一个web项目,名称:Ajax

2、修改index.jsp

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8" %>  
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>www.mldnjava.cn,MLDN高端Java培训</title>
</head>
<body>
<script language="JavaScript">
var xmlHttp; //Ajax核心对象名称
function createXMLHttp() { //创建XMLHttpRequest核心对象
if (window.XMLHttpRequest) { //判断当前使用的浏览器类型
xmlHttp = new XMLHttpRequest(); //表示当前使用的是FireFox内核的浏览器
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function checkUserid() {
createXMLHttp(); //建立xmlHttp核心对象
//设置一个请求,通过地址重写的方式将userid传递到JSP中
var userid = document.getElementById("userid").value;
xmlHttp.open("POST", "Ajax/CheckServlet?userid=" + userid);
xmlHttp.send(null); //发送请求,不传递任何参数
document.getElementById("msg").innerHTML = "传输结束";
}
</script>
用户ID:
<input type="text" id="userid">
<span id="msg"></span>
<br>
<button onclick="checkUserid()">传输</button>
</body>
</html>




3、创建CheckServlet.java

package com.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 CheckServlet extends HttpServlet {


<span style="white-space:pre">	</span>public  void doGet(HttpServletRequest request,
<span style="white-space:pre">			</span>HttpServletResponse response) throws ServletException, IOException {
<span style="white-space:pre">		</span>this.doPost(request, response);
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>public void doPost(HttpServletRequest request,
<span style="white-space:pre">			</span>HttpServletResponse response) throws ServletException, IOException {
<span style="white-space:pre">		</span>request.setCharacterEncoding("UTF-8");
<span style="white-space:pre">		</span>response.setContentType("text/html"); // 设置回应的MIME
<span style="white-space:pre">		</span>String userid = request.getParameter("userid"); // 接收验证的userid
<span style="white-space:pre">		</span>System.out.println(userid);
<span style="white-space:pre">	</span>}
}

4、在web.xml中配置


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
	id="WebApp_ID" version="3.1">
	<display-name>Ajax</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>

	<servlet>
		<servlet-name>CheckServlet</servlet-name>
		<servlet-class>com.ajax.CheckServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>CheckServlet</servlet-name>
		<url-pattern>/Ajax/CheckServlet</url-pattern>
	</servlet-mapping>
</web-app>

这样就可以在后台接收到前端发送过来的参数了

使用Ajax传值到后台

标签:

原文地址:http://blog.csdn.net/zk673820543/article/details/51364947

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!