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

随机推荐

Linux进程间通信(五) - 信号灯(史上最全)及其经典应用案例
信号灯概述什么是信号灯信号灯用来实现同步,用于多线程,多进程之间同步共享资源(临界资源). PV原语:信号灯使用PV原语 P原语操作的动作是: u sem减1. u sem减1后仍大于或等于零 ...
[Sdoi2013]随机数生成器（BSGS）
#include<cstdio> #include<cstring> #include<cmath> #include<iostream> #inclu ...
nodejs windows下安装运行
node 官网下载地址http://nodejs.org/ 下载自己对应的版本 ,我下的是windows版本 node-v4.1.1-x64.msi 然后下一步下一步就完成安装了,非常简单, ...
九度OJ 1341：艾薇儿的演唱会（最短路）
时间限制:1 秒内存限制:32 兆特殊判题:否提交:528 解决:241 题目描述: 艾薇儿今天来到了中国,她计划两天后在哈尔滨举行一场个人的演唱会.由于出现了紧急情况,演唱会的举办方要求艾薇儿 ...
iOS应用的执行原理
本文转自:http://www.cnblogs.com/oc-bowen/p/6061261.html http://www.cnblogs.com/oc-bowen/p/6061178.html 一 ...
centos修改mysql密码或者进入mysql后解决Access denied for user ''@'localhost' to database 'mysql错误
原因是MySQL的密码有问题用mysql匿名用户可以进入数据库,但是看不见mysql数据库. 解决办法:具体操作步骤:关闭mysql:# service mysqld stop然后:# mysqld ...
我的Android进阶之旅------>Android中AsyncTask源码分析
在我的<我的Android进阶之旅------>android异步加载图片显示,并且对图片进行缓存实例>文章中,先后使用了Handler和AsyncTask两种方式实现异步任务机制. ...
MyBaits面试题
原文地址 Mybatis技术内幕系列博客,从原理和源码角度,介绍了其内部实现细节,无论是写的好与不好,我确实是用心写了,由于并不是介绍如何使用Mybatis的文章,所以,一些参数使用细节略掉了,我们的 ...
IDEA运行后控制台输出乱码
1.点击 2.点击 3.添加:-Dfile.encoding=UTF-8 . 4.点击OK
python实例3-天气小模块
调用中国天气的一小段代码,抓取 #! /usr/bin/python # coding = utf-8 # ToDo: get weather info from weather.com.cn # A ...

使用jquery执行ajax

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

随机推荐

热门专题