在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. FastMethod和PropertyUtils两种反射方法的性能比较

    这两个类都提供反射方法的实现,性能对比如下: 循环条件是:1亿次 结论:PropertyUtils提供的getXXX和setXXX反射方法的性能是FastMethod的三倍 以下是测试方法: 首先是F ...

  2. GoWeb编程之多路复用

    GoWeb编程多路复用 在web编程中,比如我们要一个Url对应一个处理函数,或者一个页面对应一个静态文件,这些都需要进行处理,这个时候就是我们多路复用派上用场了. package main impo ...

  3. MySQL 5.7以上 root用户默认密码问题

    废话少说一句话系列: CentOS系统用yum安装MySQL的朋友,请使用 grep "temporary password" /var/log/mysqld.log 命令,返回结 ...

  4. 安装onlyoffice document server

    1. 安装docker apt install docker.io 2. 安装和启动onlyoffice sudo docker run -i -t -d -p 80:80 onlyoffice/do ...

  5. oracle密码过期解决方法

    Oracle提示错误消息ORA-28001: the password has expired 在oracle服务器上用sqlplus / as sysdba登录进去,可以通过下面的sql语句查看账户 ...

  6. python3----split and join

    s = "I am fine" s = s.split(" ") print(s) print("%".join(s)) results: ...

  7. Linux 下 -bash: mysql: command not found解决办法

    -bash: mysql: command not found 1.vim ~/.bash_profile 最下面写 export PATH=$PATH:/usr/local/mysql/bin(你的 ...

  8. 1028 大数乘法 V2(FFT or py)

    1028 大数乘法 V2 基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 给出2个大整数A,B,计算A*B的结果.   Input 第1行:大数A 第2行:大数B ...

  9. CSS 关于让页面的高度达到电脑屏幕的底部

    .sidebar:before {content: "";display: block;width: 190px;position: fixed;bottom: 0;top: 0; ...

  10. 巨蟒python全栈开发linux之centos1

    1.linux服务器介绍 2.linux介绍 3.linux命令学习 linux默认有一个超级用户root,就是linux的皇帝 注意:我的用户名是s18,密码是centos 我们输入密码,点击解锁( ...