使用Ajax传值到后台

来源：互联网发布：windows 10 激活编辑：程序博客网时间：2024/06/08 03:07

需求：

在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

[java] view plain copy
 print?
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中配置

[html] view plain copy
 print?
<?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>  

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

0 0