使用Ajax傳值到後台_

使用Ajax傳值到後台__Ajax

最後更新：2018-07-27 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

需求：

在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>

這樣就可以在後台接收到前端發送過來的參數了

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More