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

随机推荐

【Mysql】之视图操作
一.视图实例1-创建视图及查询数据操作首先,创建三个表:user.course.user_course 表:user CREATE TABLE `user` ( `id` ) NOT NULL AU ...
python 基础 9.10 删除数据
#/usr/bin/python #-*- coding:utf-8 -*- #@Time :2017/11/24 4:40 #@Auther :liuzhenchuan #@File : ...
[CMD]重启电脑
https://zhidao.baidu.com/question/686086701903450132.html bat是批处理,可以调用关机命令关机. 制作方法如下: 打开记事本程序: 输入如下内 ...
Python 推导式、迭代器、生成器、模块和包
一.推导式 (一).列表推导式(集合推导式也同理于此) 利用列表推导式,取出1-20内所有偶数 li = [i for i in range(1, 21) if i % 2 == 0] # 如果只有一 ...
poj3708(公式化简+大数进制装换+线性同余方程组)
刚看到这个题目,有点被吓到,毕竟自己这么弱. 分析了很久,然后发现m,k都可以唯一的用d进制表示.也就是用一个ai,和很多个bi唯一构成. 这点就是解题的关键了. 之后可以发现每次调用函数f(x),相 ...
element-ui table 点击分页table滚动到顶部
在做项目中,碰到一个问题,table加了固定头,内容可滚动,当滚到table底边时,点击分页后还在底边解决方法:设置table的 ref='multipleTable' //切换分页的方法加上下面这 ...
c#的const可以用于引用类型吗
答案是可以的.不过用const修饰的类实例只能是null. class A{ public int a=0; } class B{ const A constA=null; const object ...
Django在不启动server的情况下调用方法
from django.conf import settingsfrom django import template settings.configure() a = template.Templa ...
windows10下载
http://care.dlservice.microsoft.com/dl/download/F/5/7/F574727C-B145-4A7D-B85B-11C4E8DC894B/9841.0.14 ...
IDEA main方法自动补全（转发：http://blog.csdn.net/zjx86320/article/details/52684601）
最近刚从Eclipse转到IDEA,各种学习丫,IDEA里的main方法是不能自动补齐的,肿么办呢? 1.首先,点击File-->Settings-->Editor-->Live T ...

使用jquery执行ajax

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

随机推荐

热门专题