在jQuery中，$.ajax()方法是最底层的方法，也是功能最强的方法。其调用的语法格式为：

$.ajax([options])

其中，可选项参数[options]为$.ajax()方法中的请求设置，其格式为key/value，既包含发送请求的参数，也含有服务器相应后回调的数据，其全部名称如下表所示。

参数名 类型 描述
url String       发送请求的地址（默认为当前页面）
type String       数据请求方式（post或get），默认为get
data String或Object       发送到服务器的数据。如果不是字符串则自动转成字符串格式，如果是get请求方式，那么，该字符串将附在url的后面
dataType String       服务器返回的数据类型，如果没有指定，jQuery将自动根据HTTP包MIME信息自动判断，服务器返回的数据根据自动判断的结果进行解析，传递给回调函数，其可用类型为：
html：返回纯文本的HTML信息，包含的Script标记会在插入页面时被执行
script：返回纯文本JavaScript代码
text：返回纯文本字符串
xml：返回可被jQuery处理的XML文档
json：返回JSON格式的数据
beforeSend Function       该函数用于发送请求前修改XMLHttpRequest对象，其中的参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此如果函数返回false，则表示取消本次事件
complete Function       请求完成后调用的回调函数，该函数无论数据发送成功或失败都会调用，其中有两个参数，一个是XMLHttpRequest对象，另外一个是strStatus，用于描述成功请求类型的字符串
success Function       请求成功后调用的回调函数，该函数有两个参数，一个是根据参数dataType处理后服务器返回的数据data，另外一个是strStatus，用于描述状态的字符串
error Function       请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject
timeout Number 请求超时的时间（毫秒），该设置将覆盖$.ajaxSetup()方法中的同样设置
global Boolean       是否相应全局事件，默认是true，表示相应，如果设置成false，表示不响应，那个全局事件$.ajaxStart等将不响应
async Boolean       是否为异步请求，默认是true，表示异步，如果设置成false，表示同步请求
cache Boolean       是否进行页面缓存，true表示进行缓存，false表示不进行页面缓存

 

下面通过一个简单示例介绍jQuery中$.ajax()方法在数据交互过程中的应用。

