使用jquery执行ajax

转载

mob604756ee0e6c 2016-08-11 13:10:00

文章标签 html java javascript xml ajax 文章分类 代码人生

$.ajax():返回其创建的XMLHttpRequest对象

回调函数：
如果要处理$.ajax()得到的数据，则应该使用回调函数！
beforeSend：在发送请求之后调用，需要一个XMLHttpRequest作为参数
error：请求出错后调用。参数XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象
dataFilter 在请求成功之后调用。传入返回的数据以及“dataType“参数的值。并且必须返回新的数据（可以是处理过的），传递给success函数
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成败。传入XMLHttpRequest对象以及一个带有成功错误信息的字符串。

数据类型：
$.ajax()函数依赖服务器提供的信息处理返回的数据。如果服务器报告是返回数据xml，可以使用普通xml方法或者jquery选择器。其他类型使用文本形式对待
dataType可以指定数据处理方式。除了淡村的XML，还可以指定html、json、jsonp、script或者text
其中text和xml不会处理，返回XMLHttpRequest的responseText或responseHTML得到的值
注意：如果返回的是xml，在服务端必须声明text/xml或者application/xml来获得一致结果
如果指定为json类型，会将获取到的数据作为一个javaScript对象解析，并将构建好的对象返回

发送数据到服务器
默认情况下Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值
date选项可以包含一个查询字符串，比如key1=value1&key2=value2，也可以是一个映射，如：{key1：‘value1’，key2：‘value2’}

例子1：加载并执行js文件：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP '01.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){
                $.ajax({
                    type:"GET",
                    url:"js/test.js",
                    dataType:"script"
                });
            });
        });
    </script>
  </head>
  
  <body>
      <button>点击我</button>
      <h1></h1>
  </body>
</html>

01.jsp

alert("Hello,js");

test.js

例子2：保存数据到服务器，成功时显示信息：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP '01.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){
                $.ajax({
                    type:"POST",
                    url:"<c:url value='/AServlet'/>",
                    data:"name=John&location=Boston",
                    success:function(msg){
                        //$("h1").html(msg);
                        alert("Date Saved:"+msg);
                    }
                });
            });
        });
    </script>
  </head>
  
  <body>
      <button>点击我</button>
      <h1></h1>
  </body>
</html>

02.jsp

public class AServlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        
        String name=request.getParameter("name");
        String location=request.getParameter("location");
        response.getWriter().print("得到的信息"+name+"--"+location);
    }
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
    }

}

AServlet

例子3：装载html

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP '01.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){
                $.ajax({
                    url:"html/test.html",
                    success:function(msg){
                        $("h1").append(msg);
                    }
                });
            });
        });
    </script>
  </head>
  
  <body>
      <button>点击我</button>
      <h1></h1>
      <h3>你好啊</h3>
  </body>
</html>

03.jsp

<!DOCTYPE html>
<html>
  <head>
    <title>test.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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

test.html

使用$.get(url,[data],[callback],[type])

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP '01.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){
                $.get("AServlet",
                    {name:"John",location:"Boston"},
                    function(msg){
                        alert("Date Saved:"+msg);
                    });
            
            });
        });
    </script>
  </head>
  
  <body>
      <button>点击我</button>
      <h1></h1>
  </body>
</html>

04.jsp

package cn.itcast.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AServlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        
        String name=request.getParameter("name");
        String location=request.getParameter("location");
        response.getWriter().print("得到的信息"+name+"--"+location);
    }
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        
        String name=request.getParameter("name");
        String location=request.getParameter("location");
        response.getWriter().print("得到的信息"+name+"--"+location);
    }

}

View Code

serialize():

这个方法可以序列化表格内容为字符串。可以配合ajax使用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP '01.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    
    <script type="text/javascript">
        $(function(){
            $("#results").append("<tt>"+$("form").serialize()+"</tt>");
        });
    </script>
  </head>
  
  <body>
      <button>点击我</button>
      <p id="results"><b>Results:</b></p>
      <form>
          <select name="single">
              <option>Single</option>
              <option>Single2</option>
          </select>
          <select name="multiple" multiple="multiple">
              <option selected="selected">Multipart</option>
              <option>Multiple2</option>
              <option selected="selected">Multiple3</option>
          </select><br/>
          <input type="checkbox" name="check" value="check1"/>check1
          <input type="checkbox" name="check" value="check2" checked="checked">check2
          <input type="radio" name="radio" value="radio1" checked="checked"/>radio1
          <input type="radio" name="radio" value="radio2" />radio2
      </form>
  </body>
</html>

05.jsp

使用jquery执行ajax_html_19

serializeArray():

这个方法可以序列化表单成json对象而不是字符串

$.post

使用了serialize()和$.post(url,[data],[callback],[type])的小例子：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP '01.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    
    <script type="text/javascript">
        $(function(){
            $("input[type='button']").click(function(){
                $.post(
                    "BServlet",
                    $("form").serialize(),
                    function(msg){
                        alert(msg);
                    });
            });
        });
    </script>
  </head>
  
  <body>
  <form>
      用户名:<input type="text" name="username"><br/>
      密码：<input type="password" name="password"><br/>
      <input type="button" value="测试一下">
  </form>
  </body>
</html>

06.jsp

package cn.itcast.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class BServlet extends HttpServlet {

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

        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        
        String username=request.getParameter("username");
        String password=request.getParameter("password");
        
        response.getWriter().print(username+"---"+password);
        System.out.println(username+"---"+password);
    }

}