jquery中使用ajax

更多具体的可以参考jquery文档

$.ajax()方法概述

作用：发送Ajax请求。

其中data可以使用对象格式（会默认转化为字符串） 自动转换name=zhangsan&age=100
可以使用字符串格式

如果参数类型是json

contentType: 'application/json',

data需要 data: JSON.stringify(params),

beforeSend 在请求发送之前调用 也可以在函数外单独写成ajaxSuccess(callback)
success 请求发送成功调用 ajaxError(callback)
error:请求失败调用 传入的是xhr XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。
ajaxComplete(callback) ：AJAX 请求完成时执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。

 $("#msg").ajaxComplete(function(event,request, settings){
   $(this).append("<li>请求完成.</li>");
 });

ajaxSend(callback)：AJAX 请求发送前执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数

 $("#msg").ajaxSend(function(evt, request, settings){
   $(this).append("<li>开始请求: " + settings.url + "</li>");
 });

ajaxStart(callback)：AJAX 请求开始时执行函数。Ajax 事件。

 $("#loading").ajaxStart(function(){
   $(this).show();
 });

ajaxStop(callback) AJAX 请求结束时执行函数。Ajax 事件。

 $("#loading").ajaxStop(function(){
   $(this).hide();
 });

这些方法可以写成对应的事件格式 例如：

// 当页面中有ajax请求发送时触发
        $(document).on('ajaxStart', function() {
            NProgress.start()
        })

serialize方法：将表单的内容变成字符串

$("form").serialize()

serializeArray：将表单的内容变成数组 其中每个元素是对象类型 属性为表单的name 值为value 可以通过遍历变成对象格式

 // 将表单中用户输入的内容转换为对象类型
        function serializeObject(obj) {
            // 处理结果对象
            var result = {};
            // [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
            var params = obj.serializeArray();
            //得到的类型是数组  每一个元素是一个对象 
            // 循环数组 将数组转换为对象类型
            $.each(params, function(index, value) {
                    result[value.name] = value.value;
                })
                // 将处理的结果返回到函数外部 返回的是一个对象
            return result;
        }

$.get()、$.post()方法概述

作用：$.get方法用于发送get请求，$.post方法用于发送post请求。

jQuery 1.12 中 jQuery.post 和 jQuery.get 支持对象参数，这样一来好处还比较多，比如设置回调函数的context，或者跨域 post 时可以withCredential: true

jQuery.get({
            url: “/example”
});
      

jQuery.getJSON(url, [data], [callback]) 载入Json数据
jQuery.getScript(url, [callback]) 载入js文件

$.ajax发送jsonp请求

$.ajax({
                url: '/jsonp',
                // 向服务器端传递函数名字的参数名称 默认是callback
                jsonp: 'cb',
                //指定函数名称
                jsonpCallback: 'fn',
                // 代表现在要发送的是jsonp请求 发送什么请求用datetype控制
                dataType: 'jsonp',
                /*,
                success: function (response) {
                    console.log(response)
                }*/
            })

原本默认的请求地址是 ？callback=函数名
但是如果之前用过Jsonp进行修改的话传递过去的就是 ？修改的值=函数名
这样的话服务器端就无法使用express已经封装好的jsonp函数

app.get('/jsonp', (req, res) => {
    //因为发送请求的时候将callback改成了cb  所以不能直
    //需要在.cb中获取到函数的名称
    const cb = req.query.cb
    const data = cb + "({name: 'zhaoliu'})"
    res.send(data);
});