AJAX理解笔记

1、change（）

当元素的值发生改变时，会发生change事件，该事件适用于textarea和select元素上

2、each（）

each（）方法规定为每个匹配元素规定运行的函数

index 索引值  element当前遍历到的标签

3、get（）

DOM元素对象与JQ对象相互转化

[0]索引值为0

Ajas是与服务器交换数据的技术，他在不重载全部页面的情况下，实现了对部分网页

的更新

简介

AJAX=异步JavaScript和XML（Asynchronous JavaScript and XML）。

1. 简短地说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
2. Jquery提供多个与AJAX有关的方法：通过Jquery和AJAX方法，您能够使用HTTP Get 和 HTTP Post从远程服务器上请求文本、HTML、XML、或JSON -同时能够把这些外部数据直接载入网页的被选元素中。

JS异步编程里的Ajax

例子：点击按钮修改文本

1、创建XMLHttpRequest对象（用于和服务器交换数据）

2、向服务器发送请求（设置请求参数）

open（method，url，async）

open（请求方式，请求路径，是否异步）（异步：默认true是异步，false是同步）

//3、服务器响应

responseText获得字符串的相应数据

3、onreadystatechange

存储函数（或函数名），每当readyState属性改变时，就会调用该函数

4、发送请求

回调函数（如果要处理$.ajax()得到的数据，则需要使用回调函数。BeforeSend、error、url,[data,[callback]]

load(url, [data], [callback])

$.get(url, [data], [callback], [type])

$.getJSON(url, [data], [callback])

$.getScript(url,[callback])

$.post(url,[data],[fn],[type])

url:待装入 HTML 网页网址。url:发送请求地址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

data:待发送 Key/value 参数。

type:返回内容格式，xml, html, script, json, text, _default。

下面举了几个例子：

 $(function () {

 //$.ajax()  无参数   

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

                $.ajax({

                    url: "/Jquery/AjaxFun",   //请求路径

                    type: "POST",//默认：get  //请求方式

                    dataType: "json",         //设置从控制器返回的类型

                    success: function (rtJson //参数) {  //回调函数

                        console.log(rtJson    //参数);

                    }

                });

});

 //$.ajax()传参1 get请求  （拼接）

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

                var str = "ajax使用get方式发送请求并传参";

                //url：/Jquery/AjaxFun2?strPara="ajax使用get方式发送请求并传参";

                $.ajax({

                    url: "/Jquery/AjaxFun2?strPara="+str,//请求路径 

                    type: "get",//请求方式

                    dataType: "json",//设置从控制器返回的类型

                    success: function (rtJson) {

                        console.log(rtJson);

                    }

                });

            });

//$.ajax()传参2 post请求   （单独对象发送请求）

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

                var str = "ajax使用post方式发送请求并传参";

                $.ajax({

                    url: "/Jquery/AjaxFun2",//请求路径

                    type: "post",

                    dataType: "json",//设置从控制器返回的类型

                    data: {

                        strPara: str  键值对格式 键：值

                    },

                    success: function (rtJson) {

                        console.log(rtJson);//回调函数

                    }

                });

            });

控制器接收参数的几种方法：

Form表单的提交

 //js表单提交

        function jsSubmit() {

            document.getElementById("formStudent").submit();

        }

        //jq表单提交

        function jqSubmit() {

            $("#formStudent").submit();

        }

   //js XMLHttpRequest提交

        function jsXMLHttpRequest()

        {

            //FormData构建参数  方法一：

            //获取页面数据

            //var stuName = $('#formStudent [name="studentName"]').val();

            //var stuAge = $('#formStudent [name="age"]').val();

            //var stuSex = $('#formStudent [name="sex"]').val();

            //var stuClass = $('#formStudent [name="classId"]').val();

            //FormData()

            //var fmData = new FormData();

            //fmData.append("studentName", stuName);

            //fmData.append("studentAge", stuAge);

            //fmData.append("studentSex", stuSex);

            //fmData.append("studentClass", stuClass);

            //FormData构建参数  方法二：

            //获取form表单元素

            var myForm = document.getElementById("formStudent");

            var fmData = new FormData(myForm);

            //1、创建对象

            var xhr = new XMLHttpRequest();

            //2、设置请求参数

            xhr.open("post", "/Form/returnTxt2");

            

            //3、请求成功的回调

            xhr.onload = function () {

                //获取返回的数据

                var rtJson = xhr.responseText;

                console.log(rtJson);

            }

            //4、发送请求

            xhr.send(fmData);

        }

           

        //jq $.ajax() 序列化

        function jqAjax1() {

            //获取页面数据 序列化

            var studentData = $("#formStudent").serialize();

            var studentData2 = $("#formStudent").serializeArray();

            //console.log(studentData2);

            //get

            //$.ajax({

            //    url: "/Form/returnTxt1?" + studentData,

            //    type: "get",

            //    dataType: "json",

            //    success: function (rtJson) {

            //        console.log(rtJson);

            //    }

            //});

      

        //重置

        function jsjqreset()

        {

            //DOM元素.reset()

            //document.getElementById("formStudent").reset();

            $("#formStudent")[0].reset();

        }

//重置

        function jsjqreset()

        {

            //DOM元素.reset()

            //document.getElementById("formStudent").reset();

            $("#formStudent")[0].reset();

        }

Ajax请求

$.ajax() 通过HTTP请求加载远程数据

load() 载入远程HTTP GET请求载入信息

$.get() 通过HTTP GET请求载入信息

$.getJSON 通过HTTP GET请求载入JSON信息

$.getScript 通过HTTP GET请求载入并执行一个JavaScript文件

$.post() 通过远程HTTP GET请求载入信息

Ajax事件

ajaxComplete() 规定AJAX请求完成时运行的函数

ajaxError() 规定AJAX请求失败时运行的函数

ajasSend() 规定AJAX请求发送之前运行的函数

ajaxStart() 规定第一个AJAX请求开始时运行的函数

ajaxStop() 规定所有的AJAX请求完成时运行的函数

ajaxSuccess() 规定AJAX请求完成时运行的函数

希望可以帮助到你们。

以上就是我的分享和一些资料，新手上路，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！