前言

前面我们已经学了讲解了Jquery的选择器，关于DOM 的API还有事件的API。本博文需要讲解Jquery对AJAX的支持…

我们在开始使用JavaScript学习AJAX的时候，创建异步对象时，需要根据不同的浏览器来创建不同的对象….装载XML文件的时候，也有兼容性的问题。

Jquery就很好地屏蔽了浏览器不同的问题，不需要考虑浏览器兼容的问题，这是非常非常方便我们开发的。

Jquery对ajax常用的API

$.ajax([options])
load(url, [data], [callback])
$.get(url, [data], [fn], [type])
$post(url, [data], [callback], [type])
serialize()

前4个方法的功能都是差不多的，都是向服务器发送请求，得到服务器返回的数据。

最后一个是对表单的数据进行封装，将表单的数据封装成JSON格式

`load()`

首先，我们来使用一下load()这个方法吧。在文档中对它的解释是这样子的。

我来补充一下：

第一个参数：表示的是要请求的路径
第二个参数：要把哪些参数带过去给服务器端，需要的是JSON格式的
第三个参数：回调方法，服务器返回给异步对象的时候，会调用该方法

回调方法也有三个参数：

回调函数中参数一：backData表示返回的数据，它是js对象
回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error，
回调函数中参数三：xmlHttpRequest表示ajax中的核心对象

一般地，我们只需要用到第一个参数！

我们来使用这个方法来获取当前的时间，对这个方法熟悉一下：

调用load方法的jquery对象，返回结果自动添加到jQuery对象代表的标签中间

如果带参数就自动使用post，不带参数自动使用get。
使用load方法时，自动进行编码，无需手工编码



<%--

  Created by IntelliJ IDEA.

  User: ozc

  Date: 2017/5/18

  Time: 13:36

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

  <head>

    <title>$Title$</title>

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

  </head>

  <body>

  当前时间是：<span id="time"></span><br>

  <input type="button" id="button" value="获取当前时间">

  <script type="text/javascript">

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

      //请求服务器端的路径

      var url = "${pageContext.request.contextPath}/TimeServlet?time?" + new Date().getTime();

      //没有要参数要带过去

      //var sendData = null;

      /*

       * function方法的三个参数：

           * 第一个参数表示服务器端带回来的数据，是JS对象

           * 第二个参数表示的是返回状态的文字描述【用处不大】

           * 第三个参数表示的是异步对象，一般我们用来看服务器端返回的JSON的值是什么【用处还行】

           *       因为第一个参数返回的是JS对象，因此我们是看不见具体JSON的值是什么，所以有的时候要用第三个参数

       *

       * 值得注意的是：

       *       要想使用第三个参数，就必须把前两个参数给写上！

       *       调用load方法的jquery对象，返回结果自动添加到jQuery对象代表的标签中间

       * */

      $("#time").load(url);

    });

  </script>

  </body>

</html>

Servlet代码：



    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

        String date = dateFormat.format(new Date());

        PrintWriter writer = response.getWriter();

        writer.write(date);

        writer.flush();

        writer.close();

    }

效果：

`$.get()`

上面的load()方法，当我们带参数给服务器的时候，就自动转化成post、不带参数的时候就转换成get。$.get()就是指定是get方法

load()方法是使用Jquery对象来调用的，并且调用过后，会把数据自动填充到Jquery对象的标签中间，而$.get()并不是特定的Jquery对象来调用！

$.get(url, [data], [fn], [type])参数和load()是完全类似的，我们在上面的例子中该一下就行了。

由于$.get()是没有将返回的数据自动填充到标签之中，因此需要手动地添加到指定的标签之中！



      $.get(url, function (backData) {

        //得到客户端返回的数据【JS对象】

        $("#time").append(backData);

      });

效果：

`$.post()`

.post()和.get()是十分类似的，只不过是把请求方式改变了，一般情况下，我们有参数传递给服务器的时候，都是用post方式的。

使用$.post()方法是需要设定编码的，它和load()方法是不一样的！

下面使用检查用户名和密码是否合法的案例来说明这两个方法：



<%--

  Created by IntelliJ IDEA.

  User: ozc

  Date: 2017/5/18

  Time: 13:36

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>$Title$</title>

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

</head>

<body>

<%--使用异步操作，表单的form和method都不是必须的，如果指定了，还是会根据后面Jquery的方法和参数来决定--%>

<form>

    <table>

        <tr>

            <td>用户名：</td>

            <td><input type="text"></td>

        </tr>

        <tr>

            <td>密码：</td>

            <td><input type="password"></td>

        </tr>

        <tr>

            <td><input type="button" value="检查"></td>

        </tr>

    </table>

    <span id="backData"></span>

</form>

<script type="text/javascript">

    $(":button").click(function () {

        var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime();

        //要传送过去的数据必须是JSON格式的

        var sendData = {

            username: $(":text").val(),

            password: $(":password").val()

        };

        $.post(url, sendData, function (backData) {

            //得到返回的数据，填充到相对应的位置

            $("#backData").text(backData);

        });

    });