1.创建一个用于登录的界面login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>$.ajax()方法发送请求</title>

    <script type="text/javascript" src="jquery-1.9.0.js">

    </script>

    <style type="text/css">

           body{font-size:13px}

           .divFrame{width:225px;border:solid 1px #666}

           .divFrame .divTitle{padding:5px;background-color:#eee;height:23px}

           .divFrame .divTitle span{float:left;padding:2px;padding-top:5px;}

           .divFrame .divContent{padding:8px;text-align:center}

           .divFrame .divContent .clsShow{font-size:14px;line-height:2.0em}

           .divFrame .divContent .clsShow .clsError{font-size:13px;border:solid 1px #cc3300;padding:2px;display:none;margin-bottom:5px;background-                                                    color:#ffe0a3}

           .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}

           .btn {border:#666 1px solid;padding:2px;width:50px;

           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}

    </style>

    <script type="text/javascript">

        $(function() {

            $("#btnLogin").click(function() {

                var strTxtName = encodeURI($("#txtName").val());

                var strTxtPass = encodeURI($("#txtPass").val());

                $.ajax({

                    url: "login.do",

                    dataType: "html",

                    data: { txtName: strTxtName, txtPass: strTxtPass },

                    success: function(data) {

                        if (data == "true") {

                            $(".divContent").html("操作提示，登录成功！");

                        }else {

                            $("#divError").show().html("用户名或密码错误！");

                        }

                    },

                    error:function(){

                        alert("出错了！");

                    }

                })

            })

        })

    </script>

</head>

<body>

  <form id="frmUserLogin">

      <div class="divFrame">

          <div class="divTitle"><span>用户登录</span></div>

          <div class="divContent">

              <div id="divError" class="clsError"></div>

              <div>名称：<input id="txtName" type="text" class="txt" /></div>

              <div>密码：<input id="txtPass" type="password" class="txt" /></div>

              <div>

                  <input id="btnLogin" type="button" value="登录" class="btn" />&nbsp;&nbsp

                  <input id="btnReset"  type="reset" value="取消" class="btn" />

              </div>

          </div>

      </div>

  </form>

</body>

</html>

2.创建一个后台处理的servlet---Login.java

package com;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.net.URLDecoder;

@WebServlet(name = "Login")

public class Login extends HttpServlet {

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

        String strName = URLDecoder.decode(request.getParameter("txtName"), "UTF-8");

        String strPass = URLDecoder.decode(request.getParameter("txtPass"),"UTF-8");

        boolean blnLogin = false;

        if(strName.equals("admin") && strPass.equals("123456")){

            blnLogin = true;

        }

        response.getWriter().print(blnLogin);//此处的blnLogin将传到前面的login.html页面中，传给success: function(data){}中的data

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doPost(request, response);

    }

}

3.配置web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

         version="3.1">

    <servlet>

        <servlet-name>login</servlet-name>

        <servlet-class>com.Login</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>login</servlet-name>

        <url-pattern>/login.do</url-pattern> <!-- 此处的"/login.do"对应于login.html中的$.ajax()中的url的值"login.do" -->

    </servlet-mapping>

    <welcome-file-list>

        <welcome-file>login.html</welcome-file>

    </welcome-file-list>

</web-app>

 

在页面login.html中，通过页面中“登录”按钮的单击事件，调用$.ajax()方法，将获取的用户名和密码发送到服务器，服务器相应请求，向客户端发送处理后的数据，客户端根据回调的数据，显示不同的页面效果。

Ajax在jQuery中的应用---ajax()方法的更多相关文章

  1. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  2. Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数:  ...

  3. 转载 ： Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...

  4. Jquery中$.get(),$.post(),$.ajax(),$.getJSON(),$.getScript(),$.load()的用法总结

    参考文档 :  https://blog.csdn.net/jiandanokok/article/details/48809717 本文是对Jquery中$.get(),$.post(),$.aja ...

  5. jQuery中常用的函数方法

    jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...

  6. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  7. JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明 对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的eac ...

  8. jquery中,size()和length()方法有啥区别

    jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...

  9. 深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...

随机推荐

  1. Could not calculate build plan

    问题:根据你提供的镜像地址,下载相应的jar包失败 原因: 1.你提供的镜像地址不稳定,把settings.xml文件中的mirror改成稳定的镜像地址 2.网络不稳定,重新下载,或者切换网络.

  2. Building Maintainable Software-java篇之Separate Concerns in Modules

    Building Maintainable Software-java篇之Separate Concerns in Modules   In a system that is both complex ...

  3. java 中的valueOf方法和强转

    case1:Object 对象转String 需要强调的是String.valueOf()方法,当参数为类型是object,且值时null的时候他的处理方式 public static String ...

  4. TP find() 查找

    如果用了find()进行查找数据.那么那么获取到这条对象的则是用find查找出的这条对象. 如果: $obj=$this->where('id'=>$id)->find(); 那么可 ...

  5. [已解决]window下Can't connect to MySQL server on 'localhost' (10061)与无法启动MYSQL服务”1067 进程意外终止”

    查了一圈,发现都解决不了我的问题,查了 window 系统日志,提示缺少了某些文件,文件怎么丢的我也不知道,以下是解决办法. -- 我的 mysql 版本为 5.6.x 压缩包版本,我的 mysql ...

  6. GIS开发离线地图应用-初识gis

    http://www.cnblogs.com/kevin-zlg/p/4611671.html 最新公司需要做一个基于gis地图的应用系统,由于之前公司项目中的电子地图模块都是我开发的,所以这个新系统 ...

  7. [浪风分享]App必死 Web永生 看Web的前世今生 必会卷土重来

    当我们回顾技术的演变历史时,我们也应该关注技术演变的背后逻辑. 几年前,美国的<连线>杂志发表了“Web已死,Internet永生”的文章,由于作者之一是长尾理论的提出者克里斯.安德森(C ...

  8. ChemDraw是这样预测诺氟沙星NMR谱

    化学绘图软件ChemDraw是一款在生化领域都可以使用的软件,诺氟沙星是一款常用的肠炎药,是生物化学领域的常见研究对象,在研究过程中需要预测它的NMR谱.这个时候如果用最新的ChemOffice 15 ...

  9. python3----字符串中的字符倒转

    方法一,使用[::-1]: s = 'python' print(s[::-1]) 方法二,使用reverse()方法: n = list(s) n.reverse() print(''.join(n ...

  10. Laravel5.1 响应

    上篇笔记刚刚记录完请求 这节就来说说响应,一般来说啊 一个请求对应一个响应,用户都请求咱了 咱必须做一些逻辑后给人家反馈是不是,这就是响应. 1 基本的响应 我们前几篇笔记已经用过很多响应了,其中包括 ...