使用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和 ...

随机推荐

php 在linux 用file_exists() 函数判断另外一台服务器映射过来的文件是否存在总是返回false
php 在linux 用file_exists() 函数判断另外一台服务器映射过来的文件是否存在总是返回false .如下案例 $type="android"; $url=&q ...
从零开始学android -- CilpDrawable 徐徐展开的风景
话不多说上图实现简单利用了这个ClipDrawable clip.xml <?xml version="1.0" encoding="utf-8"?&g ...
传统数据仓库架构与Hadoop的区别
一, 下面一张图为传统架构和Hadoop的区别主要讲以下横向扩展和扩展横向扩展:(Mpp 是hash分布,具有20节点)添加新的设备和现有的设备一起提供负载能力.Hadoop中系统扩容时,系统平台增 ...
[转]基于Python的接口测试框架
http://blog.csdn.net/wyb199026/article/details/51485322 背景最近公司在做消息推送,那么自然就会产生很多接口,测试的过程中需要调用接口,我就突然 ...
parse arguments in bash
There are lots of ways to parse arguments in sh. Getopt is good. Here's a simple script that parses ...
Codeforces Round #392 (Div. 2) F. Geometrical Progression
原题地址:http://codeforces.com/contest/758/problem/F F. Geometrical Progression time limit per test 4 se ...
PHP如何进阶，提升自己
2017年6月15日14:32:51 今天看今日头条,刷到了一个话题?是:整天增删改查调接口,PHP程序员,如何突破职业瓶颈晋级? 晋级包括:职位晋级:技术能力晋级.当你的技术能力晋级了,职位晋级也就 ...
urllib库利用cookie实现模拟登录慕课网
思路 1.首先在网页中使用账户和密码名登录慕课网 2.其次再分析请求头,如下图所示,获取到请求URL,并提取出cookie信息,保存到本地 3.最后在代码中构造请求头,使用urllib.request ...
爬虫入门【2】Requests库简介
发送请求使用Requests发送网络请求很简单 #首先要导入requests库 import requests #返回一个Response对象 r=requests.get('https://git ...
九度OJ 1183：守形数（数字特性）
时间限制:1 秒内存限制:32 兆特殊判题:否提交:3815 解决:2005 题目描述: 守形数是这样一种整数,它的平方的低位部分等于它本身. 比如25的平方是625,低位部分是25,因此25是 ...

使用jquery执行ajax

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

随机推荐

热门专题