</script>

</body>

</html>

Servlet代码：



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;

/**

 * Created by ozc on 2017/5/21.

 */

@WebServlet(name = "UserServlet",urlPatterns = "/UserServlet")

public class UserServlet extends HttpServlet {

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

        //设定编码

        request.setCharacterEncoding("UTF-8");

        response.setContentType("text/html;charset=UTF-8");

        String username = request.getParameter("username");

        String password = request.getParameter("password");

        String backData = "用户名和密码合法";

        if ("哈哈".equals(username) && "123".equals(password)) {

            backData = "用户名或密码不合法";

        }

        response.getWriter().write(backData);

    }

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

        this.doPost(request, response);

    }

}

`serialize()`

上面在介绍参数的时候已经说了，发送给服务器端的参数是需要JSON格式的，但是呢，如果我在表单中有很多很多的参数呢？？？那不是要我自己一个一个地去拼接？？？？

于是乎，Jquery也提供了serialize()这么一个方法，给我们自动把表单中的数据封装成JSON格式的数据

使用之前要注意的是：

为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名
必须在<form>标签元素之内

根据上面的例子，我们来使用一下，我们调用serialize()方法，不自己去拼接JSON



<%--

  Created by IntelliJ IDEA.

  User: ozc

  Date: 2017/5/18

  Time: 13:36

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>$Title$</title>

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

</head>

<body>

<%--使用异步操作，表单的form和method都不是必须的，如果指定了，还是会根据后面Jquery的方法和参数来决定--%>

<form>

    <table>

        <%--要想使用serialize这个方法，就必须在表单之内，并且给上对应的name属性--%>

        <tr>

            <td>用户名：</td>

            <td><input type="text" name="username"></td>

        </tr>

        <tr>

            <td>密码：</td>

            <td><input type="password" name="password"></td>

        </tr>

        <tr>

            <td><input type="button" value="检查"></td>

        </tr>

    </table>

    <span id="backData"></span>

</form>

<script type="text/javascript">

    $(":button").click(function () {

        var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime();

        //要传送过去的数据必须是JSON格式的

/*        var sendData = {

            username: $(":text").val(),

            password: $(":password").val()

        };*/

        var sendData = $("form").serialize();

        $.post(url, sendData, function (backData) {

            //得到返回的数据，填充到相对应的位置

            $("#backData").text(backData);

        });

    });

</script>

</body>

</html>

效果：

`$.ajax()`

对于这个方法，我们又使用二级联动这个案例来讲解吧。我们曾经使用过JavaScript来解析XML、JSON来实现二级联动。这次我使用Jquery+Struts2+JSON来实现二级联动。

$.ajax()这个方法接收的参数是一个JSON类型，JSON里面有几个参数：

type【请求类型】
url【请求路径】
data【发送给服务器的数据，也是一个JSON类型】
success【回调函数】

这里遇到的问题：动态获取选择下拉框的值时候，调用的是val()而不是text()….



<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>省份-城市，基于jQuery的AJAX二级联动</title>

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

</head>

<body>

<%--############前台页面##############################--%>

<select name="province" id="provinceId">

    <option>请选择省份</option>

    <option>广东</option>

    <option>北京</option>

</select>

<select name="city" id="cityId">

    <option>请选择城市</option>

</select>

<%--############监听省份##############################--%>

<script type="text/javascript">

    $("#provinceId").change( function() {

        //每次调用的时候，把城市的值清空，除了第一项

        $("#cityId option:gt(0)").remove();

        //得到具体选择的值，讲道理这里应该是test的，可是test()没反应，要用val()

        var province = $("#provinceId option:selected").val();

        //如果不是“请选择省份”，才触发事件

        if ("请选择省份" != province) {

            //它接收的是一个JSON类型的数据

            $.ajax(

                    {

                        type: "POST",

                        url: "${pageContext.request.contextPath}/findCityByProvince?time=" + new Date().getTime(),

                        data: {"province": province},

                        success: function (backData, aaa, ajax) {

                            //看下服务器带过来的数据是什么样的，然后再对JSON进行解析

                            //alert(ajax.responseText);

                            //得到服务器返回的数据,是一个JSON格式数据

                            var array = backData.city;

                            for(var i=0;i<array.length;i++) {

                                //动态创建option节点，添加到城市下拉框中

                                var $option  = $("<option>" + array[i] + "</option>");

                                $("#cityId").append($option);

                            }

                        }

                    }

            );

        }

    });

</script>

Action



import com.opensymphony.xwork2.ActionSupport;

import java.util.ArrayList;

import java.util.List;

/**

 * Created by ozc on 2017/5/18.

 */

public class ProvinceAction  extends ActionSupport{

    //自动封装数据

    private String province;

    public String getProvince() {

        return province;

    }

    public void setProvince(String province) {

        this.province = province;

    }

    //封装城市的集合

    private List<String> city = new ArrayList<>();

    public List<String> getCity() {

        return city;

    }

