jquery之ajax例子

来源：互联网发布：手机小视频特效软件编辑：程序博客网时间：2024/05/21 17:37

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>

界面输入：

点击send按钮

后台打印结果：

前台结果

0 0