jquery之ajax例子

最新推荐文章于 2021-08-05 12:46:10 发布

原创最新推荐文章于 2021-08-05 12:46:10 发布 · 731 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用Ajax技术实现在HTML页面中通过按钮触发后台处理并返回响应的简单示例。通过JavaScript的$.ajax方法，实现了在不刷新页面的情况下获取用户输入，并将数据发送到服务器端进行处理。服务器端的Servlet接收到请求后，解析传入的参数，并打印到控制台，最终返回确认消息。此过程展示了Ajax在增强用户体验、减少页面刷新方面的应用。

ajaxtest.html

<!DOCTYPE html>
<html>
  <head>
    <title>ajaxtest.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript"  src="js/jquery-2.1.1.js" charset="Utf-8" > </script>

<script type="text/javascript">
 function toSubmit(){
  var doUrl=$('form').attr('action');
   var params = $('form').serialize();
  params = encodeURI(encodeURI(params));

  $.ajax({
  url : doUrl ,
  type: "post",
  data: params,
  dataType : 'text',
   success : function(data) {
   if(data=="true"){
             alert("成功");
  }else{
      alert("失败");
   }
  }
 });

}
 </script>
  </head>

  <body>
    <form action="AjaxTestServlet.do" method="post">
     标题：<input type="text" id="title" name="title"/><br/>
     内容：<textarea rows="20" cols="100" id="content" name="content" ></textarea><br/>
     <input type="button" onclick="toSubmit()" value="send" />
    </form>
  </body>
</html>

AjaxTestServlet.java

package com.fei.servlet;

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 AjaxTestServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		 String title=request.getParameter("title");
		  System.out.println("title:"+title);
		  String content=request.getParameter("content");
		  content=java.net.URLDecoder.decode(content,"utf-8");
		  content=java.net.URLDecoder.decode(content,"utf-8");
		  System.out.println("content:"+content);
		  response.getWriter().print("true");
	}

}

对参数的解码，可以专门弄个filter,这里只是小例子，一切从简。

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" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name></display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>AjaxTestServlet</servlet-name>
    <servlet-class>com.fei.servlet.AjaxTestServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AjaxTestServlet</servlet-name>
    <url-pattern>/AjaxTestServlet.do</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>ajaxtest.html</welcome-file>
  </welcome-file-list>
</web-app>

界面输入：