    public String findCityByProvince() throws Exception {

        if ("广东".equals(province)) {

            city.add("广州");

            city.add("珠海");

            city.add("从化");

        } else if ("北京".equals(province)) {

            city.add("一环");

            city.add("二环");

            city.add("三环");

            city.add("四环");

        } else {

            System.out.println("没有你选择的地区");

        }

        return "ok";

    }

}

Struts.xml配置文件



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

<!DOCTYPE struts PUBLIC

        "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"

        "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>

   <package name="province" extends="json-default" namespace="/">

        <global-results>

            <result name="ok" type="json"></result>

        </global-results>

        <action name="findCityByProvince" class="ProvinceAction" method="findCityByProvince">

        </action>

    </package>

</struts>

效果：

Jquery第三篇【AJAX 相关的API】的更多相关文章

JQuery（三） Ajax相关
JQuery大大简化了Ajax通用操作,开发者只需要指定请求URL,回调函数即可. 三个主要方法: $().param(obj):将obj参数(对象或数组)转化成查询字符串. {name:" ...
JQuery（三）-- AJAX的深入理解以及JQuery的使用
HTTP HTTP http: 超文本传输协议.特点: 简单.快速.灵活.无状态.无连接 URL: 统一资源定位符. 组成:协议名://主机IP:端口号/项目资源地址?传递参数的键值对#锚点 ①ip ...
jquery基础学习之AJAX篇（五）
理解不深,只知道这么用 jquery 中ajax的请求方法 $.ajax({ url:‘http://...’, //请求网址 type:'GET', //请求方法 success:function( ...
一、Ajax 二、JSON数据格式三、Ajax+Jquery 四、分页的实现
一.Ajax概述###<1>概述 ###<2>组成以XMLHttpRequest为核心,发送Ajax请求和接收处理结果以javascript为语言基础以XML/JSON作 ...
jquery jtemplates.js模板渲染引擎的详细用法第三篇
jquery jtemplates.js模板渲染引擎的详细用法第三篇 <span style="font-family:Microsoft YaHei;font-size:14px;& ...
老猿学5G扫盲贴：推荐三篇介绍HTTP2协议相关的文章
专栏:Python基础教程目录专栏:使用PyQt开发图形界面Python应用专栏:PyQt入门学习老猿Python博文目录老猿学5G博文目录 5G中的服务化接口调用都是基于HTTP2协议的,老 ...
【jQuery】 JQ和AJAX
AJAX AJAX全称异步 JavaScript 和 XML(Asynchronous JavaScript and XML),是一种用于网页前端和网站后台进行数据交互的手段.关于AJAX的详细介绍在 ...
python笔记-20 django进阶（model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）
一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...
jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下本文实例讲述了j ...

随机推荐

DLL基础
Visual C++在创建DLL导出函数时,可能会对原始的函数名做修改.例如: int WINAPI Add(int nLeft, int nRight) 导出后的函数名称是_Add@8. 下面两种方 ...
LxNx前端F2F面试问题整理
LxNx前端面试问题: 1. 你用过前端哪些框架?它们项目中会用到Angular.js Backbone.js 我回答jQuery, bootstrap, 而Augular.js只是学过 2. 那既然 ...
mysql、oracle和SQL server数据库的区别
1.总体对比. SQL,在这里我理解成SQL Server.三者是目前市场占有率最高(依安装量而非收入)的关系数据库,而且很有代表性.排行第四的DB2(属IBM公司),与Oracle的定位和架构非常相 ...
SQL用法笔记
1.更改当前记录以外的数据的xh自动加1(MySQL字段为int) String sql = "UPDATE t_readtext as tr SET xh = xh +1\n" ...
【Git】自动化Maven项目构建脚本（二）
这次脚本增加了构建选择,可以按需构建了. #!/bin/bash #----------------------------------------------- # FileName: auto-b ...
string,char*,int 之间的转化
c++中经常遇到string,char*,int之间的相互转化,今天就来整理一下. 以下是转载并修改的内容: 以下是常用的几种类型互相之间的转换 string 转 int先转换为char*,再使用at ...
MatplotLib常用基本操作
本文记录matlibplot常用基本操作,都是基本功能,不涉及复杂联合操作,其中各用法详细用法可参考官网: 1. 基本画图操作 ##mofan_matplotlib.pyplot import mat ...
DB Error || Warning
数据库在进行增删改查时有时候会发生错误,当在程序中一个操作总是不起作用的时候,我们可以尝试如下方法: 1.输出sql语句,有的sql语句可能是通过一些字符拼接完成的,这时候可能会发生'', +之类的混 ...
jmeter性能测试套路一
真的跑压力,都是master-slave的方式,部署在压力机上跑性能测试本机一般都是调试.
django框架简介
-------------------MVC与MVT框架-------------------1.MVC MVC框架的核心思想是:解耦.降低各功能模块之间的耦合性,方便将来变化时,更容易重构代码,最大 ...

Jquery第三篇【AJAX 相关的API】

前言

Jquery对ajax常用的API

load()

$.get()

$.post()

serialize()

$.ajax()