javascript快速笔记（下）

这一节主要记录我经常遇到的JQuery以及对于后端很重要的Ajax.

首先要在你的html页面引入jquery，将下面这句话加入到html的head标签里面。推荐用WebStorm，它可以帮你自动下载要引入的这个文件。而且还可以用它调试javascript程序。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

一、jQuery 语法实例

$(this).hide()

演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。

$("p").hide()

演示 jQuery 的 hide() 函数，隐藏所有元素。

$(".test").hide()

演示 jQuery 的 hide() 函数，隐藏所有 class=“test” 的元素。

$("#test").hide()

演示 jQuery 的 hide() 函数，隐藏 id=“test” 的元素。

二、什么是 AJAX？

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。

三、AJAX 和 jQuery

jQuery 提供了用于 AJAX 开发的丰富函数（方法）库。

通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。

而且您可以直接把远程数据载入网页的被选 HTML 元素中！

jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。它的语法如下：

$(selector).load(url,data,callback)

请使用 selector 来定义要改变的 HTML 元素，使用 url 参数来指定数据的 web 地址。
只有当您希望向服务器发送数据时，才需要使用 data 参数。
只有当您需要在执行完毕之后触发一个函数时，您才需要使用 callback 参数。

四、jQuery AJAX 请求

请求 描述

$(selector).load(url,data,callback);        //把远程数据加载到被选的元素中
$.ajax(options);                            //把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type);              //使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type);             //使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback);               //使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback);                  //加载并执行远程的 JavaScript 文件

(url) 被加载的数据的 URL（地址） (data) 发送到服务器的数据的键/值对象 (callback) 当数据被加载时，所执行的函数 (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text) (options) 完整 AJAX 请求的所有键/值对选项

五、常见的$.ajax(options)使用

可以参考下面网站：
http://www.w3school.com.cn/jquery/ajax_ajax.asp

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

常见参数解释

1. type
   类型：String
   默认值: (“GET”)。请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

2. url
   类型：String
   默认值: 当前页地址。发送请求的地址。

3. data
   类型：String
   发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。

4. async
   类型：Boolean
   默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
   注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

常见回调函数

1. success
   当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

2. error
   在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）

登陆界面示例

• serialize() 定义和用法 serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

• jQuery.fn是jQuery的原型对象

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

//按钮按下的事件函数
function sub() {
	//获取表单数据
	var json1 = $('#form1').serializeObject();
	$.ajax({
	    type: "POST",
	    //根据自己后端map映射进行更改
	    url: "http://localhost:8080/test/checkUser.json",
	    dataType: "json",
	    data: json1,
	    traditional: true,
	    xhrFields: {
	        withCredentials: true //session id 保持不变
	    },
	    success: function (tt) {
	        alert(tt.data.sex);
	    },
	    error: function (data) {
	        alert("查询失败");
	        // 页面跳转
	        window.location.href = "log.html";
	    }
	});
}