使用jquery执行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);

    }

}

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

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);

    }

}

BServlet

使用jquery执行ajax的更多相关文章

jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法解决方案:使json格式务必符合下述 ...
jQuery中ajax方法无法执行回调函数问题
最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...
jquery 使用ajax，正常返回后，不执行success的问题
背景: 在使用到jQuery的ajax时,如果指定了dataType为json,老是不执行success回调,而是执行了error回调函数. 原因: 然后继续下载了几个jquery版本,如1.3.2, ...
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
Jquery等待ajax执行完毕继续执行（断点调试正常，运行异常）
以前写过一个程序,发现用断点调试的时候,一步步的运行,程序是可以的,但是去了断点程序就出现了问题. $(document).ready(function(){ var arra=new Array() ...
jQuery版AJAX简易封装
开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...
jQuery与ajax 基础运用
jQuery是一个轻量级js框架,使用方便快捷,更是封装ajax处理方法,如$.load() $.get() $.post() 等但最常用的方法还是$.ajax() 一.一般的格式为 $.ajax( ...
JQuery中$.ajax()方法参数详解及 async属性说明
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

随机推荐

Hibernate: 数据持久层框架
Hibernate 是一种Java语言下的对象关系映射解决方案. 它是使用GNU宽通用公共许可证发行的自由.开源的软件.它为面向对象的领域模型到传统的关系型数据库的映射,提供了一个使用方便的框架.Hi ...
Wireshark 与 Tcpdump
[1]Wireshark 与 Tcpdump Wireshark是Windows下非常容易上手的抓包工具.但在Linux下很难找到一个好用的图形界面抓包工具.还好有Tcpdump.我们可以用Tcpdu ...
Expression Tree上手指南（一）
大家可能都知道Expression Tree是.NET 3.5引入的新增功能.不少朋友们已经听说过这一特性,但还没来得及了解.看看博客园里的老赵等诸多牛人,将Expression Tree玩得眼花缭乱 ...
在Linux中显示日历（cal）
cal 2013 显示2013年整年日历 cal 7 2013 显示2013年 7 月日历
解决QT：forward declaration of 'struct Ui::xxx';invalid use of incomplete struct "Ui::Widget" 等莫名奇异错误
今天在进行QT Widget的UI设计时,改了下Widget的对象名,然后在多次成功编译执行后,执行清理,又一次构建,就出现了好多莫名奇异的错误: widget.h:12: 错误:forward de ...
poj1861 最小生成树 prim & kruskal
// poj1861 最小生成树 prim & kruskal // // 一个水题,为的仅仅是回味一下模板.日后好有个照顾不是 #include <cstdio> #includ ...
POJ 2187 Beauty Contest【凸包周长】
题目: http://poj.org/problem?id=1113 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22013#probl ...
Frobenius inner product
https://en.wikipedia.org/wiki/Frobenius_inner_product Frobenius norm
Residual (numerical analysis)
In many cases, the smallness of the residual means that the approximation is close to the solution, ...
Mac标识物理位置算法 import Levenshtein mac列表特征值
mac 字符串与基准字符串的 Levenshtein 距离,考虑 mac信号强度的时序性,60秒内若干次变化不引入强度 mac字符串的唯一性如何排序基准字符串的选取同一尺度都按强度 ...

使用jquery执行ajax

使用jquery执行ajax的更多相关文章

随机推荐

热门专题